✔ immer das gleiche - CSS Layout Problem

Status
Nicht offen für weitere Antworten.
S

setcookie

Grünschnabel
Hallo,

also will folgendens Layout realisieren ein Header Bereich als ein DIV mit 100% Weite - kein Problem. Darunter 3 Div Boxen nebeneinander mit fixer Breite von 300px die wenn das Browser Fenster kleiner als 900 px, ... NICHT umbrechen - Problem. und darunter wieder ein Footer als DIV mit 100% Weite - eigentlich kein Problem.

So, .. wenn ich die 3 Boxen nebeneinander floate dann brechen die Boxen, ziehe ich den Browser kleiner, irgendwann um - ist auch im Prinzip durch die Notation float:left klar oder kann man das irgendwie verhindern das es kein umbrechen gibt sondern der horizontale Browser Scrollbalken dafür einspringt?

Verzichte ich auf floaten und nehmen absolute angaben über position:absolute, für die 3 Boxen mit margin-left und so, hab ich das Problem das der Footer DIV nicht mehr unter den 3 Boxen dargestellt wird sondern unterhalb des Headers - ist auch klar weil die 3 Boxen ja absolut sind und keine Höhenangaben wegen dynamischer Höhe haben.

Also wie schaff ich das jetzt am besten. wenn ich das kapiere kann ich das für andere layouts gut gebrauchen. Was ist denn erfolgsversprechender floaten oder absolut?

Bin für jeden Tip dankbar


gruß

s*
 
hallo!

was für einen browser verwendest du?

ich würde keine 3 ID's mit fixer breite nehmen. die beiden äußeren ja, den mittleren nicht.

lg.

napsi
 
Hi,

richte für das Gesamtlayout einfach mit der min-width-Eigenschaft eine Mindestbreite ein, so lässt es sich beim Runterskalieren der Fensterbreite nur bis zu diesem Punkt "zustammenstauchen" und die floatenden Boxen werden nicht umgebrochen, wird die Fensterbreite dann weiter verkleinert, erscheint der horizontale Scrollbalken.

Für die Vorgängerversionen des IE7 wäre ein Workaround erforderlich, wie ihn z.B. Stu Nicholls mit http://www.cssplay.co.uk/boxes/minwidth.html vorstellt, da sie diese CSS-Eigenschaft nicht unterstützen.

mfg Maik
 
Hallo,

das mit den Floaten ist immer so eine Sache und hat mir auch schon nerven gekostet. Ich finde das Floaten besser ist als absolute Position. Floaten passen sich besser an. Schade ist nur das ich beim Floaten nichts vergessen darf zb. das Fixen, oder die Hacks für die Unterschiedlichen Browser. (Bulletproof)

Wenn du noch Interesse hast, schicke ich dir als PM mal ne CSS. Dann siehst du wie ich das so mache...

LG, Marc
 
logo interesse! ich hab das auch mit floaten versucht und halte das auch für sinnvoll. die min-width alternative für das floaten klingt ganz gut und ich bin da noch dran! position absolute, glaub ich auch, kann für sowas nicht optiomal sein!
 
Kleines Beispiel gefällig? Bitte schön:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_setcookie</title>

<style type="text/css">
<!--
div#wrapper {
width:100%;
min-width:900px;
border:1px solid #000;
}

div#leftCol {
float:left;
width:300px;
background:#aaa;
}

div#centerCol {
float:left;
width:300px;
background:#ccc;
}

div#rightCol {
float:left;
width:300px;
background:#aaa;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="leftCol">leftCol</div>
     <div id="centerCol">centerCol</div>
     <div id="rightCol">rightCol</div>
</div>

</body>
</html>
mfg Maik
 
Achja, die Vorgänger des IE7 sind in diesem Beispiel nicht berücksichtigt, was ihre mangelnde min-width-Unterstützung betrifft.

Den Link zum Workaround hab ich ja schon heute Morgen erwähnt.

mfg Maik
 
Mein vorschreiber hat doch ein guten Ansatz - den kenn ich irgendwo her? :D

Ich gebe der Seite mehr Spielraum mit zb.

min-width: 600px;
max-widh: 1400px;

Die Größen von den Divcontainer würde ich in Prozent angeben. Also Linker Container 70% und Rechter 30%, IE-Fix nicht vergessen. Auch die Schriften würde ich mit x-large und so weiter bestimmen. Macht sich dann gut wenn die Seite vergrößert werden muss.

PHP: 
body {
margin:0;
padding:0;
font-family: Verdana, sans-serif;
font-size: small;
background:#fff;
}


/*layout*/

#warp {
min-width:500px;
max-width:1400px;
background: #fff url(img/rap-bg.png) repeat-y 70% 0;
}

#content {
float:left;
width:70%;
font-size: 95%;
line-height: 1.5em;
color:#33;
background:#FFFFFF;
}

#sidebar {
float:right;
width:30%
}

#footer {
clear:both;
color:#FFFFFF;
padding:5px;
text-align:center;
background: #17141b url(img/er-bg.png) repeat-x top left;
}

#footer p {
margin:0;
padding-left: 25px;
font-size: 85%;
color #fff;
}

#footer a {
text-decoration:none;
color:#fff;
}
/*Header */

#header {
border-bottom: 0px dotted #000;
background: #fff url(img/bg.png) repeat-x top left;
}

#header h1 {
margin:0;
padding: 25px;
font-family:Georgia, serif;
font-size:150%;
color: #000;
background: url(img/logo.png) no-repeat top right;
}

Und so sieht der Fix aus:

PHP: 
/*Hacks for IE, MAC and co */

#footer { height:1%;}
* html #footer { height:1%;}
* html dl.feature {height:1%;}
dl.feature {display:inline-table;}
* html dl.feature {height: 1%;}
dl.feature {display:block;}

Ja ich hoffe das dir das ein bisschen geholfen hat. Wie du vielleicht mitbekommen hast, ich lege wert auf Kugelsicheres Webdesign.

LG
 
Es führen bekanntermaßen viele Wege nach Rom, aber das Grundprinzip der min-width-Anwendung dürfte schon aus meinem Beispiel klar hervorgehen.

mfg Maik
 
Ja Maik, ich will dir auch dein Platz nicht streitig machen, verdammt. Und ich habe dich auch erwähnt, als Vorschreiber... Und da ich mich angeboten habe ein Beispiel vorzutragen, wirst du mir das wohl lassen können.

...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück