div design frage

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • div design frage

    Moin,
    bastle schon eine Weile an folgendem Design rum, hier ein Bsp. :
    http://testarea.mcmurphy42.de/bsp/

    Was mir nicht gelingen will:
    der div id="right" soll immer den ganzen zur verfügung stehenden Platz ausnutzen, im Bsp. soll also der gelbe Block unabhängig vom Inhalt die Höhe des div id="wrapper" MINUS des div id="top" haben und das ohne JS....
    height:100%; tuts natürlich nicht, den das ist die gleiche Höhe wie div id="wrapper"....
    hier der Quellcode:

    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html>
      <
    head>
        <
    title>Default::Home</title>
        <
    meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

        <
    meta name="revisit-after" content="7 days" />   
        <
    link rel="stylesheet" type="text/css" href="css/standard.css" />

        </
    style>    
      </
    head>
      <
    body>
       <
    div id="wrapper" class="clearfix">
         <
    div id="top"><!--  //--></div>
         
    <div id="left">
          <
    div id="menu">
           <
    ul>
            <
    li><a href="../Home/" onfocus="if(this.blur)this.blur();">Home</a></li>
            <
    li><a href="../BSP#/" onfocus="if(this.blur)this.blur();">Weitere Links</a></li>
            <
    li><a href="../Links/" onfocus="if(this.blur)this.blur();">Links</a></li>
           </
    ul
          </
    div>
         </
    div>
         <
    div id="right" class="clearfix">
         
    der div id="right"
           
    <div id="content"
               <
    p>bla bla... </p>
          </
    div><!-- von content //-->
         
    </div><!-- von right //-->
       
    </div><!-- von wrapper //-->
      
    </body>
    </
    html
    und hier der relevante Bereich der CSS - Datei:
    PHP-Code:
    #wrapper { width: 980px; height:100%; border: solid 1px black;   text-align:center; margin: 0px auto; }

    html>body #wrapper {    height:auto;  min-height:100%; }                    
    #top { width:980px; height:191px; border: solid 1px white;}
    #left { width:236px; min-height:500px;  text-align:left; float:left;border: solid 1px blue;}
    #menu { text-align:left;  height:458px;  border: solid 0px white;}        
    #right { width:740px; height:500px;  float:left; border: solid 1px yellow;  text-align:left; overflow:auto;}
    #right[id]{ min-height:500px;  }
    #content {   text-align:left;  border: solid 1px white;  padding:10px;}

    .clearfix:after {
        
    content"."
        
    displayblock
        
    font-size:1px;
        
    height1px
        
    clearboth
        
    visibilityhidden
    }
    .
    clearfix {displayinline-table;}
    /* Hides from IE-mac \*/
    html .clearfix {height1%;}
    .
    clearfix {displayblock;}
    /* End hide from IE-mac */ 
    geht das überhaupt ?!?
    Zuletzt geändert von mcmurphy; 20.04.2006, 13:50.
    "I don't want to belong to any club that would accept me as a member."

    Groucho Marx

  • #2
    Probier mal einen seperaten Wrapper div um das menü div und das
    right div zu setzen und dann mit height:inherit; den div right die höhe
    vom wrapper übernehmen lassen, wäre das was mir spontan so einfällt.

    Kommentar


    • #3
      schade, das tuts nicht .
      Hab das CSS minimal geändert (hatte was vergessen):
      right hat overflow:auto;
      mit content kann ich den Inhalt mittels padding einrücken ohne ständig right height anfassen zu müssen.
      Sinn der ganzen Sache ist, immer den gesamten Bildschirmbereich bei unterschiedlichen Auflösungen ausnutzen zu können.
      Wenn dann ein Inhalt partout nicht mehr auf eine Seite passt, soll der Top bereich (mit Logo, etc. pp.) trotzdem sichtbar sein und im right div die Scrollbalken erscheinen...
      Mit JS könnte ich mir ja die Höhe des body ausgeben lassen und dann div right = body height - top height....
      aber wie gesagt, fände eine reine CSS Lösung eleganter.
      Befürchte aber mittlerweile, das det nich jeht ......
      Zuletzt geändert von mcmurphy; 20.04.2006, 13:51.
      "I don't want to belong to any club that would accept me as a member."

      Groucho Marx

      Kommentar


      • #4
        So, hab denn Effekt denn ich haben möchte mal in Javascript gebastelt,
        der mittlere Link in dem angedeuteten Menü führt zum Beispiel.
        Also:
        geht der Effekt nur mit CSS oder nicht?

        @Wahsaga: Wat sagt den der Chef zu dem Thema?

        P.S. der Fenster Scrollbalken ergibt sich wegen der diversen 1px Border, die ich wegen der Übersichtlichkeit eingebaut habe...
        "I don't want to belong to any club that would accept me as a member."

        Groucho Marx

        Kommentar


        • #5
          hmmm also die JS ist irgendiwe nervig... das dauernt die seite neu geldaen wird. so ein geruckel...
          2 meiner pages:

          Kommentar


          • #6
            hmmm also die JS ist irgendiwe nervig... das dauernt die seite neu geldaen wird. so ein geruckel...
            ich weiß, soll ja auch nur zeigen was ich (optisch) haben will, deswegen ja meine Frage (s.o.)....
            "I don't want to belong to any club that would accept me as a member."

            Groucho Marx

            Kommentar

            Lädt...
            X