Lista pozioma i określone szerokości Opcje

[1010]

Witam,
potrzebuję stworzyć menu poziome, ale żeby każdy li miał szerokość 100px... Gdy zrobię tak:

[HTML] pobierz, plaintext 
#menu1
{
   font-size: 15px;
   font-weight: bold;
   width: 879px;
   height: 34px;
   background-image: url('img/menu1.jpg');
   background-repeat: no-repeat;
   text-align: center;
   float: left;
   display: inline;
}
 
#menu1 ul
{
   width: 879px;
   padding: 0;
   margin: 9px auto 0 auto;
   float: left;
   display: inline;
}
 
#menu1 li
{
   width: 100px;
   margin: 0;
   padding: 0;
   border: 1px solid;
   list-style-type: none;
   float: center;
   display: inline;
}
[HTML] pobierz, plaintext 

to szerokość dopasowywuje się do zawartości... Jak to poprawić?

[ShadowD]

Podaj pełny kod razem z html, to może pomogę... (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował ShadowD 28.03.2008, 21:13:31

[phpion]

Zmień:

[HTML] pobierz, plaintext 
float: center;
   display: inline;
[HTML] pobierz, plaintext 

na:

[HTML] pobierz, plaintext 
float: left;
[HTML] pobierz, plaintext 

dla #menu1 li - powinno pomóc.

[1010]

phpion: pomaga, ale w tym przypadku nie jest wyśrodkowane (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

oto cały kod:

[HTML] pobierz, plaintext 
#cotainer
{
   width: 984px;
   min-height: 900px;
   margin: 0 auto;
   padding: 0;
   text-align: left;
}
 
 
#txt
{
   width: 879px;
   background-color: #fff;
   margin: 0 0 0 0;
   padding: 0px;
   float: left;
   display: inline;
 
}
 
#logo
{
   width: 879px;
   height: 140px;
   background-image: url('img/logo.jpg');
   background-repeat: no-repeat;
   float: left;
   display: inline;
}
 
#menu1
{
   font-size: 15px;
   font-weight: bold;
   width: 879px;
   height: 34px;
   background-image: url('img/menu1.jpg');
   background-repeat: no-repeat;
   text-align: center;
   float: left;
   display: inline;
}
 
#menu1 ul
{
   width: 879px;
   padding: 0;
   margin: 9px auto 0 auto;
   float: left;
   display: inline;
}
 
#menu1 li
{
   width: 100px;
   margin: 0;
   padding: 0;
   border: 1px solid;
   list-style-type: none;
   float: left;
}
[HTML] pobierz, plaintext 

i html:

[HTML] pobierz, plaintext 
<div id="cotainer">
   <div id="txt">
      <div id="logo"></div>
      <div id="menu1">
         <ul>
            <li style="width: 150px;">Strona Główna</li>
            <li>link</li>
            <li>linki</li>
            <li>Pfdsf</li>
            <li>Forum</li>
         </ul>
      </div>
   </div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował 1010 28.03.2008, 21:22:23

[phpion]

[HTML] pobierz, plaintext 
#menu1 ul
{
   width: 879px;
   padding: 0;
   margin: 9px auto 0 auto;
}
[HTML] pobierz, plaintext 

[ShadowD]

W IE nie zadziała chyba że zostanie przełączony na tryb zgodności z wc3... ;/

[1010]

Nic to nie dało...

W IE nie zadziała chyba że zostanie przełączony na tryb zgodności z wc3... ;/

w firefoxie też nie działa...

Czy nagłówki mają coś wspólnego? Jakie powinny być?

[ShadowD]

To znaczy powiem tak jeśli chcesz napisze ci menu poziome bo nie mogę naprawić tego... ;p



Pomysł nr 1 bez formatowania:

[HTML] pobierz, plaintext 
<style>
 
li   {width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
 
</style>
 
 
 
<center>
<ul>
<li>Strona Główna</li>            
<li>Szkoły</li>            
<li>Znajomi</li>            
<li>Poczta</li>            
<li>Forum</li>         
</ul>
</center>
[HTML] pobierz, plaintext 

Pomysł nr 2 zgodny z standardami wc3:

[HTML] pobierz, plaintext 
<style>
 
ul   {text-align:center;}
 
li   {width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
 
</style>
 
 
 
 
<ul>
<li>Strona Główna</li>            
<li>Szkoły</li>            
<li>Znajomi</li>            
<li>Poczta</li>            
<li>Forum</li>         
</ul>
[HTML] pobierz, plaintext 

Ps Jak coś nie działa to pisz nawet na pw...

Ten post edytował ShadowD 28.03.2008, 21:41:40

[1010]

No i mam to tak i nie śmiga...


Mam aktualnie tak:

[HTML] pobierz, plaintext 
#menu1
{
   font-size: 15px;
   font-weight: bold;
   width: 879px;
   height: 34px;
   background-image: url('img/menu1.jpg');
   background-repeat: no-repeat;
   text-align: center;
   float: left;
}
 
menu1 ul
{
   text-align: center;
}
 
#menu1 li
{
   width: 100px;
   margin: 0;
   padding: 0;
   border: 1px solid;
   list-style-type: none;
   display: inline;
}
[HTML] pobierz, plaintext 

Cały czas albo center albo szerokość

Ten post edytował 1010 28.03.2008, 21:49:58

[ShadowD]

[HTML] pobierz, plaintext 
#menu1
{
font-size: 15px;
font-weight: bold;
width: 879px;
height: 34px;
background-image: url('img/menu1.jpg');
background-repeat: no-repeat;
text-align: center;
float: left;
}
 
menu1 ul                        <<<<<<<<<<<<< BŁĄD MASZ BEZ "#"
{
text-align: center;
}
 
#menu1 li
{
width: 100px;
margin: 0;
padding: 0;
border: 1px solid;
list-style-type: none;
display: inline;
}
[HTML] pobierz, plaintext 

i nadałeś id li i ul (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

Działający skrypt link http://85.31.230.167/2.php masz kod źródłowy możesz sprawdzić...

Ten post edytował ShadowD 28.03.2008, 21:51:23

[1010]

Dopisanie # nic nie daje... Nie mam już pojęcia co to może być...

[ShadowD]

Napisz tak jak ci tu napisze:

[HTML] pobierz, plaintext 
<style>
 
ul   {text-align:center;}
 
li   {font-weight: bold; width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
 
</style>
 
 
 
 
<ul>
<li>Strona Główna</li>            
<li>Szkoły</li>            
<li>Znajomi</li>            
<li>Poczta</li>            
<li>Forum</li>         
</ul>
[HTML] pobierz, plaintext 

Jeśli chcesz dodać id to musisz dodać i wiliście i w stylu proszę kod przykładowy:

[HTML] pobierz, plaintext 
<style>
 
#lista   {text-align:center;}
 
#menu   {font-weight: bold; width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
 
</style>
 
<ul id='lista'>
<li id='menu'>Strona Główna</li>            
<li id='menu'>Szkoły</li>            
<li id='menu'>Znajomi</li>            
<li id='menu'>Poczta</li>            
<li id='menu'>Forum</li>         
</ul>
[HTML] pobierz, plaintext 

I nie ma prawa nie działać... ;p



Ten post edytował ShadowD 29.03.2008, 09:05:21

[wujko_thc]

[HTML] pobierz, plaintext 
li {
float:left;
display:block;
width:100px;}
[HTML] pobierz, plaintext 

Ten post edytował wujko_thc 13.04.2008, 21:20:05