go41

Position a div absolute on top and align it center with CSS

von Joern am 15. Mai. 2009 | Keine Kommentare

I wanted to bring up the div with the login to the top of this page. Actually this ‚div login‘ is loaded before the footer at the end of the page, to bring it to the top I tried using position:absolute; in style.css, that’s working so far.
More difficult it was to center this div. Sure, there is text-align:center; left:auto; right:auto; and width:100%;

This is working on all browsers – except IE, which moved this div to the right side of the screen.
I found two ways making it align center in IE, Firefox, Safari and Chrome.
first working style (used here in this forum):
#login {

position:absolute;

left:0;

right:0;

text-align:center;

top:1px;

width:100%;

}
second working style:
#login {

position:absolute;

left:50%;

margin-left: -50%;

text-align:center;

top:1px;

width:100%;

}
The second way to style a centered div absolute on top is actually great, position it 50% from left and push back minus 50% of screen width.
____________________
you find me on Google+, Twitter and Facebook

(von: Joern)

Hier noch 6 weitere Ergebnisse dieses Threads:

Re: Position a div absolute on top and align it center with CSS :: Reply by qtest

5. Apr. 2010 (von: qtest)

How can I have a fixed div at the bottom of the browser containing newsletter subscription field and/or RSS feed and/or Social Media icons? Something like http://garcya.us/ Also suggest which plugin I should use for newsletter subscription.Zafar http:/... Weiterlesen →

Re: Position a div absolute on top and align it center with CSS :: Reply by master

5. Apr. 2010 (von: master)

to get a div staying on bottom and not scrolling use something like:#bottomfx {background:transparent;bottom:0;height:40px;left:0;position:fixed;width:100%;}and put your submit form in a div id bottomfxin your case just try to give your #bookmarks the... Weiterlesen →

Re: Position a div absolute on top and align it center with CSS :: Reply by master

5. Apr. 2010 (von: master)

I see you just put it there, but your tag cloud is in front of it.The swf has to be in transparent mode, you can try to set this in WP-Cumulus Options under 'use transparent mode'____________________you find me on Google+,…

no double posting!

11. Apr. 2011 (von: msderky)

hey still working and editing my arthemia theme and there is a small fix that has really been bugging me but I want it fixed. I would like the posts that show up in my headline/featured to not show up…

Re: no double posting! :: Reply by Joern

14. Apr. 2011 (von: Joern)

Actually Arthemia has this function built in already. In your index.php under the div id="front-list" you have:Code:<?php$page = (get_query_var('paged')) ? get_query_var('paged') : 1;query_posts("cat=-27,-28&paged=$page&posts_per_page=5"); ?>The part cat=-27,-28 means posts from the two categories with the ID 27 and ID 28 will…

combination of categories AND pages in arthemia category bar

14. Apr. 2011 (von: Joern)

The question is:I would like to have a combination of categories AND pages in my category bar. How would I do that?Preferbly 4 categories and 1 page (at the end of the bar).Help would be so much appreciated!!Answer:I would do…

Autor:

Du findest mich auch auf Google+, Twitter und Facebook!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


weitere forum Beiträge: