CSS-Template zentrieren

typo3src · 2006-05-02T14:26:25+00:00

Hallo mit welchen CSS-Befehl bekomme ich hin das meine Website mittig ausgerichtet ist? Hier mein HTML-Marker-Template hier kommt der content hin header_rootline header_menu hier kommt der content hin left

typo3src · 2. Mai 2006 16:57

OK

HIER DIE CSS:

p {
margin: 0;
}

#content {
position: absolute;
top: 150px;
left: 155px;
width: 445px;
height: 100%;
background: white;
font: normal 15px Verdana, Arial, Helvetica, sans-serif;
color: white;
}

#content_right {
position: absolute;
top: 150px;
left: 620px;
width: 180px;
height: 250px;
background: #F6F6F6;
}

#left {
position: absolute;
top: 150px;
width: 135px;
height: 250px;
background: #F6F6F6;
}

#head {
position: absolute;
width: 800px;
height: 100px;
background: #6E96C4;
}

#header_menu {
position: absolute;
top: 100px;
width: 800px;
height: 21px;
background: #81AEE5;
}

#header_rootline {
position: absolute;
top: 121px;
width: 800px;
height:19px;
background-image: url(rootline_head.gif);
background-repeat:repeat-x;
}

#document {
text-align:center
}

body, html {
border: 0;
margin: 0;
width: 100%;
height: 100%;
background: #white;
font: normal 100.01% Verdana, Arial, Helvetic, sans-serif;
color: white;
scrollbar-highlight-color: #orange;
}

H1 {
font-family : Verdana, sans-serif;
font-size : 16px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
H2 {
font-family : Verdana, sans-serif;
font-size : 15px;
color : white;
margin-bottom : 10px;
margin-top : 20px;
}
H3 {
font-family : Verdana, sans-serif;
font-size : 12px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
H4 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
.subhead1 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : black;
}
.subhead2 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : green;
}
.subhead3 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
}
.headerdate {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
font-weight: normal;
}

li {
text-decoration: none;
color: white;
}
li a {
color: white;
}
li a:hover {
color: red;
}

strong {
text-decoration: none;
color: white;
}

A {
color:white;
}

A:hover {
color:red;
}

A:active {
color:white;
}

tandem · 2. Mai 2006 17:10

Dazu solltest du das body Element zentrieren.
body {
width: 600px;
padding-left: 50%;
}
dann den ganzen Inhalt mit einen div-Element umgeben.
<div id="frame">
...
</div>

#frame {
/*Spaltenbreite festlegen */
width: 600px;
margin-left: -300px;
}

typo3src · 2. Mai 2006 17:18

ist komisch bei 50% legt er ihn mir teilweise außerhalb des bildschirmes und bei 10% ist es ca mittig.

body, html {
border: 0;
width: 600px;
padding-left: 50%;
background: white;
font: normal 100.01% Verdana, Arial, Helvetic, sans-serif;
color: white;
scrollbar-highlight-color: orange;
}

stimmt mein Template so wie du es gemeint hast?

<div id="frame">

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

hier kommt der content hin

</div>
<div id="header_rootline">

header_rootline

</div>
<div id="header_menu">

header_menu

</div>
<div id="head">

hier kommt der content hin

</div>
<div id="left">

left

</div>
<div id="content_right">

content_right

</div>

</div>

??? DANKE

tandem · 2. Mai 2006 17:23

Ja - sollte so gehen.
body {
width: 600px;
}

dann frame ...

dann nochmal:
body {
width: 600px;
padding-left: 50%;
}

miwolfram · 2. Mai 2006 19:03

Wie kompliziert wollt ihr das denn machen?

Wenns "nur" um eine mittige Ausrichtung horizontal geht:

Alles was du bisher an Inhalt/Divs hattest in ein Div mit der ID "document" legen.
Folgendes CSS für body und document:

body {
	margin: 0;
	padding: 0; 
	text-align: center; /*damits auch der IE versteht!*/
}

#document {
	width: 780px; /*was auch immer du möchtest*/
	margin: 0 auto 0 auto; /*das ist das wichtigste!!!*/
	background-color: blue; /*nur zum testen!*/
	text-align: left; /*um schrift wieder linksbündig auszurichten*/
}

Wichtig! Doctype richtig setzen!

GreaseGun · 3. Mai 2006 10:03

habe ich da jetzt was falsch verstanden?

du möchtest das äußere div* zentrieren?

gib ihm
margin-left: auto;
margin-right: auto;
width: wievielduwillst px;

beim internetxplorer kann man (fälschlicherweise) dem body-tag einfach ein text-align:center; geben.

aber vielleicht habe ich die frage falsch verstanden.

* ich gehe davon aus, dass #all das umschliessende div sein soll, im posting wird es aber gleich geschlossen und nicht erst am ende.

typo3src · 3. Mai 2006 10:33

Also mit dem Code von miwolfram hat es irgendwie auch nicht geklappt ich poste noch einmal mein CSS und HTML.

Ich möchte das die Site nachher auf der horizontalen zentriert erscheint. SIe ist auf 800px Länge vorgesehen

Könnt ihr mir noch einmal helfen?

Vielen Dank

CSS:
p {
margin: 0;
}

#content {
position: absolute;
top: 150px;
left: 155px;
width: 445px;
height: 100%;
background: white;
font: normal 15px Verdana, Arial, Helvetica, sans-serif;
color: white;
}

#content_right {
position: absolute;
top: 150px;
left: 620px;
width: 180px;
height: 250px;
background: #F6F6F6;
}

#left {
position: absolute;
top: 150px;
width: 135px;
height: 250px;
background: #F6F6F6;
}

#head {
position: absolute;
top: 0px;
width: 800px;
height: 100px;
background: #6E96C4;
}

#header_menu {
position: absolute;
top: 100px;
width: 800px;
height: 21px;
background: #81AEE5;
}

#header_rootline {
position: absolute;
top: 121px;
width: 800px;
height:19px;
background-image: url(rootline_head.gif);
background-repeat:repeat-x;
}

body {
margin: 0;
padding: 0;
text-align: center; /*damits auch der IE versteht!*/
}

#document {
width: 780px; /*was auch immer du möchtest*/
margin: 0 auto 0 auto; /*das ist das wichtigste!!!*/
background-color: blue; /*nur zum testen!*/
text-align: left; /*um schrift wieder linksbündig auszurichten*/
}

H1 {
font-family : Verdana, sans-serif;
font-size : 16px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
H2 {
font-family : Verdana, sans-serif;
font-size : 15px;
color : white;
margin-bottom : 10px;
margin-top : 20px;
}
H3 {
font-family : Verdana, sans-serif;
font-size : 12px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
H4 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
.subhead1 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : black;
}
.subhead2 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : green;
}
.subhead3 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
}
.headerdate {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
font-weight: normal;
}

li {
text-decoration: none;
color: white;
}
li a {
color: white;
}
li a:hover {
color: red;
}

strong {
text-decoration: none;
color: white;
}

A {
color:white;
}

A:hover {
color:red;
}

A:active {
color:white;
}

HTML:
<div id="frame">

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

hier kommt der content hin

</div>
<div id="header_rootline">

header_rootline

</div>
<div id="header_menu">

header_menu

</div>
<div id="head">

hier kommt der content hin

</div>
<div id="left">

left

</div>
<div id="content_right">

content_right

</div>

</div>

#angry# #angry#

GreaseGun · 3. Mai 2006 10:37

ich umschliesse den gesamten content meiner seite mit einem div:

<body>
<div id="frame">
hier kommt der gesamte content rein....
</div>
</body>

css:

#frame{
margin-left:auto;
margin-right:auto;
width:800px;
text-align:center;
}

in deinem html-template mußt du natürlich das div frame auch mitnehmen. wenn du erst ab document einbindest fehlt das natürlich und ist ziemlich sinnlos.

so geht und ging es bei mir immer.

typo3src · 3. Mai 2006 10:53

also habe es nun versucht. ist sicher immer noch falsch!? Weil es funktioniert immer noch nicht!

<body>
<div id="frame">

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

hier kommt der content hin

</div>
<div id="header_rootline">

header_rootline

</div>
<div id="header_menu">

header_menu

</div>
<div id="head">

hier kommt der content hin

</div>
<div id="left">

left

</div>
<div id="content_right">

content_right

</div>

</div>
</body>

GreaseGun · 3. Mai 2006 11:14

wird das div mit der id frame auch in die seite eingebunden?
wenn du workunsubpart document machst, fehlt das ja. checke das zuerst. wenn es im source der ergebnisseite steht und das css wie von mir angegeben ist, kannst du ja noch mal posten.

typo3src · 3. Mai 2006 11:29

also den DIV "Frame" brauch ich nicht für ein Textzeil oder Logo etc. , ich habe gedacht das der der Wrapper für die Zentrierung ist?

Die URl ist http://test.cgsolutions-online.de/

GreaseGun · 3. Mai 2006 11:57

okay. frame wird nicht eingebunden.
entweder nimmst du das frame div noch in das dokument, oder du verwendets das div id all

also

#all{
margin-left:auto;
margin-right:auto;
width:800px;
text-align:center;
}

dann mußt du aber das schließende tag von div id all auch ans ende stellen, also vor das hintere  (nach content right)

du könntest auch wahlweise alle unteren container zentrieren aber das ist kompletter schwachsinn. weil du so alles nur bei div all ändern mußt.

tandem · 3. Mai 2006 12:02

page {
...
stylesheet = fileadmin/deine-css.css
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/deine-vorlage.html
10.workOnSubpart = BODY_INHALT  - oder wie immer du den Subpart nennen willst
- 
10.marks.document = TEXT oder was immer du willst 
- dies ist dein MARKER ###dokument###
usw.

Einbinden in die Vorlage:

<body>

<div id="frame">
alles andere
</div>

</body>

typo3src · 3. Mai 2006 16:28

He Danke!

Habe die Anweisung von GreaseGun befolgt
Jetzt sieht es schon viel zentrierter aus ;-)

Allerdings stimmt noch was mit meinem content_right, content und navi nicht?

Könntet ihr mir da auch noch auf die Sprünge helfen unten ist die URL

http://test.cgsolutions-online.de/

Danke

GreaseGun · 3. Mai 2006 17:42

grundsätzlich: arbeitest du mit der firefox extension webdeveloper order so ähnlich? damit kannst du dir z.b. die container einblenden lassen. kann enorm helfen.

bin aber kein webdesigner und habe leider nicht das auge dafür, den 'fehler' sofort zu sehen ;-)

ich frage mich nur, warum deine elemente absolut positioniert sind. beim vergleich quelltext und resultat sehe ich, dass ein paar reihenfolgen verändert sind.

was für ein layout möchtest du denn haben?

mein standardlayout mache ich immer so:

frame zentriert die seite. header, top-navi und footer gehen auf die volle breite und die tabelle auf 100%.
habe zig foren und profis nach einer lösung ohne tabelle befragt, aber keine bekommen. denn die divs lassen sich auch mit float-layout nicht auf gleiche höhe bringen.
damit habe ich ein solides grundgerüst und die einzeilige tabelle tut niemandem weh.

typo3src · 4. Mai 2006 08:10

hmm. so könnte ich es natürlich auch versuchen...

Hast du mir noch das passende CSS für das HTMK-Template, das ich es bisschen versuchen kann und es auch verstehe wie es genau funktioniert?

Danke und Gruß

GreaseGun · 4. Mai 2006 09:04

da braucht man nicht viel css.
das css für id frame hast du ja schon eingesetzt. die tabelle bekommt 100% höhe und bekommt so den rest vom platz, der nicht von header+navi+footer verwendet wird.
dann kann man noch einstellen, wie die drei spalten innerhalb der tabelle ausgebreitet sind.
z.b. feste breite für left (menü) und right (z.b. newsbar), center (content) bekommt dann den rest vom platz.

kiss - keep it small & simple

btw - auf der domain, wo du dein beispiel verlinkt hast, wird auch webdesign angeboten ;-)

edit:

hier noch mal ein beispiel-css:

#frame{
margin-left:auto;
margin-right:auto;
width:800px;
text-align:center;
}
#header{
text-align:center;
}
#top-navi{
text-align:right;
}
#whatamess{
margin:0;
height:90%;
}
#left{
width:200px;
}
#right{
width:400px;
}
#footer{
text-align:center;
}
#tabelle td {
vertical-align:top; <-- damit bei left, center und right der inhalt oben anfängt
}