nemesis-artgroup.de
Hallo Ihr Lieben,
ich brauch mal eure Hilfe.
Ein Kunde treibt mich mal wieder in den Wahnsinn
folgendes Layout:
Ursprungsauftrag lautete: Layout mit fester Breite, flex. Höhe, zentriert...kein Problem...hab ich gemacht...lief alles wunderbar...
nun hätte Kunde jedoch gern genau dieses Layout in flexibler Breite .... *planlosguck
Weiterer wunderbarer Wunsch ist, dass die Höhe nun auch fest sein soll....soll heißen, Header und Footer immer sichtbar und Contentbereich mit Scrollbalken...aber nur der rechte, also Content 2 ....die Sidebar rechts soll ebenfalls eine 100 %ige Höhe haben.
Versteht mich jemand? :uhm:
Lösungsvorschläge sind sehr gern gesehen, weil ich weiss nicht, wie ich an die Sache ran gehen soll.
der derzeitige Code wird nicht wirklich weiter helfen, aber dennoch...
ich brauch mal eure Hilfe.
Ein Kunde treibt mich mal wieder in den Wahnsinn
folgendes Layout:
Ursprungsauftrag lautete: Layout mit fester Breite, flex. Höhe, zentriert...kein Problem...hab ich gemacht...lief alles wunderbar...
nun hätte Kunde jedoch gern genau dieses Layout in flexibler Breite .... *planlosguck
Weiterer wunderbarer Wunsch ist, dass die Höhe nun auch fest sein soll....soll heißen, Header und Footer immer sichtbar und Contentbereich mit Scrollbalken...aber nur der rechte, also Content 2 ....die Sidebar rechts soll ebenfalls eine 100 %ige Höhe haben.
Versteht mich jemand? :uhm:
Lösungsvorschläge sind sehr gern gesehen, weil ich weiss nicht, wie ich an die Sache ran gehen soll.
der derzeitige Code wird nicht wirklich weiter helfen, aber dennoch...
Code:
html, body, h1, h2, h3, h4, ul, li {
margin:0;
padding:0;
}
img {
border:0 none;
}
a {
color:#464544;
}
a:hover {
color:#FFA405;
}
.clear {
clear:both;
}
body {
background:#FFFFFF none repeat scroll 0 0;
color:#464544;
font-family:arial,sans-serif;
font-size:12px;
text-align:center;
}
#wrapper {
margin:auto;
position:relative;
text-align:left;
width:900px;
}
#header {
background:transparent url(images/header.jpg) no-repeat scroll 0 0;
height:301px;
left:0;
position:absolute;
top:0;
width:711px;
}
#sidebar {
background:#5F6A75 none repeat scroll 0 0;
left:711px;
position:absolute;
top:4px;
width:180px;
padding-right:10px;
padding-left:10px;
padding-top:25px;
padding-bottom:25px;
}
#news {
background:#5F6A75 none repeat scroll 0 0;
color:#FFFFFF;
}
#standort {
background:#5F6A75 none repeat scroll 0 0;
color:#FFFFFF;
}
#content {
margin:0 0 0 0;
width:733px;
position:top left;
}
#spacer {
height:301px;
}
#left {
background-color:#FFFFFF;
border-right:2px solid #B3B3B3;
float:left;
margin-left:0;
margin-top:13px;
padding-right:10px;
width:160px;
}
#right {
background-image:url(images/bg.jpg);
background-position:right top;
background-repeat:no-repeat;
float:left;
margin-top:0;
min-height:250px;
*height:250px;
padding-left:10px;
padding-right:10px;
padding-top:15px;
width:514px;
}
.panorama {
margin-bottom:10px;
margin-left:0px;
margin-top:10px;
}
#rechts {
float:left;
padding-right:30px;
padding-top:10px;
}
#mehr {
margin-right:10px;
text-align:right;
}
#mehrsidebar {
margin-right:-5px;
text-align:right;
}
span {
color:#FAC424;
font-weight:bold;
}
#line {
background-image:url(images/line.jpg);
background-repeat:repeat-x;
height:2px;
margin-bottom:20px;
margin-top:20px;
text-align:center;
width:158px;
}
#bild {
margin-left:8px;
}
#inhalt {
margin:25px 10px 0;
width:685px;
}
#navlist {
border:medium none;
font-size:12px;
font-weight:normal;
letter-spacing:0;
margin-left:144px;
margin-top:102px;
padding-left:0;
text-transform:uppercase;
width:148px;
}
#navlist li {
border-bottom:1px solid #FFFFFF;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0.25em;
}
#navlist li a {
color:white;
text-decoration:none;
}
#navlist a:hover {
color:grey;
text-decoration:none;
}
#footer {
background:#FFFFFF none repeat scroll 0 0;
border-top:2px solid;
color:#B3B3B3;
font-size:11px;
margin-bottom:20px;
margin-left:0;
margin-top:20px;
padding:10px 0;
text-align:center;
width:100%;
}
#footer p {
margin:0;
padding:0;
}
HTML:
<!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" xml:lang="en" lang="en">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>xxx</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="modul.css" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="wrapper"><!-- TemplateBeginEditable name="sidebar" -->
<div id="sidebar">
<div id="news">
<img src="images/news.jpg" />
<?PHP include('http://xxxxxxxxxxxxxx/content.php?key=31d16f9aa6d064a579758789227c62a1&cs_mid=1');?>
</div>
<div id="line"></div>
<div id="standort">
<img src="images/standort.jpg" />
<p><img src="images/lkws.jpg"/></p>
~Lorem<br />
~ Ipsum<br />
~ Dolor<br />
~ Sit<br />
~ Amet
<div id="mehrsidebar"> <img src="images/mehr.jpg" /></div>
</div>
<div id="line"></div>
<div id="standort">
<p><img src="images/lkws.jpg"/></p>
<p><span>Consetetur sadi pscing elitr,</span>
sed dolores et ea consetetur eirmod Erat, sed diam voluptua dolores et ea consetetur pscing elitr.</p>
<p>Erat, sed diam voluptua dolores et ea consetetur </p>
<div id="mehrsidebar"> <img src="images/mehr.jpg" /></div>
</div>
</div>
<!-- TemplateEndEditable -->
<div id="header">
<div id="navlist">
<ul>
<li><a href="index.php">Startseite</a></li>
<li><a href="produkte.php">Produkte</a></li>
<li><a href="service.php">Service</a></li>
<li><a href="technik.php">Technik</a></li>
<li><a href="mittel.php">Fördermittel</a></li>
<li><a href="kosten.php">Energiekosten</a></li>
<li><a href="lexikon.php">Energielexikon</a></li>
<li><a href="fragen.php">Fragen & Antworten</a></li>
</ul>
<div class="clear"> </div>
</div><!--end nav-->
</div><!--end header-->
<div id="spacer"> </div>
<!-- TemplateBeginEditable name="content" -->
<div id="content">
<div id="inhalt">
</div> <!-- TemplateEndEditable -->
</div><!--end content-->
<div id="footer">
Startseite | über uns | Leistungen | Service | Kontakt | Impressum <br />
xxxxxxxxx
</div>
</div> <!--end wrapper-->
</body>
</html>
grandios, dafür habe ich sogar mehrere Möglichkeiten gefunden. Leider keine die in nem anderen Browser funzt...
