Hej!
Jag begriper inte detta. Jag har en horizontell lista som en meny och en logga bredvid till vänster. Inget konstigt. Så har list-elementet en border-bottom. Nu är det så att den stretchar ut alldeles för långt åt höger så att sidan inte får en fin rak högermarginal. Det beror förmodligen på att jag använt min-width, men om jag inte gör det så blir listan vertikal när fönstret är mindre.
Jag har provat sätta border-bottom på loggoelementet i stället men då måste jag sätta z-index på en av dem annars blir antingen loggan eller menyn inte klickbar.
Adressfältet nertill har i stort sett samma kod och i stället en border top, men där ser det ut som det ska. Där har jag också använt mig av min-width.
Så här ser html-koden ut för menyn:
<!-- Menu -->
<div class="logo"><a href="index.html"><img src="images/logo.gif" border="0"></a></div>
<div class="menu">
<ul>
<li><a href="om.html">Om Lefa</a></li>
<li><a href="prod.html">Produkter & Tjänster</a></li>
<li><a href="kvalitet.html">Kvalitet & Miljö</a></li>
<li><a href="kompetens.html">Kompetens</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<br style="clear:both">
</div>
Så här ser det ut i den externa css-filen:
.logo
{
position: absolute;
background: transparent;
margin-bottom: 100px;
left: 150px;
top: 50px;
min-width: 200px;
max-width: 300px;
padding-bottom: 10px;
}
.menu ul{
margin-top: 50px;
margin-bottom: 100px;
padding-top: 0px;
padding-left: 450px;
position: absolute;
text-transform: uppercase;
min-width: 800px;
max-width: 900px;
background: transparent;
border-bottom: 1px solid #e68117;
}
.menu ul li{
display: inline;
}
.menu ul li a{
float: left;
text-decoration: none;
color: #B0B0B0;
padding: 10.5px 11px;
background: transparent;
}
.menu ul li a:hover{
color: #B0B0B0;
text-decoration: underline;
}
.menu ul li a:visited
{
color: #B0B0B0;
}