LP_MAXI
Roosweb
chrillemeterCenterera
HEjsan, jag vill att menyn ska sitta i mitten:
http://www.aspkoll.se/imgo/456.jpg
index.php
http://aspkoll.se/code/Index.asp?id=467
style.css
http://aspkoll.se/code/Index.asp?id=468
får inte till det.
någon som vet?
Bara meny texten, eller själva menyn? Om det bara är text så prova med, text-align:center;
1. Ta bort <center> elementet, du kan använda dig av text-align i din css.
2. ta bort width: 100% och margin auto från #container, en div är alltid 100% by default.
3. text-align hjälper inte i din meny, eftersom det inte är text-element du arbeta med där, du floatar dina li element så där gör det ändå inte någon nytta.
Det jag kommer på just nu är att du sätter magin: 0 auto och display: inline; på ditt ul element. dock måste du sätta en bestämd höjd på din #menu för att få till önskad effekt.
Vid lite tester så upptäcker man att det inte är det lättaste att fixa en sådan lösning, och du är inte ensam om det:
http://codingforums.com/showthread.php?t=136184
http://csscreator.com/node/33965
Den ända lösningen jag har hunnit hitta är en (enklast) Opera och Firefox specifik (då IE inte har stöd för display: table förrän vid IE8):
http://www.troidus.com/tag/center/
Redigerad av voigtan
Anledning:
Nu var jag så lat att använda google att jag glömde faktist kolla på min favorit site när det gäller ul naivgation:
http://css.maxdesign.com.au/listama...orizontal16.htm
verka lösa ditt problem. testade den och den centera ;) visst det är lite fel färger men den gör "rätt" ;)
Jag brukar centrera såhär:
/* Centrerad div */
div#menu {
position: absolute;
left: 50%;
margin: 0 0 0 -100px; /* Ska vara hälften så stort som bredden(width) */
width: 200px; }
Problemet med den typ av struktur innebär:
Du förlora allt vad elementet har för egenskaper som: höjden, bredd mot alla andra element på din sida pga position absolute.
Du låster dig att du måste alltid uppdatera din CSS om den bli bredare än 200px
Det visste jag redan men jag använder det endå =D
Bara för att du vet om det så kan du faktist skriva de nackdelar och headsup man måste vara medveten om man använder din kod. Nu gjorde jag det åt dig.
Då kan jag tala om att man kan ha en wrapper som man centererar på så vis. I detta fall en meny wrapper.
Dellans, tror du inte jag vet att man ha en wrapper, men det återstår fortfarane: du måste alltid uppdatera: höjd, bredd i två element än, att jobba statiskt är inte ett smidigt sätt och knappast något man vill sikta efter på en webbplats idag. Ditt sätt fungera, men det är knappast något jag rekommendera om man skall ha dynamiskt innehåll i sina element.
Första posten här, så jag får väl hoppas att jag inte gör bort mig helt och hållet.. Men har du testat följande:
#menu {position: relative; margin: 0 auto;}
roby: Finns egentligen ingen anledning att använda position: relative, du använder inte några andra syntax som arbeta med position att göra.
Välkommen hit roby.
Du gjorde inte bort dig, relative går att använda om personen i fråga skall exempelvis använda andra element i #menu med position:absolute; eller liknande, men i övrigt så påverkar den inte positionen av #menu.
Petters, om jag har förstått det rätt så vill du att texten (menyn) skall centreras? Det är ganska simpelt att ordna med CSS. Jag skulle använda följande kod för att garantera att det skulle fungera i "alla" webbläsare.
#menu {
text-align:center;
}
#menu ul {
margin:0 auto;
width:300px;
}
#menu ul li {
text-align:left;
}Det som är viktigt att tänka på är att du skall ha en fast bredd på #menu för att den skall placera sig i mitten. Använder du float:left; på <li> så ska du inte glömma att använda overflow:hidden;.
Jag har lagt upp ett exempel, titta på källkoden så ser du hur jag har gjort.
problemet där shadi är att du måste ha en bestämd bredd på en navigering. Vad http://css.maxdesign.com.au/listama...orizontal16.htm gör är att den ändra li-elementen till inline style (dvs den få möjligheten att förstå sig på text-align från parentNoden som är en ul i detta fall. och då behöver man inte oroa sig heller för att man måste sätta en bredd.
Förvisso, dock ser inte jag det som ett problem att ha en fast bredd på en meny. Den lösningen som du länkade till är bra, men man ska nog känna till flera för att kunna se vad som passar en bäst ;)
Jag ser jätte problem med det, eftersom jag jobbar inte med statisk data + vill verkligen inte låsa upp mig så är det inte en bra lösning (se mina tidigare inlägg på denna tråd).
Hur position:relative fungera är att block-elementet renderas ut (egenskapen som bredd och höjd) kommer vara kvar på sin orginal position, men kan flytta elementet men den plats (om vi säger boxen är 100x100px) så kommer den ta 100x100px på den ytan där den den i grunden skulle ha renderats ut.
har bara upptäckt en nytta egentligen med relative som position, det är om man vill göra grafiska ändringar (runda hörn eller liknande) på ett element, för då kan vi använda oss av absolut (och förlora sin orginal position) vilket är i mitt tycke den ända egentliga fördelen.
När det gäller relative så är det precis det jag syftade till. Säg att man har relative på menu och absolute på ul, då fungerar det (sett ur design/placeringsperspektiv). Och det är precis det du nämner där.
När det gäller den fasta bredden så är det inte alls ett problem om man jobbar med statisk data. För dig som använder dynamisk meny så kanske min lösning inte är den bästa, utan då ska man föredra lösningen du länkade till. Men är det så att man vet vad menyn innehåller (statisk data), d.v.s. att man vet att man bara ska ha x många items i menyn, så ser jag absolut inget problem med att ha en fast bredd.