Placering av top?

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.

CSS-koden nedan:

#page{
width:750px;
height:750px;

}

#top{
width:600px;
height:150px;
background-color:#00b0ff;
position: absolute;
margin-left: 0px;

}

#leftcol{
width:150px;
height: 750px;
overflow: auto;
background-color:#00b0ff;
float: left;
}

#maincol{
width: 600px;
height: 500px;
overflow: auto;
background-color:#00ff80;
float: left;
margin-left: 150px;
margin-top: -600px;
}

#bottom{
width: 600px;
height: 100px;
overflow: auto;
background-color:#00b0ff;
float: left;
margin-left: 150px;
margin-top: -100px;

}

.bild {position: relative; margin-top: 50px; z-index: 1;}

.topmenu {position: relative; margin-top: -55px; font-family: arial; font-size: 12pt;
font-style: italic; font-weight: bold; z-index: 2;}

.topmenu a:link {color:#D5F793; text-decoration: none;}

.topmenu a:hover {color:#000000; text-decoration: underline;}

.topmenu a:visited {color:#E0E0E0; text-decoration: none;}

img {border: none;}

.kant {margin-top: 350px; float: left;}

ul.zzul {list-style-type:none; display: block;}

Var kan felet ligga. Kan det ha med float att göra?

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.

:birp

rikard81 skrev:

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?

Kanon. Ska studera detta nu . tack

gutt. och så får du inte glömma att markera tråden som löst, om det nu löste sig för dig;)

Absolut. Men vad kan man göra om man endast vill placera toppen det lilla som är kvar och ha kvar #page? Finns det nått snabbt sätt.

#page är fortfarande kvar jag bara bytte namn till #kroppcontainer... ser nu att jag inte definierat den boxen i HTML-koden.

Det första div-elementet i htmlkoden ska alltså heta "kroppcontainer" och inte "container"

Men du får omformulera din fråga för jag kopplar inte riktigt.

:) Tack for ditt engagemang. Ska studera koden o kolla