Seite mittig zentrieren

FabriceAbc · #1 (**permalink**) 22.05.2011, 22:53

Hallo liebe xhtml Freunde

Vorab möchte ich erläutern, dass ich ein absoluter Neuling im Bereicht html und css bin.
Also dann komme ich mal zu meinem Problem.
Ich schreibe für eine Arbeit in der Schule eine Webite.
Ich arbeite in TYPO3 und habe vor 4 Wochen als absoluter Neuling begonnen.
Ich habe nun eine einigermassen gute (für meine Anspröche) Website.
Ich scheitere jedoch daran diese korrekt zu zentrieren, unabhängig des Browsers und der Auflösung von den andern. Ich schicke euch nun mein html template script und mein css script. Bei mir funktionieren sie ziemlich gut, nur zentriert es nicht 100%ig genau und bei den andern stimmt es absolut nicht(abgeschnitten etc..) Ich bitte euch helft mir ich bin absolut am verzweifeln und muss Ende nächste Woche fertig sein. Ihr seit meine letzte Rettung

HTML template:

Zitat:

<html>
<head>
<title>Template fur Projectsite</title>
</head>
<body>

<div id="banner">
</div>
<div id="newsticker">
<p> +++Das ist meine Projektarbeit. Vielen Dank fürs Anschauen!+++ </p>
</div>
<div id="menu">


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


</div>
<div id="service">

<p>
projectsite.dyndns.org
</p>

</div>

</body>
</html>

Css script:

Zitat:

body {
font-family:verdana, sans-serif;
text-align:center;
padding: 0;
margin-left: 20px;
position:absolute;
width:1150px;
left:50%;
margin-left:-600px;
background-image: url(../img/Background.jpg);
background-repeat: repeat-x;
background-color:#9b7079;
}
div#banner {
position:absolute;
width:1150px;
height:250px;
background-image: url(../img/header.jpg);
}
div#menu {
position:absolute;
top:300px;
width:300px;
height:600px;
background-image: url(../img/menu.jpg);
}
div#newsticker {
position:absolute;
top:250px;
width:1150px;
height:50px;
background-image: url(../img/newsticker4.jpg);
}
div#content {
position:absolute;
top:300px;
height:600px;
left:300px;
width:850px;
background-image: url(../img/content.jpg);
}
div#service {
position:absolute;
top:850px;
left:300px;
width:850px;
height:50px;
background-color:#fff;
}
div#menu ul {
list-style-type:none;
line-height:150%;
}
div#menu ul li a {
font-size:16px;
color:#fff;
text-decoration:none;
}
div#content ul {
list-style-type:none;
line-height:150%
}
div#content ul li a {
color:#000000;
text-decoration:none;
}
div#content p, h1 {
padding-left:10px;
}
div#newsticker {
color:#fff;
text-align:center;
}
div#service {
text-align:center;
}
div#service p {
letter-spacing:5px;
}

so das wars..
Ich habe shcon versucht den ganzen Kram (=Body inhalt) in einen Container zu packen und diesen zu zentrieren, jedoch hat es mir dann die einzelnen Container in der Ansicht auseinandergeschoben und sie waren nicht mehr fixiert (???).
Wenn Ihr eine Lösung finden solltet nur raus damit oder am besten gleich in meinen Code einbauen und den ganzen gleich posten.
Ihr könnt mir auch mailen falls es Euch lieber ist unter: fabrice.koenig@hotmail.com

Ich danke euch für jede Hilfe!

emti · #2 (**permalink**) 22.05.2011, 23:57

Habe jetzt nicht die Muße mir Deinen QT genau anzusehen, ein Link wäre besser. Jedoch fällt mir ganz schön viel position: absolute auf. Liegt das an Typo3? Schrecklich.

Was ist mit "margin: 0 auto" für body?

K.Roland · #3 (**permalink**) 23.05.2011, 01:56

hi,
etwas Starthilfe.

Code:

* { margin: 0; padding: 0; } 
}
html { 
     height: 101%;
}
body {
     font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
     text-align: center; /* fuer IE 5 */ 
}
#container { 
     border: 1px solid #555;
     margin: 0 auto;
     text-align: left;
     width: 1150px;    
}
#banner { 
     background-color: #ffc462; 
     color: #000;    
}
#newsticker { 
     background-color: #f0e68c; 
     color: #000;    
} 
#menu {
     background-color: #ffd5ee;
     color: #000;
     width: 300px;
     float: left;
}
#content {
     background-color: #d5eeff;
     color: #000;
     margin-left: 300px;
}
#content .service {
     background-color: #fff;
     color: #000;
}
#footer { 
     background-color: #beb8e0; 
     clear: both; 
     color: #000;  
}

HTML-Code:

</head>
<body>

<div id="container">

 <div id="banner">banner... </div>
 <div id="newsticker">newsticker... </div>
 <div id="menu">menu... </div>
 <div id="content">content...
 <div class="service">service... </div>
 </div>
 <div id="footer">footer... </div>
 
</div>

</body>
</html>

Gruß Roland

hubspe · #4 (**permalink**) 23.05.2011, 07:33

Zitat:

Zitat von FabriceAbc

Vorab möchte ich erläutern, dass ich ein absoluter Neuling im Bereicht html und css bin.
Ich arbeite in TYPO3 und habe vor 4 Wochen als absoluter Neuling begonnen.

Typo 3 ist für sehr große Sites geeignet, aber bestimmt nix für Anfänger.
Für die Basics gibt es Little Boxes.

FabriceAbc · #5 (**permalink**) 23.05.2011, 18:20

Vielen Dank euch allen!
Ich bin nun ein gutes Stück voran gekommen und die Seite wird nun korrekt zentriert! "Yippie!!"

Jetzt hab ich nur noch ein kleineres Problem

Meine Seite: Projectsite: Startseite
Ich zeige es euch am besten gleich wieder mit meinen Scripts:

HTML:

Zitat:

<html>
<head>
<title>Template fur Projectsite</title>
</head>
<body>

<div id="container">
<div id="banner"></div>
<div id="newsticker"><p>newsticker...</p> </div>
<div id="menu">


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

<div class="service">

<p>projectsite.dyndns.org</p>

</div>

</div>
<div id="footer">footer... </div>
</div>

</body>
</html>

ROT => Wird nicht angezeigt!!

CSS:

Zitat:

* { margin: 0; padding: 0; }
}
html {
height: 101%;
}
body {
font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center; /* fuer IE 5 */
background-image: url(../img/Background.jpg);
background-repeat: repeat-x;
background-color:#9b7079;

}
#container {
border: 1px solid #555;
margin: 0 auto;
text-align: left;
width: 1150px;
}
#banner {
width:1150px;
height:250px;
background-image: url(../img/header.jpg);

}
#newsticker {
top:250px;
width:1150px;
height:50px;
background-image: url(../img/newsticker4.jpg);
}
#menu {
top:300px;
width:300px;
height:600px;
background-image: url(../img/menu.jpg);
float: left;
}
#content {
top:300px;
height:600px;
left:300px;
width:850px;
background-image: url(../img/content.jpg);
margin-left: 300px;
}
#content .service {
top:850px;
left:300px;
width:850px;
height:50px;
background-color:#000000;
}
#footer {
background-color: #beb8e0;
width:1150px;
clear: both;
color: #000;
}

div#menu ul {
list-style-type:none;
line-height:150%;
text-align:center;
}
div#menu ul li a {
font-size:16px;
color:#fff;
text-decoration:none;
}
div#content ul {
list-style-type:none;
line-height:150%
}
div#content ul li a {
color:#000000;
text-decoration:none;
}

div#content p, h1 {
padding-left:10px;
}
#newsticker {
color:#fff;
text-align:center;
}
#content .service {
text-align:center;
}
#content .service p {
letter-spacing:5px;
color:#444444;
}
#footer {
text-align:center;
}

BLAU => Spielt echt keine Rolla was ich da mache, es ändert überhaupt nichts.

Seht ihr was ich meine? Der Text im Service container wird so weder definiert noch angezeigt und ich habe echt keine Ahnung wieso..
Bitte helft mir doch kurz auf die Sprünge

Gruss Fabrice.K

Ps. Einige haben mir geschrieben TYPO3 sei zu schwer als Neuling. Ja es mag sein aber ich kanns nicht ändern.. Ich mache das für eine Arbeit in der Schule und mein Thema ist es in 5 Wochen (die letze ist dran) via TYPO3 als Neuling eine sogut als mögliche Website zu erstellen.

Ich zähle auf euch!

Praktikant · #6 (**permalink**) 23.05.2011, 18:27

Ich kenne mich nicht besonders gut mit TYPO3 aus, aber das gesamte Element wird nicht gerendert. Es ist einfach nicht im HTML. Vielleicht liegt es an dem Schreibfehler im Kommentar, es kann aber aus sein, dass es nicht zwischen  und  stehen darf.

Genauer kann ich dir aber leider auch nicht helfen. Sorry.

FabriceAbc · #7 (**permalink**) 23.05.2011, 18:42

Zitat:

Zitat von Praktikant

Ich kenne mich nicht besonders gut mit TYPO3 aus, aber das gesamte Element wird nicht gerendert. Es ist einfach nicht im HTML. Vielleicht liegt es an dem Schreibfehler im Kommentar, es kann aber aus sein, dass es nicht zwischen  und  stehen darf.

Genauer kann ich dir aber leider auch nicht helfen. Sorry.

Brauchst Du nicht, denn genau das hat gefehlt!! DANKE!
Nur ist der Service Balken plötzlich leider mitten im Conent und dazu noch gefixxt, das heisst er reagiert nicht auf angaben wie top oder dergleichen..

Bitte schau doch meine Website kurz an dann siehst Du oder die andern es:
Projectsite: Startseite
Es könnte etwas länger zum laden dauern die Seite läuft über XAMPP..

Praktikant · #8 (**permalink**) 23.05.2011, 18:45

Wohin soll der Balken denn?
Der Inhalt ist halt nicht höher...

Edit: Content gegen "der Inhalt" gestauscht.

Edith sagt: Wenn der Kasten auf den Balken "unter" Content soll, dann würde ich den im Layout auch dort anordnen. Das heißt, wenn .service unter #content und content bekommt 50px weniger Höhe. .service bekommt dann das Stück von den Hintergrundbild und es müsste eigentlich passen.

FabriceAbc · #9 (**permalink**) 23.05.2011, 18:48

Der Balken müsste halt da runter wo es jetzt lehr ist. Unter den Content über den Footer.
Das Problem ist, sobald ich den Service Container im HTML aus dem Content Container rausnehme kann ich ihn wieder nicht mehr definieren.. bzw. ich kann ihn nicht genau in die lehre Stelle schieben.

Edit: satz hinzugefügt

Praktikant · #10 (**permalink**) 23.05.2011, 18:52

Habe noch einmal was zu meinem Post hinzugefügt.

Das geht aber eigentlich genauso, wenn TYPO3 den Balken ausgibt. Du darfst nur im CSS nicht #content .service schreiben, sondern nur .service.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
seite will nicht mittig	k-f-r-123	CSS	18	28.12.2009 16:39
Seite wird auf anderem Computer falsch dargestellt	Patrick Egli	CSS	3	01.11.2009 10:40
Seite mittig zentriert	jenny79	CSS	8	16.08.2006 19:07
komplette Seite zentrieren	Tobbe	(X)HTML	2	14.08.2006 17:02