bredd på "li" med css..?!!

5 svar · 263 visningar · startad av toja 27 apr. 2004

tojaMedlem sedan mars 2001218 inlägg

Trådstart27 apr. 2004 19:23#1

Tjena...

Har byggt upp en meny med hjälp av lista, alltså typ:

<ul>
  <li>News</a></li>
  <li>Events</a></li>
  <li>Members</a></li>
  <li>About</a></li>
</ul>

Har sedan satt lite egenskaper i css.. så den visas lite som jag vill... och på rad... istället för neråt...
varje "li" börjar med en grön linje på 3px... jag vill att alla li ska vara lika breda.. så att det är lika långt mellan de gröna linjerna på alla.. oavsett hur lång text det är i "li"....

Detta är koden jag gjort för menyn i css:

#menu1 {
  position: relative;
  width: 714px;
  background-color: #ffffff;
  background-image: url("img/bg_menu1.gif");
  margin: 0px;
  padding: 1px 1px 1px 65px;
  height: 18px;
}

#menu1 ul {
  margin: 4px 0px 0px 0px;
  padding: 0px;
}

#menu1 li {
  list-style-type: none;
  padding: 2px 15px 1px 15px;
  border-left: 3px solid #33FF00;
  display: inline;
  font-family: sans-serif, georgia, verdana, Arial, Helvetica;
  font-size: 9px;
  color: #ffffff;
  line-height: normal;
}

mvh
Tommie

jarvkloMedlem sedan juli 20013 378 inlägg

27 apr. 2004 20:08#2

Det kan du ställa in med width på #menu1 li

Räkna eller testa fram ett värde som du är nöjd med

tojaMedlem sedan mars 2001218 inlägg

27 apr. 2004 20:11#3

Har testat att sätta width... med massa olika värden... det händer inget..!!!

jarvkloMedlem sedan juli 20013 378 inlägg

27 apr. 2004 20:25#4

Right....

Missade några detaljer

Prova det här:
* Om du ställer in #menu li till att köra med display:block istället för display:inline
* ställer in float:left också
* och sedan även lägger till en width:150px (eller lämpligt värde)

så borde det funka

tojaMedlem sedan mars 2001218 inlägg

27 apr. 2004 21:45#5

tjena.. tackar.. det fungerade utmärkt... hehe.. har ju jobbat med css förr.. men försöker lära mig att bygga enligt nya standarden... och jag är grovt överraskad vad man kan göra med css alltså...

en liten fråga.. vad är det för skillnad på display: inline; / display: block; ... samt float:left, är det samma som align..?!!

jarvkloMedlem sedan juli 20013 378 inlägg

28 apr. 2004 07:40#6

display:block gör att du får samma beteende som en <div> - dvs du får ett block där innehållet dels börjar "på en ny rad" och där innehållet efter "börjar på ny rad".

display:inline gör att du får samma beteende som en <span> (eller som ett <b> fast utan fetstilseffekten ) - dvs det avgränsar en bit innehåll som ligger "i det normala flödet"

Normalt när du kör med display:block får du alltså en radbrytning direkt efter blocket...
MEN...
...när du lägger till en float:left så "flyter" du ut blocket utanför "flödet" och klistrar det i vänsterkanten på "omgivande block" (jfr att få en bild att flyta med <img align="left">)

Att sätta både display:block, width och float:left på flera block efter varandra i koden gör att dessa radar upp sig från vänsterkanten ett efter ett... Vilket är ett sätt att lösa ditt problem på...

Mer formellt (men med exempel och förklarande skisser) beskrivs det såhär i CSS2-specen:
Block
Inline
"normalt flöde" kontra "Float" m.m.