<div> Werte neutralisieren

Status
Nicht offen für weitere Antworten.
Sebigf

Sebigf

Erfahrenes Mitglied
Hallo zusammen !

Ich habe soweit mein Projekt komplett in <div> Ebenen umgebaut.
Hat sicher seine bekannten Vorteile: weniger Quellcode, einfachere Anpassungen durch CSS

Soweit so gut. Das ganze macht wirklich Sinn, nach einiger Zeit der Anpassung.

Nur habe ich in den letzten Stunden immer häufiger das Problem mit dem positionieren einiger <div> Ebenen. Überwiegend im Opera, wird alles zentriert angezeigt.

Ich denke das Problem ist bekannt, nur ich habe bisher keinen richtigen Weg gefunden, diese Ebenen "linksbündig" zu positionieren.

Hier mal das ganze, in der Struktur.

Container (BOX um "alle" Objekte)

HTML: 
<div align="center">betroffene BOX</div>

betroffene BOX (Probleme mit Position)

HTML: 
<div class="content"></div>

CSS der betroffnenen BOX
HTML: 
.content 
{
border: none;
border-top:solid 1px #B7B7B7;
padding-left:7px;
padding-right:7px;
padding-top:5px;
color:#000000; 
margin-left:160px; 
margin-right:160px; 
background-color:#F7F7F7;
text-align: left; 
float:none;
}

Alle <div>'s, die sich in diesem "content" DIV befinden, werden (soweit bisher getestet) im Opera zentriert angezeigt.

Ich gehe davon aus, dass es an dem align="left" liegt, was um die content-div liegt. Aber wie kann ich für den einen Teil alle Werte wieder neutralisieren, dass keine Vererbung stattfindet ?!

Ich weis, ist alles etwas kompliziert, aber ich komme absolut nicht weiter.... :(

Danke

EDIT

Hatte zuerst die <div> Inhalte verwechselt... :)
 
Zuletzt bearbeitet:
Alternativ zum HTML-Attribut align="center" könnte das Parent-DIV mit der CSS-Eigenschaft margin:0 auto horizontal zentriert werden.
 
Gut zu wissen :)

Nur brauche ich eine Lösung, dass das ganze "nicht" zentriert ist.
Ich möchte den Inhalt gerne linksbündig haben :)
 
Hehe, hab mir schon gedacht, dass dich das irritiert...

HTML: 
<div align="center"> // Hauptbox soll zentriert werden
<div class="content">inhalt</div> // Box, in der der Inhalt wieder "Linksbündig" sein soll.
</div>

Das Problem liegt einfach darin, dass ich im 2. <div> "nicht mehr" center benötige sondern "left" brauche. :)
 
Dann entferne mal die beiden margin-Angaben ;)

Code: 
.content 
{
border: none;
border-top:solid 1px #B7B7B7;
padding-left:7px;
padding-right:7px;
padding-top:5px;
color:#000000; 
margin-left:160px; 
margin-right:160px; 
background-color:#F7F7F7;
text-align: left; 
float:none;
}
 
GRML, wieder mein Fehler... *nicht schlagen* ^^

Es gibt insgesamt 3 <div> - Ebenen.

Links = Navigation
Mitte = Content (siehe div)
Rechts = Platzhalter usw

Margin-left / right ist eben für die Abstände beim float:

Gibt es nicht einen Befehl, mit dem alle werte "bereinigt" werden können ? Also dass man sagt "clear" und ab jetzt wird nichts mehr vererbt ö.ä....
 
In diesem Fall wirst du für jedes der eingebetteten DIVs text-align:left bestimmen müssen.


[editpost] Eine globale Formatierung ist auch möglich -> erfolgreich im Opera 8.50 getestet :-)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div { text-align:left; }

div.leftCol
{
float: left;
width: 146px;
border-top:solid 1px #B7B7B7;
padding-left:7px;
padding-right:7px;
padding-top:5px;
color:#000000;
background-color:#e1e1e1;
/*text-align: left;*/
}

div.content
{
border: none;
border-top:solid 1px #B7B7B7;
padding-left:7px;
padding-right:7px;
padding-top:5px;
color:#000000;
margin-left:160px;
margin-right:160px;
background-color:#F7F7F7;
/*text-align: left;*/
float:none;
}

div.rightCol
{
float: right;
width: 146px;
border-top:solid 1px #B7B7B7;
padding-left:7px;
padding-right:7px;
padding-top:5px;
color:#000000;
background-color:#e1e1e1;
/*text-align: left;*/
}

div.clear
{
clear:left;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}
-->
</style>

</head>
<body>

<div align="center">

     <div class="leftCol">leftCol</div>
     <div class="rightCol">rightCol</div>
     <div class="content">content</div>

     <div class="clear">&nbsp;</div>

</div>

</body>
</html>
Anmerkung: das HTML-Attribut align="center" zentriert nicht das DIV im Browserfenster, sondern seinen Inhalt.

Wenn die Hauptbox keine feste Breitenangabe besitzt, wird sie automatisch in der Seiten- / Browserfenstermitte ausgerichtet.

Bei einer festen Breitenangabe wird das Element beispielsweise mit margin:0 auto horizontal zentriert.
 
Sebigf hat gesagt.:
GRML, wieder mein Fehler... *nicht schlagen* ^^

Es gibt insgesamt 3 <div> - Ebenen.

Links = Navigation
Mitte = Content (siehe div)
Rechts = Platzhalter usw

Margin-left / right ist eben für die Abstände beim float:

Gibt es nicht einen Befehl, mit dem alle werte "bereinigt" werden können ? Also dass man sagt "clear" und ab jetzt wird nichts mehr vererbt ö.ä....
Zum Vergrößern anklicken....

Verstehe ich dich richtig, dass du ein dreispaltiges Layout realisieren möchtest, das im Browser zentriert angezeigt wird?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück