[CSS] Dynamisch

[web2null]

Hallo ich habe hier ein design womit divs und CSS gearbeitet wurde, aber wenn ich mehr text hinzufüge wird das design nicht nach untenhin verlängert wie könnte ich das ändern? https://geldarm.de/upload/

 

[perlini]

Du hast deinem Inhalt eine feste Höhe (330px) angegebe.

Hast nun folgende Möglichkeiten:

- overflow:auto -> bekommst rechts 'nen Scrollbalken, der im Firefox (häßlichen) aussieht
- min-height:330px ->wenn Text länger wird, paßt er die Höhe an. Funzt aber nicht im IE6.

Vielleicht für IE6 die erste Variante (da kannste die Scrollbalken farblich gestalten) und die 2 Variante für Browser.

 

[tleilax]

Praktischerweise hält sich der IE nicht strikt an die vorgegebene Höhe und verlängert automatisch nach unten, wenn mehr Content kommt. Insofern kann man folgende Lösung nehmen:

#content {
  height: 330px;
  min-height: 330px;
}
#content[id] {
  height: auto;
}

Der IE ignoriert das min-height und die untere Definition, da er die Syntax nicht kennt. Der Firefox hingegen liest die untere Definition und richtet sich demzufolge nach dem min-height.

 

[web2null]

irgentwie klappt das mit
height: 330px;
min-height: 330px;

nicht :/

//edit

mit ie klappt das

 

[tleilax]

Machst Du alle Änderungen direkt online? Weil wenn ja, hast Du das neue Stylesheet nicht hochgeladen. Beim Link oben ist im Stylesheet nirgends ein min-height zu finden.

 

[web2null]

habs grade nochmal bearbeitet aber nun isse drin und es geht net

 

[perlini]

habs grade nochmal bearbeitet aber nun isse drin und es geht net

Fehlt noch irgendwo ein "clear". Wenn du #footer das mitgibst, paßt sich die Höhe an, nur fehlt dann das HF-Bild von #content.

 

[tleilax]

Deshalb würde ich direkt vorm schliessenden </div> des #content noch ein <br style="clear: both;"/> einfügen, dann müsste das mit der Hintergrundgrafik auch hinhauen.

Und nicht vergessen, das #content[id] aus meinem CSS-Code auch noch mit ins Stylesheet zu übernehmen, sonst wird das nix.

 

[web2null]

hmm will noch net muss ich die id des #content[id] durch was ersetzen eigentlich schon weil die is ja net definiert oder?

 

[FredRedHead]

/*

    Site: Images Up
    Copyright: Bartos Lazarski 
    Author: M. Petzold (buntou.de)

*/


body, h1, h2, h3, p, ul, li, a, img, hr, form, fieldset, input
    {
    margin: 0;
    padding: 0;
    border: 0;
    }

body
    {
    background: #fff;
    color: #919191;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    }

hr { display: none; clear: both; }


/* Container
------------------------------------------------------------*/

#wrapper
    {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 721px;
    margin-top: -220px;
    margin-left: -360px;
    }

#header
    {
    width: 100%;
    height: 50px;
    background: transparent url(img/header.gif) no-repeat;
    }

#content
    {
    width: 100%;
    background: transparent url(img/content.gif) repeat-y;
    }
#footer
    {
    width: 100%;
    height: 100px;
clear:both;
    padding: 20px 0 0 0; /* Abstand zum Footer Text */
    background: transparent url(img/footer.gif) no-repeat;
    text-align: center;
    }


/* Headlines
------------------------------------------------------------*/

h1
    {
    padding: 22px 35px 0;
    float: right;
    font-size: 14px;
    text-indent: -10000px;
    }

h1 a
    {
    display: block;
    width: 104px;
    height: 22px;
    background: transparent url(img/logo.gif) no-repeat;
    outline: none;
    }

h2 { display: none; }

h3
    {
    margin: 50px 0 0 0;
    font-size: 11px;
    }


/* Content Container ( Inhalt )
------------------------------------------------------------*/

#right
    {
    float: right;
    width: 360px;
    }

#right p
    {
    width: 340px;
    line-height: 15px;
    }

#right p span
    {
    font-style: italic;
    font-weight: bold;
    color: #7eb900;
    }


/* Content Container ( Anzeige )
------------------------------------------------------------*/

#left
    {
    width: 320px;
    margin: 0 0 0 22px;
    text-align: right;
    }

#left p#ad-txt { margin: 0 10px 2px 0; }

#left p#ad-link
    {
    width: 300px;
    height: 250px;
    padding: 9px;
    background: transparent url(img/ad.gif) no-repeat;
    }


/* Links
------------------------------------------------------------*/

a
    {
    color: #919191;
    text-decoration: none;
    }

a:hover
    {
    text-decoration: underline;
    }


/* Formular
------------------------------------------------------------*/

form { margin: 50px 0 0 0; }

fieldset p { margin: 8px 0 0 0; }

input.txt,
input.file
    {
    width: 250px;
    padding: 2px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    color: #919191;
    border: 1px solid #919191;
    }

input.file { width: 320px; } /* f�r IE / f�r FF Size in der Datei */

input.upload
    {
    float: right;
    margin: 10px 30px 0 0;
    }


/* Footer
------------------------------------------------------------*/

#footer p
    {
    margin: 2px 0;
    color: #b5b5b5;
    }

diese stylesheet datei übernimmst du (es wurden alle height und min-height) werte entfernt... unnötig (zumindestens für die Startseite), da der Text eh größer ist. Dann warum das ganze nur im IE klappt und nicht im FF:
IE ist so dumm und merkt nicht, dass du die <hr>'s mit denen du clear:both machst, versteckst. Der FF schon und deshalb wertet er diese nicht.. Lösung:

Alle <hr> aus dem Quelltext raus und dann in zusammenarbeit mit der oberen stylesheetdatei solltes klappen (bei #footer wurde clear:both ergänzt)

 

[tleilax]

Inzwischen klappt's doch schon. Zumindest, wenn man dem Link oben glauben darf...

 

[web2null]

Dankesehr klappt wunderbar auch mit hrs

 

[Dreamworker]

komisch das, wo hab ich denn da den fehler gemacht?!

ps. habs schon gefunden *lol* da muss man ja nur noch ne kleinigkeit einfügen das wars auch schon! *hehe*