Geld für Ihre Startseite!

urs73 · 04.07.2011, 14:41:25

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-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:


		
			
@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-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:


		
			
<!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>

Helo · 04.07.2011, 15:04:09

Zitat:

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.

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;

Gsus · 04.07.2011, 15:11:31

Hey,
ich hoffe das hilft dir weiter:

Code:


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
    
@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: http://www.css4you.de! Auch später als referenz sehr praktisch

mfg
Gsus

urs73 · 29.07.2011, 12:12:17

Danke, hat bestens funktioniert. Kann geclosed werden.

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[JS] Zentrieren	MaxFleit	Programmierung	3	19.01.2009 19:07:51
[CSS] DIV-Box zentrieren und height 100%	XadreS	Programmierung	2	21.03.2008 18:20:51
DIV-Container zentrieren und höhenabstand	ktimk	Programmierung	3	11.02.2008 16:11:05
[XHTML/CSS] horizontal & vertikal zentrieren	Benutzer-1170	Programmierung	13	24.03.2007 09:40:18
[CSS] Tabellenzelleninhalt (Bild und nebenstehender Text) vertikal zentrieren	theHacker	Programmierung	11	04.08.2006 23:29:42

29.07.2011, 12:12:17	#4 (permalink)
urs73 Erfahrener Benutzer ID: 400468 Lose-Remote Reg: 02.07.2010 Beiträge: 1.006	Danke, hat bestens funktioniert. Kann geclosed werden.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)