Wyrównanie nagłówków menu do prawej

[Rekonstruktor]

http://association.community.vel.pl/site/ - zerknijcie. Prośba o wskazówki - w jaki sposób wyrównać SAME nagłówki (białe) do prawej ? Tak, żeby uzyskać taki efekt

 

 

                  Association                                   Contact

     lorem ipsum is simple               lorem ipsum is simple

 

 

Kod

 

 

/*----------------------------- HEADER ------------------------*/
#header {width:987px; height:85px; margin:auto;}
#header li {float:left; overflow:hidden; position:relative;}
#header li a {height:55px;display:block; text-decoration:none; cursor:hand;}
#header li span {position:absolute; font:11px Arial; color:#837351;padding-top:20px;}
#header li b {font:bold 12px "Trebuchet MS",Verdana,Arial;}
#header li .cover b {color:#f2eada;}
#header .boxgrid1 {width:100px; margin:15px 0 0 250px;}
#header .boxgrid2 {width:100px; margin-top:15px;}
#header .boxgrid3 {width:100px; margin-top:15px;}
#header .boxgrid4 {width:100px; margin-top:15px;}

Z góry bardzo dziękuje za pomoc.

[Macsch15]

Powinieneś jeden element objąć w DIV'a z maksymalnymi wymiarami a później wystarczy przy H3 dodać text-align.

[Rekonstruktor]

Chyba jeszcze nie czaję.

[Gość ratosluaf]

http://jsfiddle.net/XGvv9/

[Rekonstruktor]

Hm, a nie da się zrobić tego w jeszcze inny sposób - tak, żeby kto wie jak nie zmieniać tego kodu.

 

/*----------------------------- HEADER ------------------------*/
#header {width:987px; height:85px; margin:auto;}
#header li {float:left; overflow:hidden; position:relative;}
#header li a {height:55px;display:block; text-decoration:none; cursor:hand;}
#header li span {position:absolute; font:11px Arial; color:#837351;padding-top:20px;}
#header li b {font:bold 12px "Trebuchet MS",Verdana,Arial;}
#header li .cover b {color:#f2eada;}
#header .boxgrid1 {width:100px; margin:15px 0 0 250px;}
#header .boxgrid2 {width:100px; margin-top:15px;}
#header .boxgrid3 {width:100px; margin-top:15px;}
#header .boxgrid4 {width:100px; margin-top:15px;}

 

 

 

 

Np.

 

{text-align: right; width:100px; margin:15px] - tyle, że w tym przypadku nic to nie daje. 

Edytowane 7 Stycznia 2013 przez Rekonstruktor

[Gość ratosluaf]

Skąd mamy to wiedzieć, skoro nie wiemy do czego to się odnosi. To tak, jakbyś miał nakrętkę do śruby i się zapytał "Gdzie mam to wkręcić?" - "Gdzieś na świecie".

Masz gotowe rozwiązanie, podałem ci, jak to zrobić. Firebug w łapsko i rusz swoje szare komórki, aby coś osiągnąć.

[Rekonstruktor]

Próbuje cały czas. Ale na razie mi nie wychodzi.

#header .boxgrid1 {width:100px; margin:15px 0 0 250px;} - WELCOME#header .boxgrid2 {width:100px; margin-top:15px;} - BIOGRAPHY#header .boxgrid3 {width:100px; margin-top:15px;} - ASSOCIATION#header .boxgrid4 {width:100px; margin-top:15px;}- CONTACT

[Gość ratosluaf]

<a href="http://dropofwine.net/templates/photographer/01/index.html"><span><b>WELCOME</b><br>lorem ipsum...</span>
        <span class="cover" style="top: 0px;"><b>WELCOME</b></span></a>

Przestań używać <b> i wyrzuć welcome razem z lorem ipsum z jednego spana - wtedy będziesz mógł to zrobić z użyciem text-align.