Hjälp med att positionera mina divar (CSS)

2012-03-10 21:40

Permalänk

DOC.

Medlem

Plats: Stockholm
Registrerad: Dec 2010

●

Hjälp med att positionera mina divar (CSS)

Hej, jag behöver lite hjälp med att positionera mina divar, så här hade jag tänkt att min "mainlayout" skulle se ut:

Problemet är bara det att jag kan inte få det att fungera. Min "meny" och min "body" bara bråkar med varandra. Vad borde jag använda mig av för att få dem att se ut som på bilden ovan? Har försökt med Float:left, Display:block, Display:Inline-block i diverse konfigurationer men inget verkar hjälpa. Till råga på allt så verkar "meny/body" positionera sig efter innehållet i min "header", ska det ens kunna göra det?

Om någon kan svara på frågan vore jag tacksam.

PS, man måste väl kunna lösa detta utan att tvinga dit divarna genom att sätta fasta positioner eller liknande?

Rapportera Redigera

Citera flera Citera

2012-03-10 21:54

Permalänk

smuurgas

Medlem

Registrerad: Sep 2006

●

Har du provat clear:both?

Rapportera Redigera

Citera flera Citera

2012-03-10 22:02

Permalänk

MikeyDN

Medlem

Registrerad: Jul 2011

●

Ska sidan vara centrerad?

Det du letar efter är position. Om sidan ska vara centrerad så kan du göra såhär:

</div>

div#wrapper
{
width: 960px; <-------- så bred du vill att sidan ska vara
position: relative;
margin: 0 auto;
}

div#header
{
position: absolute;
top: 20px; <----- sätter pos i höjd
left/right <------ sätter pos från vänster/höger, använd en av de
width
height
}

så sätter du meny, body och footer till absolute också osv osv...

Senast redigerat 2012-03-10 22:08

Rapportera Redigera

Citera flera Citera

2012-03-10 22:05

Permalänk

DOC.

Medlem

Plats: Stockholm
Registrerad: Dec 2010

●

Skrivet av smuurgas:

Har du provat clear:both?

Gå till inlägget

Clear:both på vilken av divarna, eller menar du på alla? Försökt använda det på min "header" men det verkade inte göra något.

Rapportera Redigera

Citera flera Citera

2012-03-10 22:09

Permalänk

DOC.

Medlem

Plats: Stockholm
Registrerad: Dec 2010

●

Skrivet av MikeyDN:

Ska sidan vara centrerad?

Det du letar efter är position. Om sidan ska vara centrerad så kan du göra såhär:

</div>

div#wrapper
{
width: 960px; <-------- så bred du vill att sidan ska vara
position: relative;
margin: 0 auto;
}

div#header
{
position: absolute;
top <----- sätter pos i höjd
left/right <------ sätter pos från vänster/höger, använd en av de
width
height
}

så sätter du meny, body och footer till absolute också osv osv...

Gå till inlägget

Sida är inte tänkt att vara Centrerad. Ska testa det du föreslog, dock tycker jag det känns något komplicerat för det jag vill göra, men vad vet jag

Rapportera Redigera

Citera flera Citera

2012-03-10 22:11

Permalänk

Blargmode

Entusiast

Registrerad: Sep 2011

●

Jag slängde ihop något för jag orkar inte förklara

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#wrapper{
	width:900px;
	margin:10 auto;
	background-color:#CC9900;
}
#header{
	width:100%;
	heigh:100px;
	background-color:#006;
}
#menu{
	width:20%;
	background-color:#009933;
	float:left;
}
#content{
	width:80%;
	background-color:#96C;
	float:left;
}
#footer{
	width:100%;
	height:20px;
	background-color:#CCCCCC;
	clear:both;
}
</style>
</head>

<body>
<div id="wrapper">
	<div id="header"><h1>Header</h1></div>
	<div id="menu"><p>Meny</p></div>
	<div id="content"><h2>Content</h2><p>Content</p></div>
	<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>

Dold text

Jag tror den gör vad du vill så enkelt som möjligt, fråga om det är något av det du inte förstår

Edit: Och du behöver verkligen inte klydda med position absolute

Senast redigerat 2012-03-10 22:21

Visa signatur

Mörkt tema till sweclockers | Taklampa med socket 1155

Rapportera Redigera

Citera flera Citera

2012-03-10 22:19

Permalänk

MikeyDN

Medlem