Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyrównanie do prawej krawedzi div'a
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
aLukas
20.09.2007, 16:28:14
Witam,

zrobilem w css menu oparte na liscie (<ul>)
mam następujący problem:

menu to powinno znalezc sie wewnątrz diva wyrownane do jego prawej krawedzi, ale nie moge tego zrobic...

menu w css:
Kod
     ul#nav{
              margin-left:auto;
              margin-right:0px;
              height: 44px; width: 679px;
              }
              ul#nav li {
                  float: left;
                  list-style: none;
                  }
              ul#nav li a {
                  position: absolute;
                  text-indent: -9999px;
                  text-decoration: none;
                  border: none !important;
                  height: 44px;
                  }
              ul#nav li#onas a {
                  left: 0px; width: 65px;
                  background: url("img/men.jpg") 0px 0 no-repeat;
                  }
              ul#nav li#inst a {
                  left: 65px; width: 75px;
                  background: url("img/men.jpg") -65px 0 no-repeat;
                  }
              ul#nav li#pom a {
                  left: 140px; width: 68px;
                  background: url("img/men.jpg") -140px 0 no-repeat;
                  }
              ul#nav li#mod a{
                  left: 208px; width: 100px;
                  background: url("img/men.jpg") -208px 0 no-repeat;
                  }
              ul#nav li#serv a{
                  left: 308px; width: 57px;
                  background: url("img/men.jpg") -308px 0 no-repeat;
                  }
              ul#nav li#nap a{
                  left: 365px; width: 68px;
                  background: url("img/men.jpg") -365px 0 no-repeat;
                  }
              ul#nav li#pro a{
                  left: 433px; width: 107px;
                  background: url("img/men.jpg") -433px 0 no-repeat;
                  }
              ul#nav li#cen a{
                  left: 540px; width: 57px;
                  background: url("img/men.jpg") -540px 0 no-repeat;
                  }
              ul#nav li#kont a{
                  left: 597px; width: 82px;
                  background: url("img/men.jpg") -597px 0 no-repeat;
                  }
          ul#nav li#onas a:hover              { background-position: -0px -44px; }
          ul#nav li#inst a:hover              { background-position: -65px -44px; }
          ul#nav li#pom a:hover                  { background-position: -140px -44px; }
          ul#nav li#mod a:hover                  { background-position: -208px -44px; }
          ul#nav li#serv a:hover              { background-position: -308px -44px; }
          ul#nav li#nap a:hover                 { background-position: -365px -44px; }
          ul#nav li#pro a:hover                 { background-position: -433px -44px; }
          ul#nav li#cen a:hover                 { background-position: -540px -44px; }
          ul#nav li#kont a:hover                 { background-position: -597px -44px; }


menu w html:
Kod
     <ul id="nav">
                      <li id="onas"><a href="?nav=">o nas</a></li>
                      <li id="inst"><a href="?nav=">inst</a></li>
                      <li id="pom"><a href="?nav=">pomia</a></li>
                      <li id="mod"><a href="?nav=">modern</a></li>
                      <li id="serv"><a href="?nav=">serwis</a></li>
                      <li id="nap"><a href="?nav=">naprawa</a></li>
                      <li id="pro"><a href="?nav=">projekt</a></li>
                      <li id="cen"><a href="?nav=">cennik</a></li>
                      <li id="kont"><a href="?nav=">kontakt</a></li>
                  </ul>


tutaj mozecie zobaczyc jak to wyglada

powinno dotykac do ramki tak jak zielony div.

z gory dzieki za pomoc
kbsucha
20.09.2007, 17:14:56
Ja bym zrobił specjalny div, jako kontener na to menu i wtedy tego diva pozycjonowac na stronie, nie pokazalaes jak cala twoja struktura strony wyglada wiec ciezko cos innego doradzic

pozdr
aLukas
20.09.2007, 17:21:44
ja wlasnie zrobilem diva na to menu, tylko że ono z niego mi wylazi! nie wiem czemu mecze to od 2h i nic sad.gif

wydaje mi sie ze to przez "position:absolute;" w kodzie menu ale jak to usune to w ogole nie mam menu graficznego...

Kod
<div id="page">
     <div id="top"><img src="img/1.jpg" id="logo"/></div>

     <!-- navigacja -->
     <div id="nav">
       <ul id="nav">
             <li id="onas"><a href="?nav=">o nas</a></li>
             <li id="inst"><a href="?nav=">inst</a></li>
             <li id="pom"><a href="?nav=">pomia</a></li>
             <li id="mod"><a href="?nav=">modern</a></li>
             <li id="serv"><a href="?nav=">serwis</a></li>
             <li id="nap"><a href="?nav=">naprawa</a></li>
             <li id="pro"><a href="?nav=">projekt</a></li>
             <li id="cen"><a href="?nav=">cennik</a></li>
             <li id="kont"><a href="?nav=">kontakt</a></li>
         </ul>
     </div>
    
</div>






POMOCY!!!!!!!!!!!!!!!!!!!!!!!!!!!
gekon
20.09.2007, 17:46:21 
[HTML] pobierz, plaintext 
  1. ul#nav{
  2. overflow: hidden;
  3. height: 100%;
  4. margin: 0;
  5. padding: 0;
  6. width: 679px;
  7. }
[HTML] pobierz, plaintext

Pozatym zamień w ul#nav li a "position: absolute;" na "display: block;".
Nie będe tłumaczył dlaczego, bo się potem na mnie wydzierają, że się wymądrzam.
aLukas
20.09.2007, 18:00:10
gekon dzieki, ale juz poradzilem sobie inaczej.

Swoją drogą chetnie bym przeczytał Twoje wymadrzanie sie

Pozdrawiam
Kreton
21.09.2007, 17:32:44
Szczerze to mógłbyś to zrobić inaczej.
Kod
<ul id="nav">
           <li><a href="?nav=">o nas</a></li>
           <li><a href="?nav=">inst</a></li>
           <li><a href="?nav=">pomia</a></li>
            ( i tak dalej )
</ul>


Kod
#nav ul { float: right; }
#nav ul li { float: right; }
#nav ul li a {display: block; }


W razie potrzeby wrzucić do jakiegoś diva i odpowiednio spozycjonować.
bagheera
3.01.2008, 21:49:43
witam, potrzebuje malej pomocy, wiec zapytam tutaj przy okazji, w htmlu jestem laikiem, ale potrzeba mi jedna rzecz zrobic, chce na mojej stronie dodac liste plikow, nazwa o lewej, waga po prawej, W 1 LINIJCE

tak wyglada uzyty kod:

Kod
1.   <a href='http://quakefour.net/maps/indexer/files/1+.pk3'>1+.pk3</a><div align="right";  style="display: inline">1835,53 KB</div></br>
2.   <a href='http://quakefour.net/maps/indexer/files/1++.pk3'>1++.pk3</a><div align="right">1716,10 KB</div></br>


tu jest ta strona
http://q3lover.ovh.org/viewpage.php?page_id=21

jak mam zrobic, zeb to bylo wyswietlane tak jak chce?
narazie jest:

1. 1+.pk31835,53 KB

a chce miec zeby wielkosci pliku byla po prawej stronie.

Troche dla mnie jest niezrozumiala specyfikacja, <center>text</center> dziala, a <right> juz nie ma?

probowalem sie doszukac w sieci, ale znalazem style, divy, tabele, akapity, a ja chce tylko 1 wyraz wyrowany do prawej, nie da ie tak?

Rozimiem jest masa zaawansowanch technik, ale lepiej jak jest latwo, szybko i pzyjemnie

Z gory dzieki za pomoc

pozdrawiam
gekon
3.01.2008, 22:22:37 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="pl">
  3. <head>
  4. 	<title>test</title>
  5. 	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. 	<style type="text/css">
  7.    ul { width: 140px; }
  8.    ul li { overflow: hidden; height: 100%; }
  9. 		ul li p { float: right; margin: 0; }
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<ul>
  14. 		<li><p>12,87kB</p><a href="#">Plik</a></li>		
  15. 	</ul>	
  16. </body>
  17. </html>
[HTML] pobierz, plaintext
CrazyProgrammer
3.01.2008, 22:40:13
Cytat(bagheera @ 3.01.2008, 21:49:43 ) *
witam, potrzebuje malej pomocy, wiec zapytam tutaj przy okazji, w htmlu jestem laikiem, ale potrzeba mi jedna rzecz zrobic, chce na mojej stronie dodac liste plikow, nazwa o lewej, waga po prawej, W 1 LINIJCE...

jak mam zrobic, zeb to bylo wyswietlane tak jak chce?
narazie jest:

1. 1+.pk31835,53 KB

a chce miec zeby wielkosci pliku byla po prawej stronie.


Tu masz rozwiązanie yahoo.gif 

[HTML] pobierz, plaintext 
  1. <div style="display:block;width:100%px;" > <!-- możesz zmienić width: ale powinno być ok  -->
  2. <BR><div style="display:inline;text-align:left;float:left;">
  3. <BR><a href='http://quakefour.net/maps/indexer/files/1+.pk3'>1+.pk3</a></div>
  4. <BR><div style="display:inline;text-align:right;float:right;">1835,53 KB</div>
  5. <BR></div>
  6. <BR>
[HTML] pobierz, plaintext



CrazyProgrammer - i nie ma rzeczy niemożliwych
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.