Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Wyrównanie do prawej krawedzi div'a
aLukas
post 20.09.2007, 16:28:14
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 10.08.2007

Ostrzeżenie: (0%)
-----

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

Ten post edytował aLukas 20.09.2007, 16:38:47
Go to the top of the page
+Quote Post
kbsucha
post 20.09.2007, 17:14:56
Post #2





Grupa: Zarejestrowani
Postów: 113
Pomógł: 19
Dołączył: 2.08.2007

Ostrzeżenie: (0%)
-----

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


--------------------
Tworzenie stron internetowych Kraków - Blog
Go to the top of the page
+Quote Post
aLukas
post 20.09.2007, 17:21:44
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 10.08.2007

Ostrzeżenie: (0%)
-----

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!!!!!!!!!!!!!!!!!!!!!!!!!!!

Ten post edytował aLukas 20.09.2007, 17:23:22
Go to the top of the page
+Quote Post
gekon
post 20.09.2007, 17:46:21
Post #4





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
----- 

[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.


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
aLukas
post 20.09.2007, 18:00:10
Post #5





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 10.08.2007

Ostrzeżenie: (0%)
-----

gekon dzieki, ale juz poradzilem sobie inaczej.

Swoją drogą chetnie bym przeczytał Twoje wymadrzanie sie

Pozdrawiam
Go to the top of the page
+Quote Post
Kreton
post 21.09.2007, 17:32:44
Post #6





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

Ostrzeżenie: (0%)
-----

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ć.

Ten post edytował Kreton 21.09.2007, 17:33:29
Go to the top of the page
+Quote Post
bagheera
post 3.01.2008, 21:49:43
Post #7





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 3.01.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
gekon
post 3.01.2008, 22:22:37
Post #8





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
----- 

[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


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
CrazyProgrammer
post 3.01.2008, 22:40:13
Post #9





Grupa: Zarejestrowani
Postów: 41
Pomógł: 3
Dołączył: 3.01.2008
Skąd: PHP Planet

Ostrzeżenie: (0%)
-----

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


--------------------
INŻYNIERIA OPROGRAMOWANIA - PROGRAMOWANIE AJAX PHP SQL VB C++ C Perl d(html) Flash & Grafika

Any questions ??? contact me: crazyprogrammer (at) rocketmail ( dot) com

skype: chrisnovack
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 24.04.2025 - 05:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn