✔ "Halbflexibles" Layout

S

Superdok

Erfahrenes Mitglied
Hi,
ich hab vor ein Layout umzusetzen, welches teilweise flexibel und teilweise fest ist. Um das zu zeigen anbei ein Layout.
Der head hat 100% Breite des umliegenden divs, welches "60%" Breite vom Browserfenster haben soll, allerdings auch eine Mindestbreite. Das linke orangene div ist flexibel und ergänzt das rechte feste div mit fester Breite. Das linke div soll also die Lücke füllen.
Das Einzigste, was mir Probleme bereitet ist das linke div. Bisher bin ich so weit:
HTML: 
<div id="container">
  <div id="head"></div>
  <div id="content_right">asd</div>
</div>

Code: 
#container {
	width: 60%;
	min-width: 750px;
	background-color:#000000;	

}

#head {
	height: 200px;
	background-color:#ffffff;	
}

#content_right {
	background-color: #00FF00;	
	float:right;
	width: 515px;
}

Die Farben dienen nur dazu alles darzustellen.
 

Anhänge

  • ly.png
    ly.png
    5,4 KB · Aufrufe: 12
Hi,

mit diesem Markup:
HTML: 
<div id="container">
  <div id="head"></div>
  <div id="content_right">asd</div>
  <div id="flex">flex</div>
</div>

umfliesst #flex den rechten DIV-Block #content_right gemäß der float:right-Regel zu seiner linken Seite mit einem rechten Außenabstand, der dessen festgelegter Boxenbreite entspricht, und füllt so das Restmaß der verfügbaren Breite innerhalb von #container aus:
CSS: 
#flex {
margin-right:515px;
background:#E96D23;
}

mfg Maik
 
Danke, dies funktioniert bei mir aber nur teilweise richtig. Zwar lässt er einen Abstand nach rechts und füllt den übrigen Platz aus, aber der linke Container steht dann nicht mehr neben dem Rechten. Also zuerst kommt der Linke mit der richtigen Breite und dann kommt der Rechte mit der richtigen Breite. Allerdings sollen die beiden Container nebeneinander stehen. Ein "float:left" hilft auch nicht.
 
Vergleich mal meine HTML-Fassung mit deiner.

Das zu umfliessende Element (mit float formatiert), wird im Markup an erster Stelle genannt.

mfg Maik
 
Hi, ich hätte noch eine kleine Frage, die ich ectra stellen wollte, da sie zum selben Layout gehört.
In dem rechten div ist eine Liste, die mehrere kleinere Boxen darstellt mit einem Bild darin, also wie eine Art Webgalerie.

Code: 
<div id="container">
  <div id="head"></div>
  <div id="content_right">
    <ul id="clients">
      <li><a href=""><img src="images/1_logo.png" /></a></li>
      <li><a href=""><img src="images/22_logo.png" /></a></li>
      <li><a href=""><img src="images/3_logo.png" /></a></li>
    </ul>
  </div>
  <div id="content_left">Test</div>
</div>

Code: 
#container { width: 60%; min-width: 750px;}
#head {	height: 300px; }
#content_right { float:right; width: 515px; }
#content_left { margin-right:515px;	}
ul#clients li {	
	vertical-align: middle;	
	list-style-type: none;
	height: 90px;
	width: 90px;
	text-align:center; /* horizontale Zentrierung */
	float: left;	
	margin-bottom: 10px;
	margin-left: 10px;	
}

Die Bilder in den li Elementen sind von der Höhe und Breite flexibel, sollen aber trotzdem horizontal (funktioniert mit text-align bei mir) und vertikal zenrtiert in dem li Element stehen. Ich hab hier im Forum und bei google gesucht, habe im Forum das gleiche Problem entdeckt:
http://www.tutorials.de/forum/css/341818-bild-div-zentrieren.html

Nur leider komm ich bei dem Gespräch und der endgültigen Lösung nicht 100% mit und somit funktioniert bei mir die Version mit dem "display:table/table-cell" usw. nicht.geht das nur über die Umwege oder gibts keinen einfacheren Weg (da vertical-align ja hier nicht funktioniert) zu der Lösung zu kommen?
 
vertical-align:middle in Verbindung mit display:table-cell funktioniert hier, wenn die float:left-Regel für das <li>-Element entfernt wird.

Ansonsten trennst du diese Formatierungen voneinander:

CSS: 
ul#clients li {
        list-style-type: none;
        float: left;
        margin-bottom: 10px;
        margin-left: 10px;
}

ul#clients li a {
        vertical-align: middle;
        height: 90px;
        width: 90px;
        text-align:center; /* horizontale Zentrierung */
        display:table-cell;
}

Falls du hierbei IE6 und IE7 berücksichtigen möchtest, wirst du nicht um eine Erweiterung deines HTML-Codes herumkommen, da sie gegenüber dem aktuellen IE8 die Tabelleneigenschaften der display-Eigenschaft nicht interpretieren, und daher einen Workaround benötigen.

Hierzu kannst du den Quellcode der Beispiele http://www.pmob.co.uk/temp/vertical-align3.htm und http://www.pmob.co.uk/temp/vertical-align9.htm studieren.

mfg Maik
 
Danke, zwar hatte ich das mit dem display: table-cell; auch versucht, aber bei mir hat es nicht funktioniert, weil wie du sagtest die float:left eigenschaft das aus irgendwelchen Gründen auch immer verhindert hat
 
Ok nachdem ich gedacht habe alles funktioniert soweit, bin ich nun wieder auf ein Problem gestossen.

Im linken flexiblen Div sind weiter div Elemente, welche rechtsbündig in dem anderen div liegen sollen (float:right). Diese divs haben einen Hintergrund, welcher nur durch ein <div class="clear"></div> am Ende des divs komplett angezeigt werden. Wende ich allerdings ein clear:both; an, dann wird die linke Spalte gleich hoch gezogen wie die rechte Box hoch ist. Zum Veranschaulichen anbei ein Schema, wie das Endergebnis aussehen soll.

Aller Inhalt in dem linken grauen div in der linken Spalte ist rechtbündig. Der graue Hintergrund soll immer genauso breit sein wie die linke Spalte (flexibel).

Code: 
<div id="content_left" >
    <div id="client_info_container" >
      <div id="client_info" >
        <h1><img src="http://www.tutorials.de/forum/images/logo.png" alt="Logo" /></h1>
        Lorem Ipsum
        <hr />
        Weiterer Text
        <div id="timeline"><img src="http://www.tutorials.de/forum/images/august06.png" /></div>
      </div>
      <div class="clear"></div> 
    </div>
    <div id="case_study"><a href=""><img src="http://www.tutorials.de/forum/images/case_study.png" alt="Download" /></a></div>
  </div>

Code: 
.clear {
       clear:both;
}

#timeline {	
	margin-top: 10px;
	width: 210px;	
	height: 10px;
	padding: 10px;		
	background-color: #dad4a0;
}
#case_study {
	background-color: #5c594e;
	margin-top: 10px;
	text-align: right;	
}
#case_study a { padding: 7px; display: block; }
#client_info_container { background-color: #5c594e; padding: 10px; }
#client_info {
	text-align: right;
	width: 230px;
	float: right;
}
#client_info hr { background-color: #9b9667; height: 1px; margin: 5px 0 5px 0;}
#content_left { margin-right:515px;	}
#content_left h1 { margin-bottom: 10px; }

Ich hoffe ich hab nichts vergessen. Ohne "clear:both;" behebe ich das eine Problem mit der verlängerten Box, allerdings wird dann der Hintergrund nicht komplett angezeigt. ich hoffe es ist einigermaßen verständlich
 

Anhänge

  • final_schema.png
    final_schema.png
    24,4 KB · Aufrufe: 11
Damit die clear:both-Regel von den Browsern nicht an der falschen Stelle des Markups angewendet wird, müsste der linke Block #content_left ebenfalls mit einer float-Regel ausgezeichnet sein, was aber in deinem Konzept mit der flexiblen Breite für besagtes DIV nicht möglich ist.

Sowas nennt man dann im Fußball ein "Eigentor" ;-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück