LastBoyScout: Liquid- Design mit 4 div Containern

SELF-Forum

Liquid- Design mit 4 div Containern

LastBoyScout
– Informationen zu den Bewertungsregeln

Hallo,

Ich möchte ein Design mit 4 Bereichen (jeweils 2 div nebeneinander) erstellen, wobei nur der 1. Container eine feste breite und höhe hat und die anderen den restlichen Platz des Browserfensters mit einem Außenabstand zu 100% ausfüllen sollen:

111 222222222222222222222
111 222222222222222222222

333 444444444444444444444
333 444444444444444444444
333 444444444444444444444
333 444444444444444444444
333 444444444444444444444
333 444444444444444444444
333 444444444444444444444
333 444444444444444444444
333 444444444444444444444
333 444444444444444444444

Leider bekomme ich das mit den Prozentualen angaben und den Beziehungen der Elemente mit position:absolut; und position:relative; irgendwie nicht richtig gebacken.

Entweder die Elemente schießen um den Versatz der Startposition auf der anderen Seite über das Ziel hinaus, oder sie füllen den Bereich nicht vollständig aus.

Wie muss ich das anstellen um die Anzeige mit allen Browsern zu ermöglichen?

Hab schon 2 Stunden lang alle erdenklichen Varianten Ausprobiert aber finde die richtige Kombination aus Verschachtelung und Einstellungen leider nicht.

Schon mal Dank für eure Hilfe,
Gruß
LBS

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Liquid- Design mit 4 div Containern

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hab schon 2 Stunden lang alle erdenklichen Varianten Ausprobiert aber finde die richtige Kombination aus Verschachtelung und Einstellungen leider nicht.

    packe alle elemente in ein gemeinsames elternelement (eigentlich sollte body dafür reichen

    dieses element bekommt an den gewünschten seiten einen aussen- oder innenabstand, alle anderen elemente werden dann negativ aus ihm rausverschoben - das ist eine ziemlich lästige spielerei und wird ggf im ie6 oder 7 nicht richtig funktionieren (da musst du dann mit conditional comments nachhelfen

    ich hab sowas irgendwann schon mal gebaut zum herumspielen, finde das aber leider grade nicht

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Liquid- Design mit 4 div Containern

      LastBoyScout
      – Informationen zu den Bewertungsregeln

      ich hab sowas irgendwann schon mal gebaut zum herumspielen, finde das aber leider grade nicht

      Ich hab´s jetzt so getestet, aber auch das Funktioniert nicht:

      body {border: 1px black solid;  
 background: url(hintergrund.jpg) repeat-x left top;  
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
 font-size: 13px;  
 color: #333333;  
 margin: 0;  
 padding: 20px;  
 width: 100%;  
 height: 100%;  
 position: relative;  
}  
  
#1 {  
 position: absolute;  
 width: 150px;  
 height: 165px;  
 margin: 0 auto;  
 background: url(logo.png) no-repeat left top;  
}  
  
  
#2 {border: 1px blue solid;  
 position: absolute;  
 left: 160px;  
 width: 100%;  
 height: 165px;  
 margin: 0 auto;  
}  
  
#3 {border: 1px green solid;  
 position: absolute;  
 top: 175px;  
 width: 150px;  
 height: 100%;  
 margin: 0 auto;  
}  
  
#4 {border: 1px yellow solid;  
 position: absolute;  
 top: 175px;  
 left: 160px;  
 width: 100%;  
 height: 100%;  
 margin: 0 auto;  
}

      <body>  
<div id="1"></div>  
<div id="2"></div>  
<div id="3"></div>  
<div id="4"></div>  
</body>

      Ich weis nun nicht mehr weiter.....

      So etwas muss es doch schon geben oder?

      LBS

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Liquid- Design mit 4 div Containern

        fr@gma
        – Informationen zu den Bewertungsregeln

        Hallo LBS,

        Du brauchst wahrscheinlich ein Hilfsdiv, etwa so hier:

        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Unbenanntes Dokument</title>
        <style type="text/css">
        <!--
        body {
         width: 100%;
         margin: 0px;
         padding: 0px;
        }
        #test01 {
         background-color: #990000;
         position: relative;
         margin-left: 200px;
         width: auto;
        }
        #test {
         background-color: #FF0000;
         position: absolute;
         height: 160px;
         width: 100%;
         left: auto;
         top: 100px;
         right: auto;
        }
        -->
        </style>
        </head>

        <body>
        <div id="test01">
        <div id="test"></div>
        </div>
        </body>
        </html>

        Ich hoffe, ich habe Dich richtig verstanden?!

        LG fr@gma

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Liquid- Design mit 4 div Containern

          LastBoyScout
          – Informationen zu den Bewertungsregeln

          Ich hoffe, ich habe Dich richtig verstanden?!

          Ich hab es auch mit solchen "Hilfs-div" probiert, aber auch da schießen die inneren nach unten und rechts über das Ziehl hinaus!

            
<?xml version="1.0"?>  
<!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>  
<title>Liquid- Design mit 4 div Containern</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
body {border: 1px black solid;  
 background: url(hintergrund.jpg) repeat-x left top;  
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
 font-size: 13px;  
 color: #333333;  
 margin: 0;  
 padding: 20px;  
 width: 100%;  
 height: 100%;  
 position: absolute;  
}  
  
#head {border: 1px red dotted;  
 position: static;  
 width: 100%;  
 height: 165px;  
 padding: 5px;  
}  
  
#logo {border: 1px black solid;  
 position: relative;  
 width: 150px;  
 height: 165px;  
 padding: 5px;  
 background: url(logo.png) no-repeat left top;  
  float: left;  
}  
  
#banner {border: 1px blue solid;  
 position: relative;  
 width: 100%;  
 height: 165px;  
 margin-left: 150px;  
 padding: 5px;  
}  
  
#body {border: 1px red dashed;  
 position: static;  
 width: 100%;  
 height: 100%;  
 padding: 5px;  
}  
  
#menue {border: 1px green solid;  
 position: relative;  
 width: 150px;  
 height: 100%;  
 padding: 5px;  
 float: left;  
}  
  
#inhalt {border: 1px yellow solid;  
 position: relative;  
 width: 100%;  
 height: 100%;  
 margin-left: 150px;  
 padding: 5px;  
}  
-->  
</style>  
</head>  
  
<body>  
<div id="head">  
 <div id="logo">Logo</div>  
 <div id="banner">Banner</div>  
</div>  
<div id="body">  
 <div id="menue">Menü</div>  
 <div id="inhalt">Inhalt</div>  
</div>  
</body>  
</html>

          Wie bekomme ich das bloß hin?

          Irgendeine Lösung muss es da doch geben!

          Oder bin ich wirklich gezwungen statt dem dynamischen ausfüllen des gesamten Browserfenster mit 100% eine feste Breite zu Verwenden und so den restlichen Platz ungenutzt zu verschwenden?

          LBS

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Liquid- Design mit 4 div Containern

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        So etwas muss es doch schon geben oder?

        ich habs mir jetzt nicht im detail angesehen, aber du haste ein <http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name@title=problem mit deinen ids>

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Liquid- Design mit 4 div Containern

          LastBoyScout
          – Informationen zu den Bewertungsregeln

          ich habs mir jetzt nicht im detail angesehen, aber du haste ein problem mit deinen ids

          Die Zahlen hab ich nur hier schnell zur Veranschaulichung verwendet, in Wirklichkeit nutze ich natürlich Bezeichnungen wie logo, banner usw.

          Hab´s aber leider noch immer nicht gelöst, möchte ja ungern eine div- Suppe mit unzähligen verschachtelten Containern draus machen!?

          LSB

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Liquid- Design mit 4 div Containern

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich möchte ein Design mit 4 Bereichen (jeweils 2 div nebeneinander) erstellen, wobei nur der 1. Container eine feste breite und höhe hat und die anderen den restlichen Platz des Browserfensters mit einem Außenabstand zu 100% ausfüllen sollen:

    111 222222222222222222222
    111 222222222222222222222

    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444
    333 444444444444444444444

    Das ist ein Tabellenlayout, das wirst du so nur mit Schwierigkeiten und vermutlich nich in allen Browsern hinkriegen.

    Und selbst, wenn du das Grundgerüst hinbekommst, wirst du mit Sicherheit irgendwann Schwierigkeiten mit dem Inhalt kriegen.

    Ich würd auf ein Tabellenlayout verzichten und ein wirklich fliessendes CSS Layout entwickeln. das ist schon schwierig genug, wenn du erstmal mit den zahlreichen Bugs im IE konfrontiert wirst.

    Struppi.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Liquid- Design mit 4 div Containern

      LastBoyScout
      – Informationen zu den Bewertungsregeln

      Das ist ein Tabellenlayout, das wirst du so nur mit Schwierigkeiten und vermutlich nich in allen Browsern hinkriegen.

      Und selbst, wenn du das Grundgerüst hinbekommst, wirst du mit Sicherheit irgendwann Schwierigkeiten mit dem Inhalt kriegen.

      Ich würd auf ein Tabellenlayout verzichten und ein wirklich fliessendes CSS Layout entwickeln. das ist schon schwierig genug, wenn du erstmal mit den zahlreichen Bugs im IE konfrontiert wirst.

      Ich hab es jetzt zwischenzeitlich so weit, das die Breite des Browserfenster voll ausgefüllt wird, nichts überschneidet, überlappt und auch die zwischen- und Randabstände passen.
      Lösung: Hilfsdiv nebeneinander angeordnet satt untereinander...

        
#links {border: 1px red dotted;  
 position: absolute;  
 width: 150px;  
}  
  
#rechts {border: 1px red dotted;  
 position: relative;  
 margin-left: 160px;  
}

      Die Höhe bleibt allerdings unterschiedlich und ist vom Inhalt abhängig (Menüleiste sollte ja auch bis unten reichen), aber damit kann ich als Kompromiss leben.

      LBS

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln