 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Bender_78
Threadersteller
Dabei seit: 11.01.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 11.01.2009 16:13
Titel DIV nebeneinander statisch UND dynamisch? |
  |
|
Servus,
ich habe ein mittleres Problem bei der Programmierung meiner Seite (CSS):
Im groben ist es ein 3x3-DIV-Layout (soll das ganze Fenster nutzen), bei dem die untere "Zeile" und die rechte "Spalte" jeweils den "Rest" der Bildschirmauflösung betragen sollen, die ich ja nicht kenne.
Ein Beispiel:
Links: feste Breite, z.B. 300 px
Mitte: feste Breite, z.B. 500 px
Rechts: der restliche Bildschirm bis zum Fensterrand
In der Höhe ebenfalls:
Oberste Reihe: feste Höhe, 150px;
Mittlere Reihe: feste Höhe, 500px;
Unterste Reihe: der Rest bis zum Fensterrand
Ein Bild zum Veranschaulichen:
Habe versucht, das Problem anzugehen und finde aber als bislang einzigen Ausweg "height:100%" bzw "width:100%" in Kombination mit "overflow:hidden".
Es funktioniert, ist aber zum einen unsauber und vor allem ist jetzt das Problem da, dass bei kleinerem Browserfenster die Scrollbalken fehlen und man nichts mehr sieht 
Irgend welche Ideen, wie ich das lösen könnte?
Vielen Dank im Vorraus!
|
|
| |
  |
 |
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 11.01.2009 19:39
Titel
|
|
|
Hi,
für die modernen Browser ist das kein Problem,
einfach alles absolut festtackern:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fixedOne</title>
<style type="text/css">
<!--
BODY {
margin:0;
padding:0;
}
DIV#headerLeft,
DIV#headerMain {
position:absolute;
top:0;
height:150px;
}
DIV#headerLeft {
left:0;
width:300px;
background:red;
}
DIV#headerMain {
left:300px;
right:0;
background:blue;
min-width:500px;
}
DIV#contentLeft,
DIV#contentMain,
DIV#contentRight {
position:absolute;
top:150px;
height:500px;
}
DIV#contentLeft {
left:0;
width:300px;
background:purple;
}
DIV#contentMain {
left:300px;
width:500px;
background:green;
}
DIV#contentRight {
left:800px;
right:0;
background:brown;
}
DIV#footerLeft,
DIV#footerMain,
DIV#footerRight {
position:absolute;
top:650px;
bottom:0;
min-height:100px;
}
DIV#footerLeft {
left:0;
width:300px;
background:cyan;
}
DIV#footerMain {
left:300px;
width:500px;
background:yellow;
}
DIV#footerRight {
left:800px;
right:0;
background:black;
}
-->
</style>
<!--[if lt IE 7]>
<script type="text/javascript" src="ltie7.js">
// Dean Edwards IE7.js goes here
// http://dean.edwards.name/IE7/
</script>
<![endif]-->
</head>
<body>
<div id="headerLeft"> </div>
<div id="headerMain"> </div>
<div id="contentLeft"> </div>
<div id="contentMain"> </div>
<div id="contentRight"> </div>
<div id="footerLeft"> </div>
<div id="footerMain"> </div>
<div id="footerRight"> </div>
</body>
</html>
|
Für den IE6 ginge diese Layout nur über Javascript. Der
einfachheithalber den IE7.js Dean Ewards verwenden.
Gruß
Zweitaccount
|
|
| |
|
|
|
Anzeige
|
|
|
| |
|
|
| Ähnliche Themen |
startseite statisch --> verlinkt auf wp
JS: dynmischen Wert in Variable statisch machen?
DIV nebeneinander
Deutschlandkarte Dynamisch?
IE 7 Liste nebeneinander
2 div-bereiche nebeneinander...
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
