Problem: DIV-Container zentrieren und nebeneinander positionieren

R

Razer3k

Mitglied
Nabend Leute,
ich bin zur Zeit dabei eine Webseite zu erstellen, rein mit HTML und CSS undzwar mit DIV-Containern.

Da ich bisher nur HTML kann, lese ich mich zur Zeit in CSS ein und komme nun nicht mehr weiter :(


Der Entwurf sieht vor:

layout.png



Also folgende Container:

1.Header (rot)
2.Navigation (blau)
3.Content (grün)
4.Sidebar (pink)
5.Footer (grau)

und um alles zusammen zu halten habe ich noch einen Container um 1-5 gemacht.


Mein Problem ist nun das bei mir der Content (3) zwar mittig angezeigt wird die Sidebar (4) aber genau mittig drunter gesetzt wird statt, so wie der Entwurf es vorsieht, rechts daneben.

Was mache ich falsch und wie kann ich es so wie ich es will hinbekommen ?

Desweiteren würde ich gerne wissen ob es eine möglichkeit gibt das der Footer (5) immer, automatisch am Ende der Seite ist, ist soetwas mit HTML und CSS möglich ?

Hier mein HTML-Code:
Code: 
<html>
	<head >
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Seitenname</title>
	</head>
	<body id="background">
	<div id="page">
		<div id="header">
		</div>
		
		<div id="navigation">
		</div>
		
		<div id="content">
		</div>
		
		<div id="sidebar">
		</div>
		
		<div id="footer">
		<center><b>Copyright by XYZ 2010</b></center>
		</div>
	</div>
	</body>
</html>



und hier mein CSS-Code:

Code: 
#background
{
	margin: 0;
	padding: 0;
	background: #000000;
}

#page
{
	margin: 0.2em auto; 
	width: 900px;
	height: 1800px;
	background: #0b0d27;
}

#header
{
	margin: 0.2em auto; 
	width: 800px;
	height: 180px; /* evtl. 150 ? */
	background: #c2c2c2;

}

#navigation
{
	margin:auto;
	width: 800px;
	height: 25px;
	background: #ffffff;
}

#content
{
	margin: 0.2em auto;
	width: 500px;
	height: 1500px;
	background: #c2c2c2;
}

#sidebar
{
	margin:auto;
	width: 100px;
	height: 1500px;
	background: #FF3300;
}

#footer
{
	margin: 0.2em auto;
	width: 800px;
	height: 25px;
	background: #ffffff;
}


MfG Razer3k
 
Zuletzt bearbeitet:
Der link zu deinem Entwurf geht nicht.

Ich nehme aber mal an, dass du ein 900px breites Layout hast und alles außer der Sidebar links untereinander angeordnet sein soll, die Sidebar dementsprechend rechts davon.
Dafür müsstest du die Sidebar mit float:right; nach rechts fließen lassen, die restlichen Elemente mit float:left; nach links.

Als kleinen Tipp am Rande: Statt des Center-Tags soltest du #footer mit text-align:center; steuern. Der B-Tag ließe sich durch einen Strong-Tag ersetzen oder du stylest #footer gleich noch mit font-weight:bold;. Nur um die Standards der '90 zu vermeiden. ;)
 
Könnte ein Mod endlich mal den peinlichen Tipfehler im Titel editieren ? Habs es schon selber getan aber es wird nicht übernommen :(

Danke für die Antwort.

Schaut nun so aus wie es "soll":

http://dl.dropbox.com/u/4802774/page/index.html

Jedoch befindet sich der Footer nunr direkt unter der Navigation und hinter dem Content und Sidebar Container, jedoch soll dieser IMMER am Seiten Ende sein ! :eek:

Der Code:

HTML:
Code: 
<html>
    <head >
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Seitenname</title>
    </head>
    <body id="background">
    <div id="page">
        <div id="header">
        </div>
        
        <div id="navigation">
        </div>
        
        <div id="content">
        </div>
        
        <div id="sidebar">
        </div>
        
        <div id="footer">
        Copyright by XYZ 2010
        </div>
    </div>
    </body>
</html>



CSS:
Code: 
#background
{
    margin: 0;
    padding: 0;
    background: #0b0d27;
}

#page
{
    margin: 0.2em auto; 
    width: 1000px;
    height: 1800px;
    background: #000000;
}

#header
{
    margin: 0.2em auto; 
    width: 1000px;
    height: 180px;
    background: #c2c2c2;

}

#navigation
{
    margin:auto;
    width: 1000px;
    height: 40px;
    background: #ffffff;
}

#content
{    
    position: relative;
    float: left;
    margin: 0.2em auto;
    width: 766px;
    height: 1300px;
    background: #c2c2c2;
}

#sidebar
{
    position: relative;
    float: right;
    margin-top: 0.2em;
    width: 230px;
    height: 1500px;
    background: #FF3300;
}


#footer
{    
    position: absolute;
    bottom: 0;
    font-weight: bold;
    text-align: center;
    margin: 0.2em auto;
    width: 1000px;
    height: 25px;
    background: #edd21f;
}
 
Zuletzt bearbeitet:
Hallo Razer3k,

versuche es einmal so:

CSS: 
#footer {
 clear:both;
}
Das sollte bewirken, dass #footer unter #content und #sidebar angezeigt wird. :)

-arneeeee

Edit: Natürlich die floats bei #content und #sidebar beibehalten.
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück