Ergebnis 1 bis 7 von 7

Thema: CSS Layer 100%

  1. #1
    mixmastertobsi
    Gast

    Standard CSS Layer 100%

    Hallo ich möchte in einem layer 3 spalten als layer einfügen, die immer die höhe haben wie der übergeordnetet layer. das heißt wenn der text in der einen layerspalte länger ist als in der anderen soll, er so hoch sein wie der andere auch. ich habe es mir height: 100%; probiert. geht aber nicht

    #content {margin: 10px 0 0 0;}

    #content1 { margin: 0px 2px 0px 3px; float: left; width: 285px; background: rgb(235,237,242); }
    #content1 h1 { border-bottom: solid 3px rgb(0,36,106); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
    #content1 p { padding: 5px 15px 10px 5px;}
    #content1 img { margin: 10px; border: solid 1px rgb(0,0,0);}

    #content2 { margin: 0px 2px 0px 5px; float: left; width: 285px; background: rgb(239,241,245);}
    #content2 h1 { border-bottom: solid 3px rgb(71,97,147); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
    #content2 p { padding: 5px 15px 10px 5px;}
    #content2 img { margin: 10px; border: solid 1px rgb(0,0,0);}

    #content3 { margin: 0px 0px 0px 5px; float: left; width: 285px; background: rgb(250,250,240);}
    #content3 h1 { border-bottom: solid 3px rgb(158,172,19; background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
    #content3 p { padding: 5px 15px 10px 5px;}
    #content3 img { margin: 10px; border: solid 1px rgb(0,0,0);}


    danke[/img]
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Lies dir mal diese Anleitung über faux columns durch.
    Das ist ein "CSS-Trick" mit dem man die Containerhöhen zum "mitwachsen" zwingen kann.

  3. #3
    mixmastertobsi
    Gast

    Standard

    Hallo, du wirst lachen aber das habe ich schon gemacht nur leider habe ich dort ein neues problem gehabt. der ie und firefox geben die pixel positionsangaben nicht 100% gleich wieder, so dass die hintergrundgrafik nicht 100% in die spalten gepasst hat.

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hast du einen Doctype mit Verweis-URL in deiner HTML-Datei? Falls nein, gib mal einen ein. Könnte an dem Box-Hack des IE liegen, wenn dieser im Quirks-Mode ist.
    Gib mal versuchsweise auch das noch in deine CSS ein:
    Code:
    * {margin:0; padding:0;}

  5. #5
    mixmastertobsi
    Gast

    Standard

    hallo vielen danke für deine antwort. habe es auch schon gehabt. anbei das css

    Code:
     /* ####### */
     /*   CSS   */
     /* ####### */
     
    
    
    *                                    { padding: 0; margin: 0;}
    html                                 { height: 100%; }
    body                                 { height: 100%; width: 100%; font-size: 13px; text-align: center; font-family: Arial, Helvetica, sans-serif; background: url(/gfx/site/bg.gif);} 
    
    #site                                { position: relative; height: 100%; width: 885px; margin: auto; padding: 0 0 0 0; text-align: left; background: #ffffff;}
    body>#site                           { min-height: 100%; height: auto; }
    
    h1                                   { font-family: Arial; font-size: 22px;  font-weight: normal;}
    
    a:link,
    a:visited                            { color: rgb(0,0,0); text-decoration: underline; }
    a:active,
    a:hover                              { color: rgb(0,0,0); text-decoration: none;  }
    
    
    #navi                                { width: 875px;  height: 169px; margin: 0px 5px; background: url(/gfx/site/navibg.gif);}
    #navilogo                            { height: 169px; width: 250px; margin: 0px 50px; background: url(/gfx/site/logo.gif); }
    #navimenu                            {}
    
    #kopf                                { width: 875px; height: 324px; margin: 0px 5px; background: url(/gfx/site/kopf.jpg) no-repeat;}
    
    #content                             { margin: 10px 0 0 10px; }
    #content p                           { padding: 5px 15px 10px 5px;}
    #content img                         { margin: 10px; border: solid 1px rgb(0,0,0);}
    #content h1                          { padding: 0 0 0 28px; background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; font-weight: bolder;}
    
    #content1                            { margin: 0px 5px 0px 0px;  float: left; width: 285px; background: rgb(235,237,242); }
    #content1 h1                         { border-bottom: solid 3px rgb(0,36,106); }
    
    #content2                            { margin: 0px 5px 0px 0px;  float: left; width: 285px; background: rgb(239,241,245);}
    #content2 h1                         { border-bottom: solid 3px rgb(71,97,147); }
    
    #content3                            { margin: 0px 5px 0px 0px;  float: left; width: 285px; background: rgb(250,250,240); }
    #content3 h1                         { border-bottom: solid 3px rgb(158,172,198); }
    
    #fuss                                { height: 43px; width: 875px; margin: 8px 5px 10px 5px; padding: 35px 0 0 0; font-size: 12px; font-weight: bolder; background: url(/gfx/site/fuss.gif) repeat-x; text-align: center; }
    
    .clear                              { clear: both; }
    .noclear                            { clear: none; }
    .aus                                { display: none; }
    .print                              { display: none; }
    .seo                                { display: none; }
    .nix                                { }
    danke

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich kann's jetzt leider nicht nachvollziehen, da ich momentan keinen FF zum Vergleich habe und auch der HTML-Code sowie die background-gifs fehlen.
    Was mir aber aufgefallen ist: Abweichend zur faux-columns-Anleitung hat du kein repeat-y drin. Und die Pixel-Grafik (alsoe der "Querschnitt" deiner drei Container) zum dynamischen Anpassen müsste doch wohl auch in den #site container rein? Innerhalb der Einzelcontainer nützt's ja nichts, da diese ja unabhängig voneinander sind.

  7. #7
    mixmastertobsi
    Gast

    Standard

    Hallo, vielen dank für deine hilfe, habe es jetzt hinbekommen. Muss nachher mal daheim schauen wie es im ie 7 aussieht. dort hat man dann wieder neue überraschungen

Ähnliche Themen

  1. Layer Werbung
    Von switchsk8 im Forum Promotion - SEO - Suchmaschine (Google & Co) – Mitarbeiter & Linkpartnersuche
    Antworten: 4
    Letzter Beitrag: 29.04.2007, 21:10
  2. Layer ads
    Von syslord2k2 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 28.09.2006, 10:31
  3. Div-Layer
    Von Berti im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 09.05.2006, 20:44
  4. Flash und DIV Layer
    Von Harlecino im Forum Flash Forum
    Antworten: 6
    Letzter Beitrag: 30.04.2006, 14:40
  5. layer neu laden
    Von ich_weiss_es_net im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 09.08.2005, 14:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •