# <div> Werte neutralisieren



## Sebigf (10. Februar 2006)

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)


```
<div align="center">betroffene BOX</div>
```

*betroffene BOX *(Probleme mit Position)


```
<div class="content"></div>
```
*
CSS der betroffnenen BOX

*

```
.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...


----------



## Maik (10. Februar 2006)

Alternativ zum HTML-Attribut align="center" könnte das Parent-DIV mit der CSS-Eigenschaft margin:0 auto horizontal zentriert werden.


----------



## Sebigf (10. Februar 2006)

Gut zu wissen 

Nur brauche ich eine Lösung, dass das ganze "nicht" zentriert ist.
Ich möchte den Inhalt gerne linksbündig haben


----------



## Maik (10. Februar 2006)

Und was willst du mit 


```
<div align="center"> ... </div>
```
erreichen?


----------



## Sebigf (10. Februar 2006)

Hehe, hab mir schon gedacht, dass dich das irritiert...


```
<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.


----------



## Maik (10. Februar 2006)

Dann entferne mal die beiden margin-Angaben 


```
.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;
}
```


----------



## Sebigf (10. Februar 2006)

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 ö.ä....


----------



## Maik (10. Februar 2006)

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 


```
<!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.


----------



## StupidBoy (10. Februar 2006)

Sebigf hat gesagt.:
			
		

> GRML, wieder mein Fehler... *nicht schlagen* ^^
> 
> Es gibt insgesamt 3 <div> - Ebenen.
> 
> ...



Verstehe ich dich richtig, dass du ein dreispaltiges Layout realisieren möchtest, das im Browser zentriert angezeigt wird?


----------

