Kein Innenabstand im Layout

[R0b]

Hallo Zusammen,
ich habe ein ziemlich kniffeliges Problem.
Mein Layout macht keinen Innenabstand/Padding im Content Bereich.
Wenn ich dann ein Float:Left; reinpacke habe ich zwar den Abstand aber dafür kann ich dem Content nicht die ganzen 85% der Breite zuweisen, weil sich der Content dann unter die Navi setzt. Hier der Code:

#container
{
    width: 1050px;
    height: 500px;
    background-color: white;
    margin: 1em auto;            /* Zentrierung des Layouts in der Bildschrimmitte */
}

#banner
{
    width: auto;
    height: 80px;
    background-color: brown;
    text-align: center;
    clear: both;
    padding: 5px;
}

#navi
{
    width: auto;
    height: 100%;
    background-color: brown;
    float: left;
    padding: 10px;
}

#content
{
    height: 100%;
    background-color: yellow;
    padding: 10px;
}

#footer
{
    height: auto;
    background-color: brown;
    clear: both;
    padding: 5px;
    text-align: center;
}

Danke im Vorraus ;-)

 

[prm]

Ist ohne den HTML-Teil schwer zu beurteilen.

Wenn ich dann ein Float:Left; reinpacke habe ich zwar den Abstand aber dafür kann ich dem Content nicht die ganzen 85% der Breite zuweisen, weil sich der Content dann unter die Navi setzt.

Mal ein Tipp auf Verdacht:
Wenn deine Navi links gefloatet ist und daneben der #content hin soll: Dann weise deiner #navi einen Breitenwert zu und dem #content einen entsprechenden margin-left-Wert zuzüglich 20px für Padding der #navi.

Wenn das nicht weiterhilft bitte Link oder komplettes HTML posten.

 

[R0b]

geil ... danke jetzt weiß ich für demnächst bescheid .. das ich darauf nicht gekommen bin :twisted: umsonst rumprobiert aber aus fehlern lernt man 8)

habe jetzt einfach der navi width: 130px zugewiesen und dem content margin-left: 150px wegen den 20px padding ..


DANKE ;heart

 

[neuroleptika]

.....
nicht die ganzen 85% der Breite zuweisen, weil sich der Content dann unter die Navi setzt. Hier

#container
{
    width: 1050px;
    height: 500px;
    background-color: white;
    margin: 1em auto;            /* Zentrierung des Layouts in der Bildschrimmitte */
}

#banner
{
    width: auto;
    height: 80px;
    background-color: brown;
    text-align: center;
    clear: both;
    padding: 5px;
}

.......

Danke im Vorraus ;-)

Wenn du width in % mit padding in px mischen willst geht das so nicht.
Die Breite eines Elementes ergibt sich aus width, padding und border.
Zusätlicher Platz wird auch bei Anwendung von margin verbraucht.
Da du ein Fixes Layout #container { width: 1050px; } hast, solltest du den darin enthaltenen Elementen ebenfalls ein width in px geben. (padding-Werte mit einberechnen).

Oder du gibst den Strukturierenden Elementen <h1>, <p>, <ul> usw. den entsprechenden Padding.

 

[R0b]

hab mal alles umgeändert und es sieht besser aus, meiner meinung nach ^^
habe versucht so flexibel wie möglich zu sein, wenn ihr iwo seht dass ich flexibler sein könnte dann bitte melden ;)

#container
{
    width: 75%;
    height: 85%;
    background-color: #A65300;
    margin: 1em auto;            /* Zentrierung des Layouts in der Bildschrimmitte */
}

#banner
{
    width: 98%;
    height: 18%;
    background-color: #A65300;
    text-align: center;
    clear: both;
    padding: 1%;
}

#navi
{
    width: 18%;
    background-color: #A65300;
    float: left;
    padding: 1%;

}

#content
{
    width: 78%;
    height: auto;
    float: left;
    background-color: #FFEC8B;
    padding: 1%;

}

#footer
{
    height: 8%;
    background-color: #A65300;
    clear: both;
    padding: 1%;
    text-align: center;
}

So im ersten Augenblick scheint es so als würde es laufen, aber in Wirklichkeit habe ich den Container braun gemacht, damit unter der Navi kein weißer Streifen ist.

Im Inet habe ich nachgeschaut und bin auf folgendes gestoßen:
CSS-»Faux Columns« bzw. »Unechte Spalten« auf deutsch » die Netzspielwiese
Habs mir durchgelesen und es dann erstmal auf meine Art "gefixt" mal sehen wie es in der Zukunft aussieht, wenn jmd ne Lösung hat bitte melden ;)
Hier nochmal ein Link zum Anschauen:
Donde Jutta