|
|||
Container "verlängern"
Hi!
Ich habe angefangen meine Hp mit CSS zu gestalten. Natürlich möchte ich das Design der "Tabellenvorlage" beibehalten. Jetzt habe ich allerdings ein Problem: Auf http://sts.name ... ...werden die seitlichen Menüs automatisch bis zur untersten Zeile verlängert und auch weitergezogen, wenn ich eine Inhaltsseite aufrufe. Is ja klar, sind ja auch Spalten einer Tabelle. Bei meiner CSS Version auf http://ww8755.rw08.de/hola/2index.php ... ...dagegen werden die Menücontainer nicht verlängert. Is ja auch wiederrum klar, da ich ja keine Höhe definiert habe und sich die Höhe der Container nach dem Inhalt richtet. Ok, soweit so gut, wie krieg ich das jetzt hin, dass ich den selben Effekt wie bei einer Tabelle erziele, dass die Seitenmenüs automatisch mit der Höhe der Inhaltsseite konform gehen ? Gruß Xabbu PS: Momentan stelle ich nur die index.php auf CSS um, der Inhalt wird nach wie vor mit Tabellen dargestellt, innerhalb eines Containers natürlich. PPS: der Inhalt der style.css Code:
#links { width:115; line-height:40px; float:left; background-image: url(http://ww8755.rw08.de/hola/back.gif); border-left-style:dashed; border-left-width:thin; border-right-style:dashed; border-right-width:thin; border-color:#c9c9c9; clear:right; } #rechts { width:115; line-height:18px; float:right; background-image: url(http://ww8755.rw08.de/hola/back.gif); border-left-style:dashed; border-left-width:thin; border-right-style:dashed; border-right-width:thin; border-color:#c9c9c9; } #inhalt { float:justify; width:562; margin:10; } #titel { height:105px; width:818px; border-style:dashed; border-width:thin; border-color:#c9c9c9; } #titeloben { height:43px; width:820px; padding:0px; background-image: url(http://ww8755.rw08.de/hola/top.gif); } #titelunten { height:43px; width:820px; padding:0px; background-image: url(http://ww8755.rw08.de/hola/bottom.gif); border-top-style:dashed; border-top-width:thin; border-top-color:#c9c9c9; } #spec { border-style:solid; border-width:thin; border-color:#c9c9c9; background-color:#ffffff; width:105px; float:center; padding:0px; margin:0px 0px 0px 0px; } |
Sponsored Links |
|
|||
so einfach geht das nicht. du müsstest einen <div>-kontainer um menü und content haben, der die hintergrundeigenschaften beeinhaltet.
mit sowas hab ich allerdings auch ein problem: http://www.xhtmlforum.de/viewtopic.php?t=1478[/url] |
Sponsored Links |
|
|||
Könntest Du bitte einen vollständigen Code posten, so wie ulle das hier aufgeführt hat: http://www.xhtmlforum.de/viewtopic.php?t=1399
Wenn Du nur die CSS angibst ohne den HTML-Teil, dann kann man halt auch nicht sehen, wo das Problem ist. |
|
|||
das ist der code der index.php:
Code:
<html> <head> <LINK rel='stylesheet' type='text/css' href='holaDB/conf/stylesheets'> <meta name="description" content="philoskop"> <meta name="author" content="Stefan Schneider"> <meta name="generator" content="holaCMS"> <meta name="keywords" content="gedichte, geschichten, text, about, computer, links, download, free. pictures, bilder, gallery, gallerie, kostenlos, kunst, art, neu, new, nouveau, portal, stefan, schneider"> <meta http-equiv="Content-Type" content="text/html; charset=de"> <title>philoskop</title> <script language="JavaScript"> </script> </head> <body> <center> <div style="width:820" > <div id="titeloben" class="klein" align="center"> [ <a href="http://ww8755.rw08.de/hola" onFocus="this.blur()" target="_self" class="klein"> philoskop </a> ] </div> <div id="titel" align="center"> [img]http://ww8755.rw08.de/hola/main15.jpg[/img] </div> <div id="links" align="right"> home about books poetry spec. issue p. hirinja computer the rest guestbook <script language="JavaScript" src="http://www.hitmaster.de/hm3c.php?cid=155201"></script> <span class="ganzklein"> visitors</span> </div> <div id="rechts" align="left"> date and time <div style="margin:4px; margin-bottom:10px"> unix_ <span class="ganzganzklein"> 1089568364 </span> swatch_ <span class="ganzganzklein"> 786 </span> <span class="ganzganzklein"> CEST_ 07:52:44 pm 11/July/2004 </span> </div> spec. issue <div id="spec"> [img]http://ww8755.rw08.de/hola/holaDB/documents/news_right2.jpg[/img] [img]http://ww8755.rw08.de/hola/holaDB/documents/links_right.jpg[/img] [img]http://ww8755.rw08.de/hola/holaDB/documents/abi2006_rechts.jpg[/img] [img]http://ww8755.rw08.de/hola/holaDB/documents/tjc_right.jpg[/img] [img]http://ww8755.rw08.de/hola/holaDB/documents/graphics_right.jpg[/img] </div> </div> <div id="inhalt"> [img]s.gif[/img] <table width="450" border="0" cellpadding="0" align="center" class="normal" cellspacing="0"> <tr> <td class="groß"><center>Welcome to the philoskop </center></td> </tr> <tr> <td> <table width="450" border="0" cellpadding="5" cellspacing="5" class="normal"> <tr> <td class="normal"> <div align="center"> <iframe width="440" src="http://ww8755.rw08.de/corenews2/shownews.php" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" align="left" height="305"> Ihr Browser kann keine iframes anzeigen. Um diese Homepage in vollem Umfang betrachten zu können benötigen Sie einen Browser der iframes anzeigen kann. Ich empfehle: www.mozilla.org. </iframe></div> </td> </tr> </table> </td> </tr> </table> </div> <div id="titelunten" class="ganzklein" align="center"> [ url_ http://sts.name | <a onfocus="this.blur()" href="?content=imp" class="ganzklein"> imprint</a> | ads | admin | link us | sitemap ] </div> </div> </center> </body> </html> und die style.css nochmal: Code:
body { background-image:url(""); background-repeat:no-repeat; background-attachment:fixed; margin-top:0pt; margin-bottom:0pt; margin-left:0pt; margin-right:0pt; background-color:#ffffff; font-color:#000000 } a{text-decoration:none; color:#000000 } .normal { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000} .groß { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000} .klein { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000} .ganzklein { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000} .ganzganzklein { font-family: Verdana; font-size: 9px; font-style: normal; line-height: normal; font-weight: 100; font-variant: normal; color: #000000} .toptop { font-family: "Courier New"; font-size: 10px; font-weight: normal; color: #cccccc} #links { width:115; line-height:30px; float:left; padding:3px; background-image: url(http://ww8755.rw08.de/hola/back.gif); border-left-style:dashed; border-left-width:thin; border-right-style:dashed; border-right-width:thin; border-color:#c9c9c9; clear:right; } #rechts { width:115; float:right; padding:3px; background-image: url(http://ww8755.rw08.de/hola/back.gif); border-left-style:dashed; border-left-width:thin; border-right-style:dashed; border-right-width:thin; border-color:#c9c9c9; } #inhalt { float:justify; width:562; margin:10; } #titel { height:105px; width:818px; border-style:dashed; border-width:thin; border-color:#c9c9c9; } #titeloben { height:43px; width:820px; padding:0px; background-image: url(http://ww8755.rw08.de/hola/top.gif); } #titelunten { height:43px; width:820px; padding:0px; background-image: url(http://ww8755.rw08.de/hola/bottom.gif); border-top-style:dashed; border-top-width:thin; border-top-color:#c9c9c9; } #spec { border-style:solid; border-width:thin; border-color:#c9c9c9; background-color:#ffffff; width:105px; float:center; padding:0px; margin:3px 3px 3px 3px; } |
|
|||
Und beim nächsten Mal lernen wir dann, das Problem zu verkürzen und auf den Punkt zu bringen.....
Vielleicht ist aber dieser Ansatz was für Dich: http://www.pmob.co.uk/temp/3colfixedtest_4.htm |
|
|||
du solltest vielleicht darüber nachdenken, ein DTD anzugeben, und falls du deine Dokumente in XHTML schreibst, eine XML Deklaration gleich mit. In diesem Fall, sollte dein Dokument so anfangen:
Code:
<?xml version="1.0" encoding="iso-88589-1")> <!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="de"> <head> <title>...</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Anfängerfrage: Zentrierung in Galerie und Border-Problem | goldbeere | CSS | 3 | 04.11.2013 20:07 |
Positionierung von Container horizontal | mayhemtl | CSS | 9 | 11.08.2007 16:25 |
div container verschachteln | blau | CSS | 2 | 05.12.2006 20:44 |
Container nimmt nicht die Höhe seines Inhalts an | Lestat | CSS | 10 | 04.08.2005 14:47 |
Mitwachsende DIV Container | Myjestic | CSS | 9 | 27.07.2005 18:37 |