XHTMLforum - Seite mittig zentrieren

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Seite mittig zentrieren (http://xhtmlforum.de/showthread.php?t=64727)

Seite mittig zentrieren

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!

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?

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

Zitat:

Zitat von FabriceAbc (Beitrag 494793)

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. ;)

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!

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.

Zitat:

Zitat von Praktikant (Beitrag 494865)

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

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.

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

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.

Ich hab den Service im HTML jetzt aus dem Content container rausgenommen und im Css dann auch geändert und siehe da, jetzt klemmt mir das Teil fest unter dem Menü und reagiert auf top und left nicht.

Ps. Hast Du MSN oder dergleichen? Wäre weniger umständlich ;)

HAHA bin ich ein Dummkopf! Die Lösung lag vor der Nase und ich glaube Du hast sie erwähnt. Habe vergessen dem Content von der Höhe abzuziehen :)

Ich danke dir vielmals für deinen Support!!

Kannst Du mir vielleicht noch schnell den Code sagen damit ich das Menü vertikal zentrieren kann? Ich habs mit vertical-align:center; und vertical-align:middle; probiert, hat aber nicht geklappt ;)

Edit: Lösung gefunden und weitere Frage

Die Menüpunkte sind doch alle zentriert?

Oder willst du die Liste als ganzen zentrieren, die Punkte der Liste aber weiterhin linksbündig machen?
Letzteres geht entweder mit padding oder margin für ul, dann musst du aber mit jeder Änderung eventuell neu ausrichten. FAQ 13 könnte dir dabei aber auch eine Hilfe sein :)

btw. Dein Service-Balken hat nicht mehr die volle Breite.

Ehm ich habe mir das eigentlich so gedacht, dass ich das Menü, den Text im Service und den Text im Newsticker horrinzontal wie auch vertikal zentriert habe, so dass der halt nicht am oberen Rand klebt.

(Projectsite: Startseite)

Guck bitte mal die Menüpunkte an.
Die sollten eben nicht am oberen Rand kleben sondern vertikal in der mitte sein, weisst Du wie ich meine?

Das geht, aber ich weiß nicht wie, da ich das noch nie gemacht habe. das Problem hierbei ist, dass bei sehr hohen Seiten eventuell die Navi aus dem Viewport rückt. Ich würde den Links einfach etwas mehr Platz lassen und ihr ein kleines Stück Abstand nach oben geben. Das ist wahrscheinlich das einfachste und am wenigsten problembelastete Verfahren :)

Hey ehm mit welchem befehl mache ich das? und muss ich da in eine tiefe ebene?

Zitat:

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;

das käme ja wohl auf die höhere ebene, sprich div#menu ul..
kannst du mir vielleicht den befehl dafür sagen weil top oder so ist es ja da nicht.. :)

Du musst auf jeden Fall die Liste in #menu ausrichten. Aber wie ich schon sagte: Ich habe das noch nie gemacht und weiß ich auch nicht wie es geht ;)

Hi,

habe deine Nachricht die per PN kam gelesen, bitte keine PN's mehr.
Wenn du Probleme hast, dann poste das doch bitte im entsprechenden Bereich.

Damit dir auch andere Leute helfen können, wäre es besser du postest einen Link zum Problem der für alle erreichbar ist. Keiner hat Lust sich erst eine Testdatei zu erstellen um zu erahnen was du da machst und wie das aussehen soll.

Zitat:

Ich kann nicht in den Service-Container reinschreiben bzw. ich kann ihn nichtmal definieren.

Keine Ahnung was du da machst oder machen möchtest?

Zum Menü, kein Plan was du da gerne möchtest, man kann die Seite ja nicht betrachten. Ausrichten eventuell mit margin, padding, line-height etc....

Hey Roland

Entschuldigung wegen der PM.

Ich konnte mittlerweile alle Probleme dank euch lösen!!

Ihr seit echt klasse!!
¨
Mfg Fabrice.K