Text horizontal zentrieren

[Linky]

Hi,

ich versuche nun schon seit einigen Stunden raus zu finden, wieso der Text in einem div-Container nicht zentriert dargestellt wird.

Es handelt sich um den Text "Main-Content".

Hier sind HTML und CSS:

HTML:

Code: Alles auswählen

<div id="spacer"></div>

<div id="content_container">
   <div id="cont">
     <p>MAIN-CONTENT</p>
   </div>

   <div id="cont_add">
     <div id="vote">VOTING</div>
     <div id="download">DOWNLOAD</div>
   </div>
</div>


CSS:

Code: Alles auswählen

body {
   background-color:#000;
   text-align:center;
   height:1011px;
   margin-top:4px;
   margin-bottom:0px;
   font-family:Verdana, Geneva, sans-serif;
   font-style:normal;
   font-size:13px;
}
div#spacer {
   width:884px;
   height:320px;
}
div#content_container {
   border-style:solid;
   margin:0 auto;
   padding-left:10px;
   width:1240px;
   height:480px;
   text-align:center;
}
div#cont {
   border-style:solid;
   border-color:#E00;
   float:left;
   width:880px;
   height:480px;
   text-align:center;
   overflow:auto;
}
div#cont_add {
   border-style:solid;
   border-color:#519699;
   clear:left;
   float:right;
   margin-top:-440px;
   width:115px;
   height:425px;
}
div#vote {
   border-style:solid;
   border-color:#EEE;
   width:115px;
   height:165px;
}
div#download {
   border-style:solid;
   border-color:#F3F;
   margin-top:85px;
   width:115px;
   height:165px;
}


Hier könnt ihr die Seite online anschauen. Ich musste den Link etwas verunstalten, damit ich es posten kann, weil ich nicht berechtigt bin URLs zu linken.
l2-nocturne.de/website_Mai-2011/version2/

Die Seite ist jetzt quasi nur skizziert. Ich will damit einfach nur das wesentliche Problem darlegen.

Vielen Dank schon mal für eure Hilfe.

VG,
Linky

[Azra]

Der Text ist zentriert, und zwar im Container (div) "cont".
Das Problem ist, dass dieser Container nur die Breite des Inhaltes (Text) ausmacht. Wozu hast du diesen Container angelegt?

Entweder du löscht ihn und haust in der Klasse "scrollBar" ein text-align:center; rein, oder du vergibst der ID "cont" eine Breite (880px - 10px des margin = 870px).

[Linky]

Hallo,
danke für die Antwort. Ich habe "cont" eine Breite von 870px zugewiesen, aber es geht dennoch nicht.

Zum Aufbau:
a) Der Inhalt der Seite soll horizontal zentriert sein. Deswegen der "content_container".
b) Im zentrierten Bereich gibt es wiederrum 2 Bereiche nebeneinander. Das Hauptfenster, das scrolllabe ist und dem kleineren Bereich (ich nenne es mal den "Nebenbereich") rechts vom Hauptfenster.
c) Das Hauptfenster soll eine angepasste Scrollleiste haben. U. a. Deswegen musste ich "cont" anlegen.
d) Der Nebenbereich wiederrum trägt in sich 2 Divs untereinander.

Ich kann das Div "cont" also nicht rausnehmen, weil ich es für das Javascript benötige, damit die angepasste Scrollleiste funktioniert.

[Azra]

2. Frage von mir - warum legst du Klassen und IDs fürs CSS an wenn du dann alles mit Inline-Styles* in HTML überschreibst

Ich habe die Breite im CSS von "cont" übersehen, kann so drin bleiben. Sobald du im Inline-Style* width:auto; löscht wird der Container 880px breit und der Text zentriert sich.


*Inline-Style =

Code: Alles auswählen

<div style="attribut:wert;"></div>


[Linky]

Wahrscheinlich bin ich etwas übermüdet und sehe deswegen nicht, was du gesehen hast... Könntest du mir die Zeile, mit dem Inline-Style im HTML-Dokument, nennen??

[Azra]

Das:

Code: Alles auswählen

<div id="cont" style="overflow: hidden; border: 0px none; position: relative; margin: 0px 10px 0px 0px; top: 0px; left: 0px; width: auto; height: 467px;">
<p>MAIN-CONTENT</p>
</div>

Man sollte ganz allgemein "style" innerhalb von HTML Dokumenten vermeiden, betrifft aber die Suchmaschinenoptimierung. Für so Beispiele ist es natürlich OK, aber wie du siehst kommen so Fehler zustande.

[Linky]

Ah, ich sehe du hast es dir mit dem "Element untersuchen" von Chrome angeschaut. Jetzt sehe ich die Zeilen auch. Aber ich habe im Quelltext nichts derartiges geschrieben. Wieso kommt das zustande?

Mein Quelltext ist so, wie oben angegeben.
Wenn du dir den Quelltext anschaust, ist der Style-Kram nicht im html-Dokument zu sehen.

[Azra]

Ach... kopf -> tisch
Natürlich, das kommt von JavaScript - Das Script von Mootools vergibt diese Attribute beim Laden der Seite im Browser. Ich würde dir empfehlen folgendes Script auf jQuery basierend einzubinden - wie ich sehe kommst du damit klar:
http://manos.malihu.gr/jquery-custom-content-scroller

Man muss sich da etwas einarbeiten, falls es damit Probleme geben sollte sag Bescheid.
In Firefox gibt es übrigens das Addon "Firebug" zum untersuchen der gesamten Webseite und geladenen Inhalte.

[Linky]

Gegen deiner Annahme, bin ich damit doch nicht so ganz klar gekommen.
Aaalso habe ich es nochmal mit dem vorherigen Script probiert. Dieses Mal habe ich den cont-Style etwas verändert.

vorher:

Code: Alles auswählen

div#cont {
   border-style:solid;
   border-color:#E00;
   float:left;
   width:880px;
   height:480px;
   text-align:center;
   overflow:auto;
}

nachher:

Code: Alles auswählen

div#cont {
   width:880px;
   height:480px;
   overflow:auto;
}

Jetzt funktioniert es... Ich vermute, dass float:left der Übeltäter war...
float:left wird nicht benötigt. Das Element "cont" und sein Inhalt werden zentriert, durch die Vererbung des content_container's.
Die zwei Elemente "vote" und "download" werden durch float:right nach rechts geschoben und mit dem margin:-xxx px wird es zurecht gerückt.

Ich hoffe, ich habe das alles so richtig verstanden.

Bisher scheint es zumindest zu funktionieren. Ich danke dir für deine Hilfe! (: