PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Shop
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Contest-Bereich - 2D, 3D & Fotografie
2D-Contests - Monatscontests, User-Battles, ...
Problemlayout - Content soll feste Höhe haben und mehr
Beitrag
<blockquote data-quote="Tattoomaus78" data-source="post: 705443" data-attributes="member: 10018"><p>Hallo Ihr Lieben,</p><p></p><p>ich brauch mal eure Hilfe.</p><p></p><p>Ein Kunde treibt mich mal wieder in den Wahnsinn <img src="/styles/default/xenforo/smilies/motz.gif" class="smilie" loading="lazy" alt=":motz:" title="Motz :motz:" data-shortname=":motz:" /></p><p></p><p>folgendes Layout:</p><p></p><p></p><p></p><p>Ursprungsauftrag lautete: Layout mit fester Breite, flex. Höhe, zentriert...kein Problem...hab ich gemacht...lief alles wunderbar...</p><p></p><p>nun hätte Kunde jedoch gern genau dieses Layout in flexibler Breite .... *planlosguck</p><p></p><p>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.</p><p></p><p>Versteht mich jemand? :uhm:</p><p></p><p>Lösungsvorschläge sind sehr gern gesehen, weil ich weiss nicht, wie ich an die Sache ran gehen soll.</p><p></p><p></p><p>der derzeitige Code wird nicht wirklich weiter helfen, aber dennoch...</p><p></p><p>[CODE]html, body, h1, h2, h3, h4, ul, li {</p><p>margin:0;</p><p>padding:0;</p><p>}</p><p></p><p>img {</p><p>border:0 none;</p><p>}</p><p></p><p>a {</p><p>color:#464544;</p><p>}</p><p></p><p>a:hover {</p><p>color:#FFA405;</p><p>}</p><p></p><p>.clear {</p><p>clear:both;</p><p>}</p><p></p><p>body {</p><p>background:#FFFFFF none repeat scroll 0 0;</p><p>color:#464544;</p><p>font-family:arial,sans-serif;</p><p>font-size:12px;</p><p>text-align:center;</p><p>}</p><p></p><p>#wrapper {</p><p>margin:auto;</p><p>position:relative;</p><p>text-align:left;</p><p>width:900px;</p><p>}</p><p></p><p>#header {</p><p>background:transparent url(images/header.jpg) no-repeat scroll 0 0;</p><p>height:301px;</p><p>left:0;</p><p>position:absolute;</p><p>top:0;</p><p>width:711px;</p><p>}</p><p></p><p>#sidebar {</p><p>background:#5F6A75 none repeat scroll 0 0;</p><p>left:711px;</p><p>position:absolute;</p><p>top:4px;</p><p>width:180px;</p><p>padding-right:10px;</p><p>padding-left:10px;</p><p>padding-top:25px;</p><p>padding-bottom:25px;</p><p>}</p><p></p><p>#news {</p><p>background:#5F6A75 none repeat scroll 0 0;</p><p>color:#FFFFFF;</p><p>}</p><p></p><p>#standort {</p><p>background:#5F6A75 none repeat scroll 0 0;</p><p>color:#FFFFFF;</p><p>}</p><p></p><p>#content {</p><p>margin:0 0 0 0;</p><p>width:733px;</p><p>position:top left;</p><p></p><p>}</p><p>#spacer {</p><p>height:301px;</p><p>}</p><p></p><p>#left {</p><p>background-color:#FFFFFF;</p><p>border-right:2px solid #B3B3B3;</p><p>float:left;</p><p>margin-left:0;</p><p>margin-top:13px;</p><p>padding-right:10px;</p><p>width:160px;</p><p>}</p><p>#right {</p><p>background-image:url(images/bg.jpg);</p><p>background-position:right top;</p><p>background-repeat:no-repeat;</p><p>float:left;</p><p>margin-top:0;</p><p>min-height:250px;</p><p>*height:250px;</p><p>padding-left:10px;</p><p>padding-right:10px;</p><p>padding-top:15px;</p><p>width:514px;</p><p>}</p><p>.panorama {</p><p>margin-bottom:10px;</p><p>margin-left:0px;</p><p>margin-top:10px;</p><p>}</p><p></p><p>#rechts {</p><p>float:left;</p><p>padding-right:30px;</p><p>padding-top:10px;</p><p>}</p><p>#mehr {</p><p>margin-right:10px;</p><p>text-align:right;</p><p>}</p><p>#mehrsidebar {</p><p>margin-right:-5px;</p><p>text-align:right;</p><p>}</p><p>span {</p><p>color:#FAC424;</p><p>font-weight:bold;</p><p>}</p><p>#line {</p><p>background-image:url(images/line.jpg);</p><p>background-repeat:repeat-x;</p><p>height:2px;</p><p>margin-bottom:20px;</p><p>margin-top:20px;</p><p>text-align:center;</p><p>width:158px;</p><p>}</p><p></p><p>#bild {</p><p>margin-left:8px;</p><p>}</p><p></p><p>#inhalt {</p><p>margin:25px 10px 0;</p><p>width:685px;</p><p>}</p><p></p><p>#navlist {</p><p>border:medium none;</p><p>font-size:12px;</p><p>font-weight:normal;</p><p>letter-spacing:0;</p><p>margin-left:144px;</p><p>margin-top:102px;</p><p>padding-left:0;</p><p>text-transform:uppercase;</p><p>width:148px;</p><p>}</p><p></p><p>#navlist li {</p><p>border-bottom:1px solid #FFFFFF;</p><p>list-style-image:none;</p><p>list-style-position:outside;</p><p>list-style-type:none;</p><p>margin:0;</p><p>padding:0.25em;</p><p>}</p><p></p><p>#navlist li a {</p><p>color:white;</p><p>text-decoration:none;</p><p>}</p><p></p><p>#navlist a:hover {</p><p>color:grey;</p><p>text-decoration:none;</p><p>}</p><p></p><p>#footer {</p><p>background:#FFFFFF none repeat scroll 0 0;</p><p>border-top:2px solid;</p><p>color:#B3B3B3;</p><p>font-size:11px;</p><p>margin-bottom:20px;</p><p>margin-left:0;</p><p>margin-top:20px;</p><p>padding:10px 0;</p><p>text-align:center;</p><p>width:100%;</p><p>}</p><p></p><p>#footer p {</p><p>margin:0;</p><p>padding:0;</p><p>}[/CODE]</p><p></p><p>[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></p><p><head></p><p><!-- TemplateBeginEditable name="doctitle" --></p><p><title>xxx</title></p><p><!-- TemplateEndEditable --></p><p><meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1"/></p><p><link rel="stylesheet" href="style.css" type="text/css" /></p><p><link rel="stylesheet" href="modul.css" type="text/css" /></p><p><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --></p><p></head></p><p><body></p><p><div id="wrapper"><!-- TemplateBeginEditable name="sidebar" --></p><p> <div id="sidebar"></p><p> <div id="news"></p><p> <img src="images/news.jpg" /> </p><p> <?PHP include('http://xxxxxxxxxxxxxx/content.php?key=31d16f9aa6d064a579758789227c62a1&cs_mid=1');?></p><p> </div></p><p> <div id="line"></div></p><p> <div id="standort"></p><p> <img src="images/standort.jpg" /></p><p> <p><img src="images/lkws.jpg"/></p></p><p> ~Lorem<br /></p><p> ~ Ipsum<br /></p><p> ~ Dolor<br /></p><p> ~ Sit<br /></p><p> ~ Amet</p><p> <div id="mehrsidebar"> <img src="images/mehr.jpg" /></div></p><p> </div></p><p> <div id="line"></div></p><p> <div id="standort"></p><p> <p><img src="images/lkws.jpg"/></p></p><p> <p><span>Consetetur sadi pscing elitr,</span> </p><p> sed dolores et ea consetetur eirmod Erat, sed diam voluptua dolores et ea consetetur pscing elitr.</p></p><p> <p>Erat, sed diam voluptua dolores et ea consetetur </p></p><p> <div id="mehrsidebar"> <img src="images/mehr.jpg" /></div></p><p> </div></p><p> </div></p><p><!-- TemplateEndEditable --></p><p> <div id="header"></p><p> <div id="navlist"></p><p> <ul></p><p> <li><a href="index.php">Startseite</a></li></p><p> <li><a href="produkte.php">Produkte</a></li></p><p> <li><a href="service.php">Service</a></li></p><p> <li><a href="technik.php">Technik</a></li></p><p> <li><a href="mittel.php">F&ouml;rdermittel</a></li></p><p> <li><a href="kosten.php">Energiekosten</a></li></p><p> <li><a href="lexikon.php">Energielexikon</a></li></p><p> <li><a href="fragen.php">Fragen &amp; Antworten</a></li></p><p> </ul></p><p> <div class="clear"> </div></p><p> </div><!--end nav--></p><p> </div><!--end header--></p><p> <div id="spacer"> </div></p><p><!-- TemplateBeginEditable name="content" --></p><p> <div id="content"></p><p> <div id="inhalt"> </p><p> </div> <!-- TemplateEndEditable --></p><p> </p><p> </div><!--end content--></p><p> <div id="footer"></p><p> Startseite | &uuml;ber uns | Leistungen | Service | Kontakt | Impressum <br /></p><p> xxxxxxxxx</p><p> </div></p><p></div> <!--end wrapper--></p><p></body></p><p></html></p><p>[/HTML]</p></blockquote><p></p>
[QUOTE="Tattoomaus78, post: 705443, member: 10018"] Hallo Ihr Lieben, ich brauch mal eure Hilfe. Ein Kunde treibt mich mal wieder in den Wahnsinn :motz: 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; }[/CODE] [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> [/HTML] [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Der grüne Frosch hüpft über die Hügel an den Bäumen vorbei in die Höhle. Bitte nenne das fünfte Wort!
Antworten
Start
Forum
Contest-Bereich - 2D, 3D & Fotografie
2D-Contests - Monatscontests, User-Battles, ...
Problemlayout - Content soll feste Höhe haben und mehr
Oben