13 svar · 1 762 visningar · startad av Pedda
Hur får man egentligen en horisontell lista att skippa indrag mm?
Svårt att förklara så jag bifogar en bild istället så ni kanske förstår.
CSS:
#wrapper {
width: 800px;
text-align: center;
margin: 0 auto;
}
.firstnavlist {
clear: both;
float: left;
margin: 0;
padding: 0;
text-align: left;
}
#menu ul{
float: left;
margin-left: 0;
padding-left: 0;
width: 100%;
display: block;
}
#menu li {
display: inline;
margin: 0;
padding: 0;
float: left;
}
index sida:
<div id="wrapper">
<!-- TOPBAR -->
<div id="topbar">
... logo mm här
</div>
<!-- MENY -->
<div class="firstnavlist">
<ul id="menu">
<li>... några li här</li>
</ul>
</div>
</div>
snabbaste lösningen:
man lägger in en reset-css överst i sin egen css som "nollställer" alla defaultvärden på margins mm http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
sen har du lite lustigheter i din kod
1 #menu ul{ tolkas som en UL i ett omgivande element som heter menu
korrekt är väl i såfall ul#menu, men det bör gå lika bra med bara #menu
2 <div class="firstnavlist"> varför klass här? har du flera firstnavlist?
<div id="menu">
<ul>
<li>... några li här</li>
</ul>
</div>
döp om .firstnavlist till
#menu{
clear: both;
float: left;
margin: 0;
padding: 0;
text-align: left;
}
Edit Förlåt rhdf, ser nu att du skrev samma lösning...
såg din skiss på kolla min hemsida
Har en mycket liknande meny som du kanske kan få någon idé från.
#menu #current{color:#000;background:url(bilder/bild.jpg) #fff left;}
#menu a{padding:8px 40px;border-right:1px solid #000;display:block;color:#fff;background: #4169e1;text-decoration:none;text-align:center;text-transform:uppercase;font-size:100%;}
#menu a:hover{color: #000;background: #eee8aa url(bilder/bild.jpg) left;}
#menu li{float:left;width:auto;height:auto;}
#menu ul{padding:0%;width:auto;list-style-type:none;}
och
<div id="menu">
<ul>
<li><a href="#">Hem</a></li>
<li><a id="current" href="#">undersökningar</a></li>
<li><a href="#">Kontakta oss</a></li>
</ul>
</div>
klassen firstnavlist hängde kvar från att jag byggde menyn på ett annat sätt tidigare.
Har ändrat nu efter era förslag och nu hamnar den till vänster som den ska, men fortfarande för långt ner.
Om du fortfarnde får ett avstånd om du lägger till
div,ul,li,a{margin:0;padding:0;}
img{border:none;margin:0;padding:0;}
Så får du visa hur du får dit dina bilder.
Såg nu att jag bara satt margin-left och padding-left till 0 på min ul, så det var jag som hade klavtat mig.
Nu funkar det som det ska.
Nu funkar det som det ska.
Det var visst inte riktigt sant.
I IE hamnar menyn 1px längre ner. Har ni något tips på vad det är som kan göra det?
CSS:
body, html {
background-attachment: scroll;
background-color: #FFFFFF;
background-image: url(gfx/body_bg.png);
background-repeat: repeat-x;
margin: 0;
padding: 0;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
}
#topbar {
float: left;
margin: 0;
padding: 0;
}
#wrapper {
width: 760px;
text-align: center;
margin: 0 auto;
padding: 0;
}
#contact {
color: #FFFFFF;
text-align: right;
padding-top: 20px;
margin: 0 auto;
}
#menu {
clear: both;
float: left;
margin: 0;
padding: 0;
text-align: left;
}
#menu ul{
float: left;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
}
#menu li {
margin: 0;
padding: 0;
float: left;
}
HTML:
<!-- WRAPPER -->
<div id="wrapper">
<!-- TOPBAR -->
<div id="topbar">
<img src="gfx/logo.png" alt="Logo" width="294" height="110" />
</div>
<div id="contact">
KONTAKT<br />
08-555 555
</div>
<!-- MENU -->
<div id="menu">
<ul>
<li>... några li här</li>
</ul>
</div>
</div>
</body>
</html>
Har du testat det jag skrev i mitt sista inlägg för att nollställa alla webläsare?
Har du testat det jag skrev i mitt sista inlägg för att nollställa alla webläsare?
Har testat det.
Jag testade din kod och jag hittar ingen extrapixel någonstans när jag färglade dina divar.
Visar du all kod?
Jag hade ett kommatecken för mycket i mitt förra förslag, ändrats nu.
testa att lägga in den reset-css jag länkade till
Den har löst en hel del konstigheter för mig. Den nollställer egentligen ingenting utan sätter bestämda värden på en massa element (sen att det råkar bli 0 är en annan sak)
Och fungerar inte det heller så sätt samma höjd på din #topbar som det är på din bild, dvs height:110px;.
Eller lägg in din bild i <p></p>
Gjorde så att jag minskade höjden på loggan och satta höjden på topbar till 110px, då funkar det även i IE.