HTML/CSS div zentrieren

F

flxwa33

abgemeldet
2 Juli 2010
1.052
63
Ich bin gerade am Erlernen von CSS, scheitere aber einigen Dingen:

1. Ich möchte, dass der weiße Bereich in der Mitte der Seite erscheint.
2. Ich möchte, dass der weiße Bereich komplett von oben nach unten geht, also den grauen Balken über dem weißen Bereich weg. Zudem soll der Scrollbalken an der Seite möglichst verschwinden.
3. Der Schriftzug "Boxen" sowie "Impressum" soll mittig innerhalb des weißen Bereiches erscheinen.

Vielen Dank ;)


CSS:

PHP: 
@charset "utf-8";
/* CSS Document */

body {
		background-color: #eaeaea;
		font-family: sans-serif;
		font-size: 0.9em;
		
}

#main {
        width: 800px;
        height: 100%;
        background-color: #ffffff;
        position: absolute;
        margin: auto;
} 

#header {
        float: left;
        width: 800px;
        background-color: #ffffff;
}
        
#content {
        width: 800px;
        height: 100%;
        background-color: #ffffff;
        margin: auto;
}
        
#footer {
        background:#ffffff;
        padding:10px;
        margin: auto;
}

HTML:

PHP: 
<!DOCTYPE HTML>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

</head>

<body>
<div id="main">
<div id="header">
<h3>Test</h3>
</div>

	<div id="content">
	Boxen
	</div>

<div id="footer"> 
<a href="impressum.html">Impressum</a>
</div>

</div>
</body>
 

Anhänge

  • screen.jpg
    screen.jpg
    98,1 KB · Aufrufe: 17
1. Ich möchte, dass der weiße Bereich in der Mitte der Seite erscheint.
2. Ich möchte, dass der weiße Bereich komplett von oben nach unten geht, also den grauen Balken über dem weißen Bereich weg. Zudem soll der Scrollbalken an der Seite möglichst verschwinden.
3. Der Schriftzug "Boxen" sowie "Impressum" soll mittig innerhalb des weißen Bereiches erscheinen.
Zum Vergrößern anklicken....

zu 1) Um generell Div's mittig darzustellen, gibt es zwei (mir bekannte) Möglichkeiten:
1) position: relative; margin: 0px auto;
2) position: absolute; width: 500px; margin-left: -250px; left: 50%;​

zu 2) Gib dem body mal margin: 0px; und padding: 0px;, dann sollte der Rahmen weg sein.

zu 3) text-align: center;
 
Hey,
ich hoffe das hilft dir weiter:

Code: 
@charset "utf-8";
/* CSS Document */

body {
        background-color: #eaeaea;
        font-family: sans-serif;
        font-size: 0.9em;
    padding: 0px;
    margin: 0px;
        
}

#main {
        width: 800px;
        height: 100%;
        background-color: #ffffff;
    padding: 0px;
        margin: 0px auto;
} 

#header {
        float: left;
        width: 800px;
        background-color: #ffffff;
}
        
#content {
        width: 800px;
        background-color: #ffffff;
    text-align: center;
}
        
#footer {
    width: 780px;
        background:#ffffff;
        padding:10px;
    position: absolute;
    bottom: 0px;
        text-align: center;
}

eine sehr schöne seite zum CSS lernen ist zum Beispiel: https://www.css4you.de! Auch später als referenz sehr praktisch ;)

mfg
Gsus
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben