zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seite mittig zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.05.2011, 23:53
TYPO3 Neuling
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2011
Beiträge: 8
FabriceAbc befindet sich auf einem aufstrebenden Ast
Frage 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>
<!--###DOCUMENT_BODY###begin-->
<div id="banner">
</div>
<div id="newsticker">
<p> +++Das ist meine Projektarbeit. Vielen Dank fürs Anschauen!+++ </p>
</div>
<div id="menu">
<!--###MENU###begin-->
<!--###MENU###end-->
</div>
<div id="content">
<!--###CONTENT###begin-->
<!--###CONTENT###begin-->
</div>
<div id="service">
<!--###SERVICE###begin-->
<p>
projectsite.dyndns.org
</p>
<!--###SERVICE###end-->
</div>
<!--###DOCUMENT_BODY###end-->
</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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.05.2011, 00:57
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 705
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

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?
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.05.2011, 02:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 530
K.Roland wird schon bald berühmt werden
Standard

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

Geändert von K.Roland (23.05.2011 um 03:30 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 23.05.2011, 08:33
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von FabriceAbc Beitrag anzeigen
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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 23.05.2011, 19:20
TYPO3 Neuling
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2011
Beiträge: 8
FabriceAbc befindet sich auf einem aufstrebenden Ast
Standard

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>
<!--###DOCUMENT_BODY###begin-->
<div id="container">
<div id="banner"></div>
<div id="newsticker"><p>newsticker...</p> </div>
<div id="menu">
<!--###MENU###begin-->
<!--###MENU###end-->
</div>
<div id="content">
<!--###CONTENT###begin-->
<div class="service">
<!--###SERVICE###begin-->
<p>projectsite.dyndns.org</p>
<!--###SERVICE###end-->
</div>
<!--###CONTENT###end-->
</div>
<div id="footer">footer... </div>
</div>
<!--###DOCUMENT_BODY###end-->
</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!

Geändert von FabriceAbc (23.05.2011 um 19:25 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 23.05.2011, 19:27
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 5.003
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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 <!--###CONTENT###begin--> und <!--###CONTENT###end--> stehen darf.

Genauer kann ich dir aber leider auch nicht helfen. Sorry.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 23.05.2011, 19:42
TYPO3 Neuling
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2011
Beiträge: 8
FabriceAbc befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
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 <!--###CONTENT###begin--> und <!--###CONTENT###end--> 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..
Mit Zitat antworten
  #8 (permalink)  
Alt 23.05.2011, 19:45
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 5.003
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!

Geändert von Praktikant (23.05.2011 um 19:50 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 23.05.2011, 19:48
TYPO3 Neuling
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2011
Beiträge: 8
FabriceAbc befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von FabriceAbc (23.05.2011 um 19:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.05.2011, 19:52
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 5.003
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
body, css, html, margin, script, template, text, xhtml

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:56 Uhr.