HTML min height, div problem

[rko_49]

Halli Hallo, also hab folgendes:

Ich möchte das min-height in pixeln angeben, wenn ich das allerdings tue, dann macht er die Höhe nicht auf 100% sofern der Inhalt nur kurz ist, sondern macht es einfach nur auf die min-height...

Hoffe ihr könnt mir helfen,
Danke im vorraus...

Gruß rko_49

Code:

* {
    margin: 0;
    padding: 0;
    height:100%;
}

#bg
    {
    position:relative;
    z-index:1;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    width:1045px;
    margin:auto;
    min-width:1000px;
[COLOR="Red"]    min-height:750px;[/COLOR]
    height:auto !important; /* Important Regel für moderne Browser */
    height:100%; /* Mindesthöhe für den IE */
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
}

#footer
    {
    background-image:url(images/footer.png);
    position:absolute;
    z-index:2;
    visibility: visible;
    width:190px;
    height:300px;
    right:0px;
    bottom:0px;
}

#logo
    {
    background-image:url(images/logo.png);
    position:absolute;
    z-index:4;
    visibility: visible;
    width:290px;
    height:100px;
    top:50px;
    left:50px;
}

#textbox_volle_breite
    {
    position:relative;
    z-index:3;
    left:60px;
    padding-top:220px;
    width:720px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height:22px;
    color:#000;
}

<div id="bg">

<div id="textbox_volle_breite">
....wenig Text....
</div>

<div id="logo"></div>
<div id="footer"></div>

</div>

 

[Trainmaster]

Entschuldigung, aber ich verstehe absolut dein Problem nicht. Gebe dir bitte ein bisschen mehr Mühe bei der Fehlerbeschreibung und fertige bitte eine Skizze an, wie es denn aussehen soll. Dann kann man dir auch entsprechend weiterhelfen. Außerdem sieht mir das CSS mehr geraten als gewusst aus ...

 

[rko_49]

Okay, sorry

Also:

Ich habe ein Äußeres <div> (<div id="bg">) wo der ganze Inhalt rein soll, dieser Äußere <div> ist zentriert mit variabler breite.
Dadrin habe ich nen Logo links oben, Buttons rechts oben und nen Footer rechts unten.
Dann ist dadrin noch nen <div> für den Text, sofern der Text sehr lang, wächst der Äußere <div> also mit, wenn er kurz ist, muss er ja nicht mitwachsen da ja alles angezeigt wird ohne scrollen zu müssen.
Da kommt mein Problem: Wenn nicht gescrollt werden muss, geht das Äußere <div> in der Höhe nicht über 100%, soll es aber eigentlich!
Und wenn man das Fenster dann kleiner macht sollte es ab 750px in der Höhe anfangen, dass man scrollen muss.

Ging das so?

Was ist am CSS falsch?

 

[Trainmaster]

So ganz verstanden habe ich das immer noch nicht, geht es nur mir so? Wieso soll der Äußere div über 100% haben? Der Grund erschließt sich mir nicht.

Naja, das CSS sieht halt mehr geraten als gewusst aus und nach dem Motto "Viel hilft viel". Bspw: Wozu z-index? Oder visibility: visible; (wenn visible der Default-Wert ist!)? Der größte Mist ist height: 100%; im Universalselektor.

 

[rko_49]

Aus dem Grund das wenn der Äußere nicht über 100% geht, der footer in der luft hängt und nichten unten am fensterrand postioniert ist, ausserdem hab ich ja auch nen boarder-left und right, und die linien dann auch in der mitte aufhören...

oh ja das visibility ist unnötig stimmt,
das z-index damit der Text zB über dem footer steht, gibt noch andere gründe die hier nicht relevant sind, hab noch buttons und so ...

ich lads vllt einfach mal schnell hoch

€dit:
siehe zB rechts unten der "Footer" schiebt sich beim kleiner machen unter die Buttons
Satrtseite und Über Mich seite kannste auch vergleichen....
http://www.uexel-buexel.de/test/index.html

 

[Trainmaster]

Ich bitte darum. Eventuell lässt sich die Struktur dahingehend verbessern, dass selbst z-index unnötig wird. Ich schaue es mir an, sobald es hochgeladen ist.

 

[rko_49]

ist hochgeladen

 

[Trainmaster]

Also bei mir hängt der footer nicht in der Luft. Welchen Browser benützt du? Einzig und allein kann ich nachvollziehen, dass sich der footer unter einen Menüpunkt schiebt. Auf jeden Fall würde ich dir empfehlen, das height:100%; aus dem Universalselektor zu nehmen. Ich weiß gar nicht, welchen Zweck das erfüllen soll?

 

[rko_49]

zum height:100% im Universalselektor, Das hab ich so gelesen das man das machen soll

Ja im mom hängts auch nicht in der Luft, da min-height 100% angegeben ist, es hängt nur in der Luft wenn min-height in Pixeln angegeben ist, sorry mein Fehler

siehe direkter Vergleich:

min-height:100% : http://www.uexel-buexel.de/min_height_100_pro/

min-height:750px : http://www.uexel-buexel.de/min_heigt_750px/

Bei fester min-height schiebt sich eben der Footer nicht mehr hoch, ist ja klar.

 

[Trainmaster]

Völliger Quatsch, die height:100% beim Universalselektor. Wo hast du so einen Mist gelesen? Padding und margin auf 0 zu setzen ist jedoch sinnvoll, weil einige Browser bei verschiedenen Elementen Standardwerte vergeben. Das height:100% führt zu völlig unkontrollierten Höhenangaben bei deinem kompletten Design. Aus dieser Sicht kann ich dir nur empfehlen, das Layout neu aufzusetzen.

 

[rko_49]

Okay, jetzt habe ich es rausgenommen, und zu meinem Problem kommt jetzt noch dass es auch in der height:100% version nicht mehr über 100% geht sondern nur über die höhe des inhaltes, also war das height im universalselektor wohl korrekt oder?

sieh links von oben

auf jeden fall danke schonmal dass du dich damit beschäftigst

 

[Trainmaster]

Das height im Universalselektor hat nichts verloren, bitte streich das für immer. Stattdessen füge folgenden Code hinzu:

html {
    height:100%;
}

body {
    height:100%;
}

 

[rko_49]

okay hab ich, schonmal danke...

Leider leider immer noch das alte Problem

 

[Trainmaster]

Bei mir sieht es ordentlich aus. Welches Problem meinst du?

 

[rko_49]

Naja in der variante verschiebt sich ja der footer noch unter die menüpunkte.

Ich will aber:
Beim Fenster verkleinern soll unter ca. 750px Höhe gescrollt werden.
Wenn aber das Fenster größer als 750 px ist, soll alles halt über die volle Höhe gehen, also 100%,
also quasi iwie ne Mischung

 

[Trainmaster]

Ist 750px der Grenzwert, bei dem Footer noch nicht verschwindet? Ansonsten verstehe ich weder Sinn noch Zweck.

 

[rko_49]

Sinn und Zweck ist, dass sich der Footer nicht unter die Menüpunkte schiebt, sondern bevor er das tut soll man lieber scrollen, 750px ist nur nen beispiel..

 

[Trainmaster]

Entweder den Impressum-Button höher positionieren und/oder padding-top von #textbox_volle_breite erhöhen.

 

[rko_49]

hmm ander Möglichkeiten gibt es nicht?

 

[Trainmaster]

Viele Wegen führen nach Rom ... du könntest dem #footer einen negativen bottom-Wert geben und die zwei border des #bg über eine Hintergrundgrafik in html oder body realisieren, Verstanden?

Was stört dich an der Lösung? Du musst den Impressum-Button nur ca. 25px nach oben verschieben. Das individuelle und extravagante Design bleibt damit erhalten