Body auf ganzer Seite, Menü soll gleich bleiben

Computer: Software & Programmierung HTML & CSS
1

Hallo Experten,

ich würde gern den body bis nach untern ziehen. Ich weiß das es mit min-height funktioniert, aber es funktioniert nicht bei mir ( www.bestaltmed.com ).

Außerdem würde ich gern das Div headerImg mit dem Div wrapperI immer in gleichen Abstand halten. So das es auch beim verkleinern des Fensters auf der selben Breite bleibt. (siehe website)

Kann mir da bitte Jemand helfen?

Lg,
Chris

Hier ist der CSS Code:
@charset „UTF-8“;
* {
margin: 0px; padding:0px;

}
html, body {height: 100%
}

#headerImg {
background-color: #209111;
text-transform:uppercase;
}
#wrapperI {
width: 1450px;
margin-right: auto;
margin-left: auto;

}
#wrapperI #SidebarII {
width: 170px;
float:right;
padding-top:20px;
padding-right:10px;

}

#wrapperI #SidebarI {
width: 170px;
float:left;
padding-top:20px;
padding-left:20px;
}

#wrapper {
width: 1045px;
min-height: 100%;
border-right-width: 3px;
border-left-width: 3px;
border-right-style: solid;
border-left-style: solid;
border-left-color: #6FD12F;
border-right-color: #6FD12F;
margin-right: auto;
margin-left: auto;
}

#wrapper #bodyArea {
width: 1025.5px;
padding: 10px;
}

und hier der Aufbau der Divs:

2

Hallo,

ich würde gern den body bis nach untern
ziehen. Ich weiß das
es mit min-height funktioniert, aber es
funktioniert nicht bei
mir ( www.bestaltmed.com ).

Der body geht bei deinem geposteten Beispielcode bereits bis nach unten.

Außerdem würde ich gern das Div headerImg
mit dem Div wrapperI
immer in gleichen Abstand halten. So das
es auch beim
verkleinern des Fensters auf der selben Breite :bleibt. (siehe website)

Aus wrapperI muss die feste Breite (width: 1450px:wink: weg; schließlich hat headerImg das auch nicht. Für den Rest des CSS würde ich die fixen Breitenangaben ebenfalls überdenken. Alternativ musst du allen Elementen, die gleich breit sein sollen, auch die gleiche Breite mitgeben.

Getestet habe ich das mit folgendem (X)HTML:
Testseite HeaderImg
Wrapper I
Sidebar I
Sidebar II
Wrapper
BodyArea

Body

Vorschlag:
Gib im CSS deinen unterschiedlichen Div-IDs und dem Body-Tag mal die Regel

border: 2px solid blue;

mit. Ersetze bei den unterschiedlichen IDs die Farbe blue durch z.B. red, green, yellow, grey, black, pink (und weitere). Dann kannst du genau sehen, wie ausgedehnt der Body ist und wie groß sich die einzelnen Divs platzieren.

Gruß
A.

3

Hallo Anja,

danke für deine AW. Ich hab die Divs bevor du sie gesehen hast auszurichten.
Ich hab für den head min-width verwendet und für den content min hight. Allerdings is dadurch die Höhe höher geworden da der head noch dazu kommen würde. Daher hab ich dann die Sidebars einfach mit einen Rand ausgestattet.

Eine Fragen hätt ich allerdings dann noch wie kann ich min-width auch in alten Browsern auslesen lassen?

Lg,
Chris

4

Hallo Chris,

Eine Fragen hätt ich allerdings dann noch wie kann ich
min-width auch in alten Browsern auslesen lassen?

was meinst du denn mit alt?
min-width ist CSS 2.0 und wird z.B. ab folgenden Browserversionen ausgewertet:

  • Netscape 6.0

  • MS IE 7.0

  • Opera 7

  • Mozilla Firefox 1

  • Konqueror 3.1

  • Safari 1.0

(Quelle: de.selfhtml.org)

Da sind durchaus schon ältere Exemplare dabei.

Noch älteren Browsern kannst du, glaub ich, nicht „beibringen“, was sie nich von Haus aus schon können.

Gruß
A.

5

Hallo Anja,

danke für die AW. Ich wollt halt nur sicher gehen ob alle (fast alle) Browser min-width lesen können.

Danke nochmal,
Chris

6

Moin,

danke für die AW. Ich wollt halt nur sicher gehen ob alle
(fast alle) Browser min-width lesen können.

http://de.selfhtml.org/css/eigenschaften/positionier…

Der durchaus verbreitete IE6 kann das nicht.
Du solltest in jedem Fall prüfen, wie Deine Seiten dargestellt werden, wenn min-width nicht interpretiert wird und ggfs. Alternativen anbieten.

Webseiten müssen ja nicht in jedem Browser identisch aussehen - das ist technisch gar nicht möglich. Aber sie sollen in allen Browsern funktionieren, und gemäß der Fähigkeiten der Browser anständig aussehen.

Freundliche Grüße,
-Efchen