Har suttit och försökt i timmar men får det inte att funka. Vilket jag tror är ett simpelt problem för er som kan. Sidan består av ett antal div-boxar (CSS) har positionerat dom okey så det ser bra ut förrutom själva toppen på sidan (top) Den ska passa in ovanför den gröna rutan så helheten bildar en fyrkant. Den ska alltså inte ligga över åt vänster på sidkolumnen. Kan inte fatta detta. ändrar jag margin-left så drar den med sig hela sidan. Vore superglad om nån visste vad det kan handla om. Det är bara själv huvudet som ska placeras. nu ligger den över åt vänster :-(har suttit med detta rätt länge nu.
Du har gjort ett ganska klassiskt misstag - du har bara placerat alla boxar lite hursomhelst utan att lägga dem i sina egna kolumncontainrar. Då fackar det sig lätt - hade med detta problem i början. Ska plöja ignenom din kod lite snabbt och rätta till det.
Kanonschysst. Trodde aldrig nån skulle skulle komma på nån lösning. Att jag skulle få börja om från början. Hur menar du. Att dom är placerade i fel ordning?
Okej har rättat till det nu... ersätt koden för ALLA dina boxar med följande CSSkod - i htmlkoden ser du hur de infogas. Jag har kommentarer i båda koderna.
Det feler du också gjorde var att hålla på med en massa margin å absolut å grejer... läs på mer om CSS! :moose
Det är endast koden för boxarna som är bifogad
CSS-koden
/* CSS Document */
body {margin: 0; padding: 0;}
/*Allting laggs först i en "huvudcontainer"*/
#kroppcontainer{
width:auto;
height:auto;
}
/*Denna kolumn behover ingen container eftersom det bara är EN box.*/
#leftcol{
width:150px;
height: 750px;
overflow: auto;
background-color:#00b0ff;
float: left;
}
/*resterande delen av sidan ska ju alla vara till hoger om vansterkolumnen, därmed måste de alla tre placeras i en container. attributet float: left; laggs enbart på containern*/
#hogercontainer
{
float: left;
padding: 0;
margin: 0;
}
#top{
width:600px;
height:150px;
background-color:red;
}
#maincol{
width: 600px;
height: 500px;
overflow: auto;
background-color:blue;
}
#bottom{
width: 600px;
height: 100px;
overflow: auto;
background-color:yellow;
}
/* alla margin-attribut togs ocksa bort*/
Html-kod
<div id="container">
<div id="leftcol"></div>
<!-- har kommer "hogercontainern" -->
<div id="hogercontainer">
<div id="top"></div>
<div id="maincol"></div>
<div id="bottom"></div>
</div>
</div>
Hoppas det har hjälpt! Och lycka till in the learning.
Kanonschysst. Trodde aldrig nån skulle skulle komma på nån lösning. Att jag skulle få börja om från början. Hur menar du. Att dom är placerade i fel ordning?
Ja när jag började lära mig CSS i början gick det också åt åtskilliga timmar för att rätta till såna här små pissfel... Det var helt enkelt resultatet av att jag inte läst på ordentligt.
Man lär sig ju bäst av att titta på andras kod och försöka imitera den, så att säga (om man t ex går igenom webdesignskolans guide).
Titta på min kod och bygg upp den själv, då fastnar det.
Förstod du principen i det jag skrev förresten? om containers?
