Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

4 Divs mit fester und dynamischer Breite

Antwort erstellen

4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 26.03.2009, 22:12

Hallo Community,

ich gehe gerade an folgendem Problem zugrunde:
Die Seite, die ich aufbauen möchte, besteht im Prinzip aus 4 Elementen. Der Body ist praktisch als "wrapper" gedacht, soll sich bis zu einer Mindestauflösung von 1280x800 zu 100% anpassen und ist vertikal nicht scrollbar, nur die Elemente innerhalb.
Es soll eine horizontales Menü geben mit einem CSS-Dropdown, also einer verschachtelten <ul> (1. Div - dynamische Breite 100% bis nowrap), daneben ein Div mit fester Breite (220px) für das Logo.
Dadrunter ein Div mit dem Content als iFrame mit derselben variablen Breite wie das Menü (SCROLLBAR) und wiederum rechts daneben ein weiteres Div mit iFrame und derselben festen Breite, wie das Logo-Div (NICHT scrollbar).

|-----------------------------------------|----------------|
|menü - dynamisch | logo - fix |
|-----------------------------------------|----------------|
| content - iframe - scrollbar | feste Breite |
| |nicht scrollbar|
|------------------------------------------|----------------|

Also: menü und content dynamische Breite, wobei menü sich in height nicht ändern soll und content in height innerhalb des iFrames, also nicht "wrapper-height". Im Übrigen sind die zwei rechten Divs auch nicht scrollbar, sondern sollen dem Body immer zu 100% height angpasst sein. Ich habs beim content mit position: absolute und einer prozentualen Höhe probiert, das hat allerdings die Scrollleiste bei Minimierung des Browsers verdeckt. Ohne position bleibt sie zwar stehen, aber dann muss ich ja eine feste Höhe angeben, was in diesem Falle nicht geht, weil die Auflösung nicht bekannt ist.

Hoffe, das war halbwegs verständlich. Ist wirklich sehr dringend.

Gruss

Edit: Im Prinzip brauche ich ein Layout mit 2 flexiblen Divs auf der linken und 2 festen Divs auf der rechten Seite...
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon Laus » 27.03.2009, 08:07

Hallo

Meinst du So etwas?

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 27.03.2009, 10:27

Hi Xaver,

danke für die Antwort. Das ist schon mal sehr gut, allerdings bräuchte ich noch ein fixes Div über der dunkelgrünen Sidebar mit der gleichen Breite. Ich werde mal ein wenig Basteln und gucken, ob ich das hinkriege.

Gruss
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon Laus » 27.03.2009, 11:54

Du meinst für dein Logo?
Warum setzt du das Logo nicht einfach in den header und positionierst es mit float right an die richtige stelle? Ist einfacher, du brauchst dazu kein extra DIV und das Logo bleibt trotzdem immer am rechten Rand.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 27.03.2009, 14:00

Ich habs jetzt wie folgt gemacht:

Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body{
   margin:0;
     padding:100px 150px 0 0;
}

div#header{
   position:absolute;
     top:0;
     right:220px;
     width:100%;
     height:100px;
     background-color:#00CC00;
}

div#logo{
   position:absolute;
   width: 220px;
   height: 100px;
   top:0;
   right:0;
   background-color:#FF0000;
}

div#right-sidebar{
   position:absolute;
     top:100px;
     right:0;
     width:220px;
     height:100%;
     background-color: #FFFF00;
}

@media screen{
   body>div#header{
         position:fixed;
   }

     body>div#right-sidebar{
         position:fixed;
     }
}

* html body{
   overflow:hidden;
}

* html div#content{
   height:100%;
     overflow:auto;
}
</style>

</head>

<body>
<div id="header">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kopf">
      <tr>
         <td bgcolor="##CCCCCC" align="right" style="white-space:nowrap; padding-right: 5px;">
            <input name="" class="" type="text" value='' onClick=""
            style="background-color:##CCCCCC; border: 1px solid ##FFF; padding:2px; font-weight:bold;" />
            <input class="" type="button" onClick="" value="OK">
            <input class="" type="button" onClick="" value="Hilfe" style="margin-left:68px;">
            <input class="" type="button" value="Drucken">
            <input class="" type="button" onClick="" value="Logout">
            <input class="" type="button" onClick="" value="zur&uuml;ck">
         </td>
      </tr>
   </table>
</div>
<div id="logo"> logo </div>
<div id="right-sidebar"> right-sidebar </div>
<div id="content">
<iframe src="seite.html" frameborder="0" scrolling="yes" width="95.4%" height="100%" name="mainframe" id="frameset2" title="mainframe">
</iframe>
</div>
</body>
</html>


Das 1. Problem ist, dass ich im Header Inputfelder und (nicht im Code) eine horizontale Liste als CSS-Dropdown ("Buttons" passen sich immer der maximalen Breite an) habe, die bei Verkleinerung des Browsers nach links verschwinden. Nehme ich position:absolute aus div#header raus, dann bleibt zwar alles im Header, aber die Liste zerreisst mir das Layout. Da müsste ich dann mit Negativwerten arbeiten.

EDIT: Liegt wahrscheinlich am Logo-Div. Werde das mal mit float:right im Header probieren.

Das 2. und wesentlich schlimmere Problem ist der iFrame im Content. Ohne position:absolute im iFrame kann ich keine prozentuale Höhenangabe machen, die ich aber unbedingt brauche. Mit position:absolute geht das zwar, wenn ich das Browserfenster aber dann verkeinere verschwindet der Scrollbalken hinter der Sidebar.
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 02.04.2009, 16:41

Ok, erstmal alles reduzieren. Beim folgenden Code gehts mir eigentlich nur darum, dass die content_iframe.html eine dynamische Höhe hat und der Scrollbalken nicht von sidebar_iframe.html überdeckt wird. sidebar_iframe.html wiederum soll eine feste Breite beibehalten. Setze ich den Content-iFrame 'absolute' bleibt zwar der Scrollbalken und die dynamische Höhe, aber der Sidebar-iFrame wird nach und nach schmaler.

Code: Alles auswählen
body{
   margin:0;
     padding:100px 150px 0 0;
}

div#header{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100px;
     background:#00CC66;
}

div#right-sidebar{
     position:absolute;
     top:100px;
     right:0;
     width:220px;
     height:100%;
     background:#CC3300;
}

@media screen{
     body>div#header{
         position:fixed;
   }
     body>div#right-sidebar{
         position:fixed;
   }
}

* html body{
   overflow:hidden;
}

* html div#content{
     height:100%;
     overflow:auto;
}


Code: Alles auswählen
<body>
<div id="header">
   Header
</div>
<div id="right-sidebar">
   <iframe src="sidebar_iframe.html" frameborder="0" scrolling="no" name=""
      id="" title="" height="100%" width="220">
   </iframe>
</div>
<div id="content">
   <iframe src="content_iframe.cfm" frameborder="0" scrolling="yes" width="95%" height="100%" name="" id="" title="">
</div>
</body>


Ich werde echt wahnsinnig!!!
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 03.04.2009, 17:41

Hat keiner eine Idee? Ich habs jetzt mal mit einem Frameset ausprobiert. Dort funktioniert alles super.

Code: Alles auswählen
<frameset rows="60,*" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="header.html" name="" frameborder="0" scrolling="no" noresize="noresize" id="" title=""/>
  <frameset cols="*,220" frameborder="no" border="0" framespacing="0" id="">
    <frame src="content.html" name="" id="" scrolling="yes">
    <frame src="sidebar.html" name="" scrolling="no" id="" />
  </frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>


Dort ist allerdings das Problem, dass ich ein CSS-Dropdown in der header.html habe, welches sich nicht über content.html ausklappen lässt, also im eigenen Frame bleibt. Ich habe es auch schon mit z-index:1 probiert.

Code: Alles auswählen
body {
   text-align:center; 
   font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size:12px;
   margin:0;
   padding:0;
}

#page {
   width:100%;
   text-align:left;   
   margin-bottom: -22px;
}

.clear {
   clear:both;
}
    

/* ~~~ Navigation ~~~ */

#navi, #navi ul {
   list-style-type:none;
   margin:0;
   padding:0;
} /* Style-Reset */

#navi li {
   width:13.5%; /* Button-Breite */
   float:left;
} /* Horizontale Anordnung */
      
#navi li ul {
   display:none;
} /* Normalzustand eingeklappt */

#navi li:hover ul {
   display:block;
} /* Ausgeklappt */
      

/* ~~~ Styles ~~~ */
    
#navcontainer {
   height:35px; /* Hoehe Button-Container */
   position:relative;
   width: 86.8%;
   background:#F2C13A;
}
    
#navi {
   position:relative;
   adding: 0 5px 0 12px;
}
    
#navi li {
   border-top:1px solid #000;
   border-bottom:1px solid #000;
   margin:0;      
}

#navi ul li {
   border:none;
   margin:0; /* Abstand Listenelemente */
   width:100.4%; /* Breite Listenelemente */
}
      
#navi a {
   font-weight:bold;
   text-align:center;
   display:block;
   padding:0.4em;
}

#navi a:link, #navi a:visited {
   color:#000;
   background:#FFF;
   text-decoration: none;
}

#navi a:active, #navi a:hover {
   color:#000;
   background:#F2C13A;
   text-decoration:none;
}

#blr{
   border-left: 1px solid black;
   border-right: 1px solid black;
}



Code: Alles auswählen
<ul id="navi" style="width:100%;">
        <li>
           <a href="#" style="border-left: 1px solid black;">xxxxx</a>
         <ul>
              <li>
               <a id="blr" href="#" target=""
               style="text-align:left; border-top: 1px solid black;  border-bottom: 2px solid #FFCC33;">
                  xxxxxxxxxxx
               </a>
            </li>
              <li>
               <a href="#" target="" id="blr"
               style="text-align:left;">xxxxxx xxxxxxxxxxx</a>
            </li>
         </ul>
        </li>
      <li><a href="#" style="border-left: 1px solid black;">xxxxxxxxxx</a>
         <ul>
              <li><a href="#" id="blr" style="text-align:left; border-top: 1px solid black;  border-bottom: 2px solid #FFCC33;">xxxx xxxxxxxx</a></li>
              <li><a href="#" id="blr" style="text-align:left;  border-bottom: 2px solid #FFCC33;">xxxxxx xxxxxx</a></li>
            <li>
               <a href="#" target="" id="blr" style="text-align:left;  border-bottom: 2px solid #FFCC33;">
                  xxxxxxx xxxxxxx
               </a>
            </li
              ><li>
               <a href="#" target="" id="blr" style="text-align:left;  border-bottom: 2px solid #FFCC33;">
                  xxxxxxxx xxxxxxxxx
               </a>
            </li>
            <li>
               <a onfocus="" onclick=""
               href="#" id="blr" style="text-align:left;  border-bottom: 2px solid #FFCC33;">
                  xxxxxxxx xxxxxxxxx xxxxxxxxx
               </a>
            </li>
              <li>
               <a onfocus="" href="#"
               onclick=""
               id="blr" style="text-align:left;  border-bottom: 2px solid #FFCC33;">
                  xxxxxxxxxxxxx xxxxxxxx
               </a>
            </li>
            <li>
               <a onfocus="" href="#"
               onclick="" target="" id="blr" style="text-align:left;">
                  xxxxxxxx xxxxxxxxxxx
               </a>
            </li>
         </ul>
      </li>
   </ul>


Weiss vllt. dazu jmd. Rat?
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 07.04.2009, 17:23

Nicht mal eine Idee? Ist wirklich wichtig!
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon Laus » 07.04.2009, 17:56

Hallo

Du solltest deine Seite online stellen dann kann man dein Problem eher nachvollziehen.
So ist man auf eigene Basteleien angewiesen und das funktioniert in den wenigsten fällen richtig.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 09.04.2009, 18:11

Hier ist das gute Stück. Vom Aufbau soll die Seite genau so sein. Leider funktioniert das Dropdown-Menü nicht mit Frames, oder ich weiss zumindest nicht, wie es geht.
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben

Re: 4 Divs mit fester und dynamischer Breite

Beitragvon ronjambo » 13.04.2009, 15:02

Nur, um das hier nochmals ins Gedächtnis zu rufen...
ronjambo
neu hier
 
Beiträge: 12
Registriert: 05.09.2008, 16:37
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "4 Divs mit fester und dynamischer Breite"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de