Newbe, css-layout knas

4 svar · 487 visningar · startad av sugarbombshell 10 nov. 2008

sugarbombshellMedlem sedan nov. 200843 inlägg

Frågan10 nov. 2008 13:05#1

Vad i hela världen har jag gjort? :q
Vänstra kolumnen hamnar fel och jag fattar inte vad jag gör för fel. Den ska liksom ligga längst upp som den gjorde från början, vad som hände förstår jag inte.
Först trodde jag att det var menyn som var för stor för kolumnen, men den är på 147px och vänstra kolumnen är 160px. Kika på http://www.dack24.nu/567109.htm
Snälla hjälp mig.

Css koden följer här under

html, body{
margin:0;
padding:0;
text-align:center;
background:url(http://dack24.nu/images/bg.jpg);
}

#pagewidth{
width:980px;
text-align:left;
margin-left:auto;
margin-right:auto;
}

#header{
width:100%;
float:inherit;
position:relative;
height:210px;
background:url(http://dack24.nu/images/top.gif)
}

#menu{
width:980px;
float:right;
position:relative;
height:35px;
background:#99cc01;
}

#leftcol{
width:160px;
height:100%;
float:left;
position:relative;
background-color: #262626;
}

#maincol{
background-color: #ffffff;
float: right;
display:inline;
position: relative;
width:820px;
height:100%;
border: 3px solid #ffffff;
}

#wrapper {
background-color: #ffffff;
}

#footer{
height:5px;
background-color:#FFFFFF;
clear:both;
}

/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

Web-TorMedlem sedan nov. 200013 890 inlägg

10 nov. 2008 13:55#2

Svårt att såga på rak arm men du kan testa att ändra breden på #leftcol till 150px.

sugarbombshellMedlem sedan nov. 200843 inlägg

10 nov. 2008 14:50#3

Fantastiskt, på din raka arm gick det jätte fint ;)

Löjligt enkelt, då har jag förhoppningsvis lärt mig något nytt.
Tack!

Web-TorMedlem sedan nov. 200013 890 inlägg

10 nov. 2008 15:26#4

Trevligt!
Du kan säkert lösa problemet genom att ändra bredd på #maincol också, ifall du nu vill att #leftcol skall vara bredare.

Ps. Markera gärna tråden som löst.

rhdfMedlem sedan okt. 2007446 inlägg

11 nov. 2008 15:56#5

Inte för att vara negativ, men är det inte lite väl mycket tabeller i den där layouten?
meny skulle enkelt kunna lösts med en <ul>

<div id="menu">
<h2>Huvudmeny</h2>
   <ul>
      <li>menylänk1</li>
      <li>menylänk2</li>
      <li>menylänk3</li>
      <li>menylänk4</li>
   </ul>
</div>

med Css

#menu{
background-color:tokgrön;
}

#menu h2{display:none;}
#menu ul{
margin-left:160px;
.. osv
}