✔ Problem bei 3 Spalten-Design mit Div's

Status
Nicht offen für weitere Antworten.
Kalma

Kalma

Erfahrenes Mitglied
Hey,

ich strukturiere meine dfmusik.de Seite grad neu und das ganze mit einem 3-Spalten-Design:

http://www.dfmusik.de

Meine Probleme:
  1. Wenn das linke Menü zu groß ist, zieht der die Linien links und rechts vom Content nicht mehr durch
  2. Wenn das rechte Menü zu lang ist, geht es einfach über die gestrichelte Linie hinaus


Wer kann mir helfen?

Die CSS-Datei findet ihr hier
http://dfmusik.de/grund.css


MfG
David
 
  • Damit die Spalten, unabhängig von ihrem Inhalt, immer gleich hoch sind, empfehle ich Dir die "Faux-Columns-Technik", bei der eine Hintergrundgrafik die Spalten optisch simuliert (in diesem Fall die senkrecht gestrichelten Rahmenelemente) und in einem übergeordneten Element (z.B. DIV #cont_wrapper) mittels background-repeat:repeat-y in der Vertikalen wiederholt wird.

  • Hier der korrigierte CSS- und HTML-Code (ohne "Faux-Columns"):
Code: 
body {
        font-family:verdana,sans-serif;
        font-size:10px;
}
#wrapper {
        width:800px;
        margin:0px auto;
        padding:0px;
        border:1px dashed;
        border-color:#000000;
}

#cont_wrapper {
        width:800px;
        margin:0px;
        padding:0px;
}

#header {
        background:url(images/header.jpg);
        width:800px;
        height:253px;
        margin:0px;
        padding:0px;
}

#leftmenu {
        width:15%;
        margin:0px;
        padding:0px;
        float:left;
}

#leftmenu p {
        padding-left:5px;
        padding-top:5px;
        padding-bottom:5px;
        margin: 0;
}

#content {
        margin:0px 15%;
        padding:0px;
        border-right:1px dashed;
        border-left:1px dashed;
        border-color:#000000;
}

#content p {
        padding-left:5px;
        padding-top:5px;
        padding-bottom:5px;
        margin: 0;
}

#rightmenu {
        width:15%;
        margin:0px;
        padding:0px;
        text-align:right;
        float:right;
}

#rightmenu p {
        padding-right:5px;
        padding-top:5px;
        padding-bottom:5px;
        margin: 0;
}

#clear { /* stellt nach den floatenden Boxen wieder den normalen Textfluss im Dokument her */
 clear: both;
 margin: 0;
 padding: 0;
 height: 0;
 line-height: 0;
 font-size: 1px;
}
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>dfmusik > Westfalens Musiker-Portal</title>
<link href="grund.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
     <div id="header">&nbsp;</div><!-- Das ist der Header-Bild Berreich -->

     <div id="cont_wrapper">
          <div id="leftmenu">
               <p><b>Upcoming Dates</b> <br>
               Date 1 (Time) <br>
               Date 2 (Time) <br>
               Date 3 (Time) <br>
               </p>

               <p><b>Linkes Menü</b> <br>
               Linkes Menü <br>
               Linkes Menü <br>
               Linkes Menü <br>
               Linkes Menü <br>
               Linkes Menü <br>
               Linkes Menü <br>
               Linkes Menü <br>
               Linkes Menü <br>
               Linkes Menü <br>
               </p>

               <p><b>Who's online</b> <br>
               1 Guest <br>
               User 1 [profile...] <br>
               User 2 [profile...] <br>
               User 3 [profile...] <br>
               </p>
          </div> <!-- Das ist das Linke Menu -->

          <div id="rightmenu">
               <p><b>neuste Artikel</b> <br>
               Artikel 1 [read...] <br>
               Artikel 2 [read...] <br>
               Artikel 3 [read...] <br>
               </p>

               <p><b>Geburtstage</b> <br>
               User 1 [profile...] <br>
               User 2 [profile...] <br>
               User 3 [profile...] <br>
               </p>

               <p><b>5 neuste User</b> <br>
               User 1 [profile...] <br>
               User 2 [profile...] <br>
               User 3 [profile...] <br>
               User 4 [profile...] <br>
               User 5 [profile...] <br>
               </p>
          </div> <!-- Das ist das Rechte Menu -->

          <div id="content">
               <p><b>Content</b> <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               Content <br>
               </p>
          </div> <!-- Das ist der Content Berreich -->

          <div id="clear">&nbsp;</div>
     </div>
</div>

</body>
</html>
 
Wenn der Content-Inhalt z.b. nur 3 Zeilen hat, denn bleiben die Linien nur in der Höhe und gehen nicht ganz runter, so wie gewünscht, oder habe ich was überlesen?

David
 
Scheint so ... ;)

michaelsinterface hat gesagt.:
Damit die Spalten, unabhängig von ihrem Inhalt, immer gleich hoch sind, empfehle ich Dir die "Faux-Columns-Technik", bei der eine Hintergrundgrafik die Spalten optisch simuliert (in diesem Fall die senkrecht gestrichelten Rahmenelemente) und in einem übergeordneten Element (z.B. DIV #cont_wrapper) mittels background-repeat:repeat-y in der Vertikalen wiederholt wird.


Hier der korrigierte CSS- und HTML-Code (ohne "Faux-Columns"):
Zum Vergrößern anklicken....
 
Also, wenn ich das richtig interpretiert habe, meinst du so:

Code: 
#cont_wrapper {
	width:800px;
	margin:0px;
	padding:0px;
	background-repeat:repeat-y;
}
 
Naja, hierfür mußt Du Dir zunächst mal eine entsprechende Grafik erstellen, die die senkrecht gestrichelten Rahmenelemente des Content-DIVs enthält, und sie dann als Hintergrundbild für das Element einsetzen:

Code: 
#cont_wrapper {
	width:800px;
	margin:0px;
	padding:0px;
	background:url(pfad/zur/grafik.jpg) repeat-y;
}
 
Hey,

ach so ist das gemeint :D, aber, wie breit die grafik ist, ist egal oder?
Ich probiers ma fix^^


So. der Hintergrund ist da, aber wiederholen tut er sich nicht :-\
dfmusik.de

David
 
Das Hintergrundbild wird nicht für das DIV #content, sondern für das übergeordnete DIV #cont_wrapper bestimmt.

Code: 
#cont_wrapper {
        width:800px;
        margin:0px;
        padding:0px;
        background:url(images/background.gif) repeat-y 50% 0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück