matt_dominik
Grünschnabel
Hallo,
Ich suche nun berreits zwei Tage nach einer Lösung.
Ich will ein div-layout erstellen bis dahin klappt alles sehr gut. Nun möchte ich allerdings das die Navigationen (#mod_left und #mod_right) sich der höhe von #content_wrapper und umgekehr sich anpassen. Hat hier irgendeiner eine Lösung?
Hier mein Code:
schoneinmal dankeschön im vorraus.
gruß
Dominik Matt
Ich suche nun berreits zwei Tage nach einer Lösung.
Ich will ein div-layout erstellen bis dahin klappt alles sehr gut. Nun möchte ich allerdings das die Navigationen (#mod_left und #mod_right) sich der höhe von #content_wrapper und umgekehr sich anpassen. Hat hier irgendeiner eine Lösung?
Hier mein Code:
HTML:
<head>
<title></title>
<style type="text/css">
body {
font-family: serif;
font-size: 15px;
background-color: #fff;
color: #000;
padding: 10px 0 0 0;
margin: 0px 200px 0px 200px;
}
#main_wrapper {
border: 1px solid #000000;
width: 1024px;
background-color: #808080;
margin: 0px 200px 0px 200px;
}
#header {
border-top: 0px solid #000000; /* Rahmen-oben: größe | art | Farbe */
border-bottom: 1px solid #000000; /* Rahmen-unten: größe | art | Farbe */
border-left: 0px solid #000000; /* Rahmen-links: größe | art | Farbe */
border-right: 0px solid #000000; /* Rahmen-rechts: größe | art | Farbe */
height: 150px;
width: 100%;
background-color: #3366FF;
}
#container_wrapper {
border: 1px solid #000000;
height: auto !important;
height: 300px;
min-height: 300px;
}
#mod_header_top {
border-top: 0px solid #000000; /* Rahmen-oben: größe | art | Farbe */
border-bottom: 1px solid #000000; /* Rahmen-unten: größe | art | Farbe */
border-left: 0px solid #000000; /* Rahmen-links: größe | art | Farbe */
border-right: 0px solid #000000; /* Rahmen-rechts: größe | art | Farbe */
width: 100%;
height: auto !important;
margin: 0px;
padding: 0px;
background-color: #969696;
}
#mod_header_bottom {
border-top: 0px solid #000000; /* Rahmen-oben: größe | art | Farbe */
border-bottom: 1px solid #000000; /* Rahmen-unten: größe | art | Farbe */
border-left: 0px solid #000000; /* Rahmen-links: größe | art | Farbe */
border-right: 0px solid #000000; /* Rahmen-rechts: größe | art | Farbe */
width: 100%;
height: auto !important;
margin: 0px;
padding: 0px;
background-color: #969696;
}
#mod_left {
border-top: 0px solid #000000; /* Rahmen-oben: größe | art | Farbe */
border-bottom: 0px solid #000000; /* Rahmen-unten: größe | art | Farbe */
border-left: 0px solid #000000; /* Rahmen-links: größe | art | Farbe */
border-right: 1px solid #000000; /* Rahmen-rechts: größe | art | Farbe */
height: auto !important;
min-height: 500px;
float: left;
width: 200px;
background-color: #808080;
margin:0px;
}
#mod_right {
border-top: 0px solid #000000; /* Rahmen-oben: größe | art | Farbe */
border-bottom: 0px solid #000000; /* Rahmen-unten: größe | art | Farbe */
border-left: 1px solid #000000; /* Rahmen-links: größe | art | Farbe */
border-right: 0px solid #000000; /* Rahmen-rechts: größe | art | Farbe */
height: auto !important;
min-height: 500px;
width: 200px;
background-color: #808080;
float: right;
margin:0px;
}
#content_wrapper {
border: 0px solid #000000;
overflow: hidden;
background-color: #CCFFCC;
margin: 0px 200px 0px 200px;
width: 620px;
height: 100%;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="mod_header_top">#mod_header_top</div>
<div id="header">#header</div>
<div id="mod_header_bottom">#mod_header_bottom</div>
<div id="container_wrapper">
<div id="mod_left">#mod_left</div>
<div id="mod_right">#mod_right<br /><br /><br /><br /><br />test
<br /><br /><br /><br /><br />test
<br /><br /><br /><br /><br />test
<br /><br /><br /><br /><br />test
<br /><br /><br /><br /><br />test
<br /><br /><br /><br /><br />test
<br /><br /><br /><br /><br />test
<br /><br /><br /><br /><br />test</div>
<div id="content_wrapper">#content_wrapper</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>schoneinmal dankeschön im vorraus.
gruß
Dominik Matt
Zuletzt bearbeitet:
