CnC Foren - Div zentrieren.

CnC Foren (http://www.cncforen.de/index.php)

- Tech-Support / Tech-Talk (http://www.cncforen.de/forumdisplay.php?f=26)

- - Div zentrieren. (http://www.cncforen.de/showthread.php?t=72609)

Tobias.H

14-06-2007 23:06

Div zentrieren.

Ich möchte eine <div></div> immer im Zentrum des Browsers haben.

Wenn ich also das Fenster vergrößere, soll die <div></div> mehr nach rechts wandern.

So ähnlich wie auf www.esl-europe.de

Weiß einer wie das geht?

gersultan

15-06-2007 00:52

afaik:

<div style='text-align:center;'></div>

Sven	15-06-2007 09:18

Gersi, das sorgt nur dafür, daß der Inhalt mittig im div ausgerichtet wird.
So:

Code:

<div style='width:100%; text-align:center;'><div>Inhalt</div></div>

Alternativ, für zB Header gut zu gebrauchen:

Code:

<div style='position:absolute; left:50%; width: 300px; margin-left:-150px;'>Inhalt</div>

Erklärung: Der linke Margin ist negativ und entspricht der Hälfte der Breite des div.

Tobias.H

16-06-2007 01:12

Sehr schön!

Funktioniert perfekt. thx

Tobias.H

19-06-2007 21:23

Jetzt hab ich ein neues Problem.

Diese Lösung funktioniert im IE perfekt, doch in Firefox verschwindet die halbe Seite im linken Bildschirmrand. :(

Sven	19-06-2007 22:41

Quelltext, Adresse?

Tobias.H

19-06-2007 22:46

Code:

<div style= 'position:absolute; width:100%; text-align:center;'>

<div style="position: absolute; margin-left:-450px; width: 900px; height: 2000px; z-index: 1; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px" id="Main">Inhalt</div></div>

www.TeamCount.de

Sven	19-06-2007 22:53

Code:

<div style= 'position:absolute; width:100%; text-align:center;'>

<div style="position: absolute; width: 900px; margin-left:-450px; height: 2000px; z-index: 1; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px" id="Main">Inhalt</div></div>

?????

Tobias.H

19-06-2007 22:56

Das ist der Quelltext, wo ich vermute, dass da der Fehler ist, da sich dieser Teil auf die zentrierung im Browser bezieht.

Also irgendwie scheint der Firefox die Zeile

Code:

<div style= 'position:absolute; width:100%; text-align:center;'>

zu ignorieren.

Sven	19-06-2007 22:59

Du hast ihn nicht gelesen ;)
Ich hab den negativen Margin hinter die Breitenangabe gestellt, geht es so?

Das Board (TW Styles) und Commnews nutzen die gleichen Konstrukte und funktionieren in allen Browsern ;)
Schau es dir zur Not an...

Bnetze außerdem eine gültige DocType Deklaration um in allen Browsern eine gültige Darstellung zu erreichen - ohne schalten zumindest IE und Opera in den Quirks- statt den Standarmodus

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

...

</head>

<body>

...

</body>

...wobei du nicht gerade xhtml strict benutzen musst ;)

Tobias.H

19-06-2007 23:11

Ach sorry, hab deinen Beitrag daoben falsch verstanden gehabt. ^^

Den Margin hinter die Breitenangabe zu legen nützt auch nichts. :(

Sven	19-06-2007 23:17

http://validator.w3.org/check?uri=ht...eamcount.de%2F
Behebe das mal....
Als DocType setzt du html 4.01 transitional ein:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Tobias.H

19-06-2007 23:44

Ich verstehe die übrig gebliebenen Fehler nicht.

Zitat:

Line 37 column 0: start tag was here.
<div style= "position:absolute; width:100%; text-align:center;">

Zitat:

Line 193 column 6: end tag for "DIV" omitted, but its declaration does not permit this.
</body>You forgot to close a tag, or
you used something inside this tag that was not allowed, and the validator is complaining that the tag should be closed before such content can be allowed.
The next message, "start tag was here" points to the particular instance of the tag in question); the positional indicator points to where the validator expected you to close the tag.

Zitat:

Line 180 column 146: an attribute value must be a literal unless it contains only name characters.
... auswählt.</font><hr size = 4 color = #FFFF00>

Zitat:

Line 183 column 22: an attribute value must be a literal unless it contains only name characters.
<hr size = 10 color = #FFFF00>

Sven	19-06-2007 23:54

37 und 193: Entweder ist eines der <div> nicht abgeschlossen (nutze Zeileneinrückung!) oder du hast Code verwendet der in <div> nicht erlaubt ist. Ich vermute Ersteres da das den eigentlichen Darstellungsfehler erklären würde.
180/183: <hr size="4" color="ffff00"> (Anführungszeichen (solltest du immer benutzen) und Kleinschreibung).
Eigentlich musst du Tags ohne Abschluss trotzdem abschließen (zumindest in XHTML, aber das nutzt du ja nicht :p), wirklich richtig wäre also (ohne CSS):
<hr size="4" color="ffff00" />

Narodnaja

20-06-2007 00:08

Dead Centre - das klappt jedenfalls.

Sven	20-06-2007 00:17

Äh, das ist die gleiche Methode? :p

Tobias.H

20-06-2007 00:22

So, jetzt habe ich nur noch einen einzigen Fehler, wo ich nicht weiß wie man ihn behebt.

Zitat:

Error Line 43 column 23: there is no attribute "COLOR".
<hr size = "4" color = "#FFFF00"></div>You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Angezeigt wird die Seite bei Firefox immernoch nicht korrekt.
Wo macht Firefox denn unterschiede?
Muss ja irgend ein Grund geben, dass es bei IE perfekt funktioniert und bei Firefox nicht.

Sven	20-06-2007 00:32

ffff00

Tobias.H

20-06-2007 00:45

Das kann irgendwie nicht der Fehler gewesen sein.

Hab das jetzt so geändert, aber die Seite sagt immernoch, dass da was falsch ist.

-admi-

20-06-2007 01:14

Das ganze Dokument leidet unter extremer Divitis. Div-Container wirklich nur für Hauptcontainer nutzen und nicht für jeden Käse.
Dann die ganzen HTML-Mängel beseitigen und alles was CSS ist auslagern. Stichwort Trennung von Markup und Layout. Da sieht ja keiner mehr durch im Quelltext. Von "position: absolute" würde ich auch abraten. Über relativ, margin und padding kann man locker Seiten aufbauen.

Mehr dazu siehe css4you, csszengarden oder thestyleworks (jeweils über Google findbar).

Für Browserinkompatibilitäten seitens IE gibt es sog. conditional comments. Die Fehler macht nämlich eigentlich zu 98% nur der IE. Problematisch wirds, wenn Hobbyentwickler dann ausschließlich auf dem verbuggten und veralteten IE austesten, was dann letztendlich so endet wie hier.

Tobias.H

20-06-2007 22:31

So, ich hab es jetzt hingekriegt.

Danke für die Hilfe.

Sieht zwar in beiden Browsern immernoch nicht identisch aus, aber es ist immerhin fehlerfrei.

Sven	20-06-2007 22:39

Zitat:

Zitat von -admi- (Beitrag 1457006)

Von "position: absolute" würde ich auch abraten. Über relativ, margin und padding kann man locker Seiten aufbauen.

Aber leider nicht so nett wie mit der Positionierung, welche man anwendet ist ja abhängig von dem was man erreichen will ;)
http://de.selfhtml.org/css/eigenscha...tionierung.htm
http://de.selfhtml.org/css/eigenscha...e/position.htm

-admi-

20-06-2007 23:11

Das hier sagt vieles ^^
<meta name="generator" content="Microsoft Frontpage">

Die Aufteilung dieser Seite könnte man mit etwa 5-6 div-containern aufbauen. Diese mittels margin, padding und float aufbauen (position ist subsidiär natürlich auch möglich) und das Dokument ist schonmal 1/10 so groß wie jetzt und auch wesentlich leichter wartbar (bzw. sehen auch andere noch durch ^^). Die CSS-Notationen gehören einfach raus aus dem Markup in eine seperate Datei. Bei mehr als einer Seite wirst du später arge Probleme bekommen, wenn du mal das Layout ändern möchtest.

Alle Zeitangaben in WEZ +2. Es ist jetzt 01:02 Uhr.