Zwei Layer nebeneinander

fjordblauer · 14. März 2005

Hallo nochmal,

folgendes Problem mit "border". Zwischen Layer 2 und 3 soll eine Linie gezogen werden, von oben bis unten. Beide haben keine Höhenangabe, demnach sind diese so groß wie der Inhalt. Befindet sich in Layer 3 ein "kürzerer" Inhalt wie in Layer 2, ist auch der "border-left", der Layer 3 zugeordnet ist, kürzer. Also hört die Linie dann "mittendrin" auf.

Wie umgeh ich das Problem?

Code:

+---------------------------------------------------------+
+ Layer1                                              +
+--------------+-----------------------------------------+
+ Layer2   +          Layer3                     +
+              +                                         +
+              +                                         +
+              +                                         +
+              +                                         +
+              +                                         +
+--------------+-----------------------------------------+
+ Layer4                                              +
+--------------+-----------------------------------------+

Danke!

redlama · 14. März 2005

Gib doch dem Layer2 ein border-right und dem Layer3 ein border-right.
Dann sagst Du Layer3 noch, dass er ab einer bestimmten Position links beginnen soll und Layer2 kriegt eine feste Weite.
Dann gibtst Du Layer3 noch "position:absolute;". Jetzt musst Du nur noch mit der Weite von Layer2 und Position links von Layer3 solange basteln, bis beide Ränder übereinander liegen.
Dann hast Du (egal wie hoch Layer2 und Layer3 sind), einen Rand, der über die Höhe beider Layer geht, ...
War das verständlich?

redlama

fjordblauer · 14. März 2005

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
	<title>Toller Titel</title>
	
<style type="text/css">
<!--
  
		
            
body		{	font-family:Verdana;
			font-size:12px;
			background-image:url(background.png);
			text-align:center;
			margin:0px;
              		color:#007a63;
		}
		
#header_top_Div	{ 	background-image:url(header_top.jpg); 
			height: 16px; 
	         	width: 710px;
	         	padding-left: 5px;
           		padding-right: 5px;
			padding-top: 2px;
			padding-bottom: 2px;
           		text-align:left;
   			bborder-bottom: 1px #000000 solid;
   			background-color: #dd4838;
   			color:#ffffff;
   			
		}

#header_center_Div	{
			background-image:url(header_center.jpg);			 
	         	height: 134px;
	         	width: 720px;
			}
	         	
#header_bottom_Div	{ 	background-image:url(header_bottom.jpg); 
			height: 16px; 
	         	width: 710px;
	         	padding-left: 5px;
           		padding-right: 5px;
			padding-top: 2px;
			padding-bottom: 2px;
           		text-align:left;
   			border-bottom: 1px #000000 solid;
   			border-top: 1px #000000 solid;
   			background-color: #dd4838;
   			color:#ffffff;
   			
		}
			
#menueDiv	{ 	
			width: 180px;
			line-height:15px;
			padding-left: 5px;
			background-color:#ffffff; 
			border-style: none;
			float: left;
			padding-top: 5px;
		} 				
					
#contentDiv	{ 	width: 521px;
			padding: 5px;
   			border-left: 1px #000000 solid;
	          	float: left;
	          	background: #ffffff;
	          	line-height:15px;
		}

#footerDiv	{ 	border-top: solid 1px #000000;
	         	height: 50px;
	         	width: 720px;
	       	  	clear: both;
	        	background-image:url(footer.jpg);
	        }
	        
a:link { text-decoration:none; color:#007a63; font-size: 12px;}

a:visited { text-decoration:none; color:#007a63; font-size: 12px;}

a:hover { text-decoration:underline; color:#007a63; font-size: 12px;}

a:active { text-decoration:none; color:#007a63; font-size: 12px;}



a.mainmenue:link { text-decoration:none; color:#ffffff; font-size: 12px;}

a.mainmenue:visited { text-decoration:none; color:#ffffff; font-size: 12px;}

a.mainmenue:hover { text-decoration:underline; color:#ffffff; font-size: 12px;}

a.mainmenue:active { text-decoration:none; color:#ffffff; font-size: 12px;}


  -->
</style>

</head>


<body>

	<div style="width:720px; margin:0px auto; text-align:left; background-color:#ffffff; border:1px solid #000000;">
		
		<div id="header_top_Div">
		
		<a style="float: right;"><bToller Text |</b></a>  <b>| Hier auch toller Text|</b> 
		
		</div>
		<div id="header_center_Div"></div>
		
		
		<div id="header_bottom_Div">
                         <a style="float: right;"> | Montag, 14.03.2005 |</a>
					| <a class="mainmenue" href="#">Home</a>
					| <a class="mainmenue" href="#">Privatkunden</a>
					| <a class="mainmenue" href="#">Geschäftskunden</a>
                  			| <a class="mainmenue" href="#">Service</a>
                 			| <a class="mainmenue" href="#">Unternehmen</a>
                         | 

		</div>
		

		
		<div id="menueDiv">
						<b>Hauptmenü Privatkunden</b><br><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						&raquo; <a class="menu" href="#">Produkt</a><br>
						<br>
						<br>
						<br>
			</div>
		
		
		
		<div id="contentDiv">
	
        
	<b>Angezeigte Seite: Kategorie > Seite</b>


<br>
<br>

	<style="vertical-align:top;">Hier steht sehr wenig Text, so das border-left nicht ausreicht.<br><br>

<img src="drucker_icon.gif" alt="Diese Seite drucken">

</table>

		</div>	
		
				<div id="footerDiv"></div>
		
	</div>
	
	


</body>

</html>

Vielleicht versteht ihr jetzt besser?

Quaese · 14. März 2005

Hi,

am besten packst du Menu und Content in einen weiteren Container. Diesem weist du an
entsprechender Stelle eine Line als Hintergrundgrafik zu. Da sich der Container an die Höhe
der in ihm enthaltenen Elemente anpasst, erstreckt sich auch die Linie bis ans Ende.

Zu beachten ist, dass der Textfluss nach dem Menu- und dem Content-Div wieder hergestellt wird,
da sonst der umschliessende Container keine Höhe erhält.

HTML:

<div style="width: 100%; background: url(linie.gif) 180px 0 repeat-y;">
  <div id="menueDiv">
    <b>Hauptmenü Privatkunden</b><br><br>
    &raquo; <a class="menu" href="#">Produkt</a><br>
    <!-- ... weiteres Menu -->
  </div>
  <div id="contentDiv">
    <b>Angezeigte Seite: Kategorie > Seite</b>
    <!-- ... weiterer Content -->
    <img src="drucker_icon.gif" alt="Diese Seite drucken">
  </div>
  <!-- Textfluss wieder herstellen; Element so formatiert, dass es nicht in Layout eingreift -->
  <div style="font-size: 1px; line-height: 0; height: 0; clear: both;">&nbsp;</div>
</div>

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

fjordblauer · 15. März 2005

Super, das war schon mal ein echt guter Tipp!

Hier mein angepasster Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>

	<title>Toller Titel</title>
	
<style type="text/css">  

<!--		
            
body						{		
									font-family: Verdana;
									font-size: 12px;
									background-image: url(background.png);
									margin: 0px;
									padding: 0px;
									color: #000000;
							}
		
#header_top_Div				{
									background-image: url(header_top.jpg); 
									height: 16px;
								    width: 710px;
								    padding-top: 2px;
							 		padding-left: 5px;
									padding-right: 5px;																				
									padding-bottom: 2px;
									border-bottom: 1px #000000 solid;
									color: #ffffff;	
							}

#header_center_Div			{
									background-image:url(header_center.jpg);			 
									height: 143px;
									width: 720px;
							}
	         	
#header_bottom_Div			{ 	
									background-image: url(header_bottom.jpg); 
									height: 16px; 
									width: 710px;
									padding-top: 2px;
									padding-left: 5px;
									padding-right: 5px;																				
									padding-bottom: 2px;
									border-top: 1px #000000 solid;
									border-bottom: 1px #000000 solid;
									color:#ffffff;
							}
		
#content_Div				{
									width: 720px;
									background-image: url(content_line.jpg); 
									background-repeat: repeat-y;
									z-index: 5;
									float: left;
							}
			
#menue_Div					{ 	
									float: left;
									width: 184px; 
									padding-top: 20px;
									padding-left: 5px; 
									line-height:20px;
									z-index: 3;
																				
							} 	
		
* html #advertisement_Div	
							{ 
									float: left;
									width: 190px;
									text-align: center;
									
							}

#advertisement_Div			{ 
									float: left;
									width: 190px;
									text-align: center;
									z-index: 3;
							}
							
* html #advertisement_Div			{ 
									ffloat: left;
									width: 190px;
									text-align: center;
									clear: left;
							}			
					
#viewer_Div					{ 	
									float: right;
									width: 500px;
									padding-top: 20px;
									background: #ffffff;
									line-height:20px;
									z-index: 3;									
							}

* html #viewer_Div					{ 	
									float: right;
									width: 530px;
									padding-top: 20px;
									background: #ffffff;
									line-height:20px;
									clear: both;
									bbackground-color: green;
							}

#footer_Div					{ 	
									border-top: solid 1px #000000;
									height: 50px;
									width: 720px;
							 		clear: both;
									background-image:url(footer.jpg);
	       					 }
	        												 		
	        
a:link { text-decoration:none; color:#007a63; font-size: 12px;}

a:visited { text-decoration:none; color:#007a63; font-size: 12px;}

a:hover { text-decoration:underline; color:#007a63; font-size: 12px;}

a:active { text-decoration:none; color:#007a63; font-size: 12px;}



a.mainmenue:link { text-decoration:none; color:#ffffff; font-size: 12px;}

a.mainmenue:visited { text-decoration:none; color:#ffffff; font-size: 12px;}

a.mainmenue:hover { text-decoration:underline; color:#ffffff; font-size: 12px;}

a.mainmenue:active { text-decoration:none; color:#ffffff; font-size: 12px;}

-->
</style>

</head>


<body>

	<div style="width:720px; margin:0px auto; text-align:left; background-color:#ffffff; border:1px solid #000000;">
		
		<div id="header_top_Div">
		
		<a style="float: right;"><b>| Ihr Fische und der Käste schmecken soo toooll |</b></a>  <b>| Fisch | Eisenerz | Wolkenstück |</b> 
		
		</div>
		<div id="header_center_Div"></div>
		
		
		<div id="header_bottom_Div">
                         <a style="float: right;"> | <?php include ("datum.inc"); ?> |</a>
					| <a class="mainmenue" href="#">Home</a>
					| <a class="mainmenue" href="#">Privatkunden</a>
					| <a class="mainmenue" href="#">Geschäftskunden</a>
                  			| <a class="mainmenue" href="#">Service</a>
                 			| <a class="mainmenue" href="#">Unternehmen</a>
                       			| 

		</div>
		

			<div id="content_Div">
			
							<div id="menue_Div">
								<b>Hauptmenü Privatkunden</b><br><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>
								&raquo; <a class="menu" href="#">Produkt</a><br>				                
						                
							
							</div>
							

										<div id="advertisement_Div">
										<br /><br /><br /><br /><img src="bild.jpg" alt="Mitglied bei www.xyz.de"></span>		
										</div>
							
							
							
			
								<div id="viewer_Div">
					
							        <?php
							        include ("dummy.inc");
							        ?>
							        
							       
							</div>	
			</div>	
		
				
		<div id="footer_Div"></div>
		
	</div>
	
	


</body>

</html>

Leider wird dieser im Firefox und Netscape nicht so angezeigt wie ich das möchte, das Bild unter dem linken Menü erscheint rechts im Content_Viewer.

Quaese · 15. März 2005

Hi,

Werden zwei Elemente mit float: left angeordnet, werden sie anschliessend nebeneinander
angezeigt (sofern der verfügbare Platz ausreicht).

Erstelle eine linke Spalte (menuColumn), in die du das Menu und das AdPic legst. Weiterhin
eine rechte Spalte (viewer_Div), in die du alles packst, was mit dem Inhalt zu tun hat, der
rechts angezeigt werden soll.
Die Elemente innerhalb der Spalten müssen im Allgemeinen nicht mit float ausgerichtet
werden.

Ausserdem ist es notwendig, das von mir bereits beschriebene Element zum Rücksetzen in
den normalen Textfluss einzubinden!

CSS:

Code:

#content_Div{ width: 720px;
              background: url(content_line.jpg) 0 0 repeat-y;}

#menuColumn{ float: left;
             width: 190px;}
#menue_Div{ width: 184px;
            padding-top: 20px;
            padding-left: 5px;
            line-height:20px;}
#advertisement_Div{ width: 188px;
                   text-align: center;}
* html #advertisement_Div{ width: 190px;}

#viewer_Div{ padding-top: 20px;
             float: left;
             width: 530px;
             line-height:20px;}

HTML:

<div id="content_Div">
  <!-- Linke Spalte für Menu und AdPic -->
  <div id="menuColumn">
    <div id="menue_Div">
      <b>Hauptmenü Privatkunden</b><br><br>
      &raquo; <a class="menu" href="#">Produkt</a><br>
      ...
    </div>

    <div id="advertisement_Div">
      <br /><br /><br /><br /><img src="bild.jpg" alt="Mitglied bei www.xyz.de"></span>
    </div>
  </div>

  <!-- Rechte Spalte für den Content -->
  <div id="viewer_Div">&nbsp;
    Inhalt
  </div>

  <!-- Zurücksetzen in den normalen Textfluss -->
  <div style="font-size: 1px; line-height: 0; height: 0; clear: both;">&nbsp;</div>
</div>

Ciao
Quaese

fjordblauer · 15. März 2005

Vielen Dank! Bist du schon länger dabei mit CSS zu gestalten?

Das mit dem Zurücksetzen, hier ist der Augenmerk auf clear:both; oder?

Aber wieso ist das wirklich so wichtig. ich probiere ist jetzt mal so einzubauen.

fjordblauer

Quaese · 15. März 2005

Hi,

wenn du das "Rücksetz-Element" weglässt, wird dem umschliessenden content_Div keine
Höhe zugewiesen und die Linie würde wiederum nicht angezeigt werden (zumindest in Browsern
mit Mozilla-Engine). Kannst ja mal das Element rausnehmen und dir z.B. im Firefox ansehen.

Mit clear: both wird der normale Textfluss wieder hergestellt. Die anderen Angaben sind
lediglich dazu gedacht, das Element so zu formatieren, dass es nicht in das Layout eingreift.

Das es CSS gibt, weiss ich schon länger. Das ich mit wirklich damit beschäftige, ist circa
ein Jahr her.

Ciao
Quaese

fjordblauer · 15. März 2005

Habe es geschafft. Die Angabe mit dem "Rücksetz-Element" bewirkt nichts, auch im Firefox nicht.

Nun habe ich noch eine Spezialfrage:

Bekomme ich den Layer #advertisement_Div unten ausgerichtet ohne alles umzuschmeissen? Sprich, eigentlich weiß meine Seite doch gar nicht wie hoch sie ist oder? Habe ja keine Höhenangabe im #content_Div.

Gruß,

fjordblauer

Quaese · 15. März 2005

Hi,

wenn ich das Rücksetz-Div weglasse, wird die Linie bei mir im Firefox nicht angezeigt ...

Du könntest die AdBox am unteren Rand des content_Div ausrichten. Das hätte allerding zur
Folge, dass es sich eventuell über das Menue schieben würde, wenn der Inhalt in der rechten
Spalte zu niedrig werden würde. Ich würde darauf verzichten.

Ciao
Quaese

Zwei Layer nebeneinander

fjordblauer

redlama

Erfahrenes Mitglied

fjordblauer

Quaese

Moderator

fjordblauer

Quaese

Moderator

fjordblauer

Quaese

Moderator

fjordblauer

Quaese

Moderator

Neue Beiträge