✔ richtet sich nach der rechten box

Status
Nicht offen für weitere Antworten.
H

hmmNaGut

Erfahrenes Mitglied
Hi, ja ich bins nochmal :)
Letzte Frage für Heute und zwar

Wie am Screenshort ersichtlich richtet sich 'content' nach 'content_outer' das Problem ist das content_outer im im gleichen Rahmen sein soll wie content.

vielleicht hat jemand einen Tipp mein
HTML: 
<html>
<head>
	<title>{$titel}</title>
  <meta name="author" content="Patrick Erber">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="keywords"  content="{$metakeywords}">

<style type="text/css"><!--
body {
			background-color:#4d2b2b;
		}

.top{
	background-image:url(images/top.jpg);
	width:900px;
	height:131px;
}

.frame{
   width:900px;
        background-color:white;
        min-height:100%;
        height:auto !important;
        height:100%;
}


.LeftNavi .NavPoint
{
	width:145px;
	background-color:rgb(248, 236, 236);
	border-bottom:1px groove #d9d5d5;
}

.LeftNavi .NavHeadLine{
	background-color:#812122;
	color:white;	
	width:145px;
	padding-top:2px;
	padding-bottom:2px;
	font-size:10pt;
 	font-family:verdana, sans-serif;
	font-weight:bold;
}

.LeftNavi .NavHeadLineOrange{
	background-color:#c0491b;
	color:white;	
	width:145px;
	padding-top:2px;
	padding-bottom:2px;
	font-size:10pt;
 	font-family:verdana, sans-serif;
	font-weight:bold;
}


.LeftNavi a.Link {
	color:#813131;
 	font-family:verdana, sans-serif;
	font-weight:bold; 
	text-decoration:none;
	font-size:10px;

}

.LeftNavi a.Link:hover {
	color:#c04949;
 	font-family:verdana, sans-serif;
	font-weight:bold; 
	text-decoration:none;
	font-size:10px;

}

.LeftNavi ul
{

 	margin-left: 0px;
	padding-left: 0px;
	list-style-type: none;
}

.LeftNavi li
{
 list-style-type: none;
}

.LeftNavi
{
        /*position:absolute;*/
        margin-top:0px;
        margin-left:3px;
        width:145px;
        float:left;
        display:inline;
}
.OrangeLine{
	background-color:#c0491b;
	color:white;	
	padding-top:2px;
	padding-bottom:2px;
	font-size:10pt;
 	font-family:verdana, sans-serif;
}
#content_left{
   /*position:absolute;*/
   margin-top:0px;
   margin-left:15px;
   width:265px;
   float:left;
   display:inline;
}

#content_right{
   /*position:absolute;*/
   margin-top:0px;
   margin-left:15px;
   width:265px;
 background-color:rgb(248, 236, 236);
 float:left;
 display:inline;
}

#content{
        margin-left: 160px;
        width:550px;
        margin-top:0px;
        /*position:absolute;*/
        clear:left;
}
#content_outer{
	margin-left: 15px;
	width:170px;
	margin-top:0px;
	display:inline;
	float:left;
	
	/*position:absolute;*/
}
	
.compartments_orange{
	background-color:#c0491b;
	color:white;	
	padding-top:1px;
	padding-bottom:1px;
	font-size:9pt;
 	font-family:verdana, sans-serif;
 	font-weight:bold;
}

.compartments_red{
	background-color:#812122;
	color:white;	
	padding-top:1px;
	padding-bottom:1px;
	font-size:9pt;
 	font-family:verdana, sans-serif;
 	font-weight:bold;
}

#content_left .content_one{
	color:black;
 	font-family:verdana, sans-serif;
	font-size:12px;
}

#content_left a.linkmore{
	color:#c0491b;
	font-family:verdana, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:10px;
}

#content_left h2{
	color:#813131;
 	font-family:verdana, sans-serif;
	font-weight:bold; 
	text-decoration:none;
	font-size:16px;
}
	
#content_right .compartments{
	background-color:#c0491b;
	color:white;	
	padding-top:1px;
	padding-bottom:1px;
	font-size:9pt;
 	font-family:verdana, sans-serif;
 	font-weight:bold;
}

#content_right .content_one{
	color:black;
 	font-family:verdana, sans-serif;
	font-size:12px;
}

#content_right a.linkmore{
	color:#c0491b;
	font-family:verdana, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:10px;
}

#content_right h2{
	color:#813131;
 	font-family:verdana, sans-serif;
	font-weight:bold; 
	text-decoration:none;
	font-size:16px;
}

#content .content_one{
	color:black;
 	font-family:verdana, sans-serif;
	font-size:12px;
}

#content a.linkmore{
	color:#c0491b;
	font-family:verdana, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:10px;
}

#content h2{
	color:#813131;
 	font-family:verdana, sans-serif;
	font-weight:bold; 
	text-decoration:none;
	font-size:16px;
}
	
#content .compartments{
	background-color:#c0491b;
	color:white;	
	padding-top:1px;
	padding-bottom:1px;
	font-size:9pt;
 	font-family:verdana, sans-serif;
 	font-weight:bold;
}

.borderbottom{
	border-bottom:1px dotted #776761;
}

.borderright{
	border-right:1px dotted #776761;
}

.orange_rezept_box{
	color:#813131;
	float:left;
	background-color:#e5ddb5;
 	font-family:verdana, sans-serif;
	text_decoration:none;
	font-weight:bold;
	font-size:14px;	
	text-align:center;
	padding:2px 2px 2px 2px;
	width:100%;
	border:1px dashed #776761;
}

.gray_box{
	color:#813131;
	float:left;
 	font-family:verdana, sans-serif;
	text_decoration:none;
	font-weight:bold;
	font-size:14px;	
	text-align:center;
	padding:2px 2px 2px 2px;
	width:100%;
	border:1px dashed #776761;
 	background-color:rgb(248, 236, 236);
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
-->		
</style>

  </head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" >



<div class="frame">
<div class="top"></div>
	<div class="LeftNavi">
		<ul>
			<li class="NavHeadline" >
				&nbsp;Service
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Webverzeichnis</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Branchenbuch</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Apotheken</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Fahrplan</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Routenplaner</a>
			</li>		
			<li class="NavHeadlineOrange" >
				&nbsp;Kino
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Kinos in Wien</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Derzeit im Kino</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Kino Starts</a>
			</li>
			<li class="NavHeadline" >
				&nbsp;Events
			</li>
			<li class="NavPoint">
				<a href="" class="Link">&nbsp;Event hinzuf&uuml;gen</a>
			</li>
			<li class="NavPoint">
				<a href="" class="Link">&nbsp;Party</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Musik</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Seminare</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Kabarett</a>
			</li>				
			<li class="NavHeadlineOrange" >
				&nbsp;Rezepte
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Fleisch-Gerichte</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Vegetarische-Gerichte</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;S&uuml;sses</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Vorspei&szlig;en</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Dessert</a>
			</li>		
			<li class="NavHeadline" >
				&nbsp;Navigation
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Home</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Kontakt</a>
			</li>
			<li class="NavPoint" style="list-style-type: none;">
				<a href="" class="Link">&nbsp;Impressum</a>
			</li>
		</ul>
	</div>
		<div id="content_left">
			<p class="compartments_orange">&nbsp;&raquo;Events</p>
			<div class="borderright">
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</div>
			<div class="borderright">
				<img src="2.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Santana - Live your Light 2008</h2>
				<p class="content_one">Der charismatische Gitarrist präsentiert auf seinem neuen Album "Ultimate Santana" und seiner Europatournee im Juli 2008 seine neuesten Hits..<a href="" class="linkmore">[...]</a></p>
			</div>
			<p class="compartments_red">&nbsp;&raquo;Kino</p>
			<div class="borderright">
				<img src="5.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Süß macht schön</h2>
				<p class="content_one">In Caramel zeigt Nadine Labaki, wie bunt Beirut ohne Krieg sein kann – und wie Zucker als uraltes Schönheitsmittel verwendet wird. Kurt Zechner traf die berückende libanesische Filmemacherin in Paris.<a href="" class="linkmore">[...]</a></p>
			</div>
		</div>				
		<div id="content_right">
			<p class="compartments_orange">&nbsp;&raquo;Events</p>
			<p>
				<img src="2.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Santana - Live your Light 2008</h2>
				<p class="content_one">Der charismatische Gitarrist präsentiert auf seinem neuen Album "Ultimate Santana" und seiner Europatournee im Juli 2008 seine neuesten Hits..<a href="" class="linkmore">[...]</a></p>		
			</p>
			<p>
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</p>
			<p class="compartments_red">&nbsp;&raquo;Kino</p>
				<img src="5.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Süß macht schön</h2>
				<p class="content_one">In Caramel zeigt Nadine Labaki, wie bunt Beirut ohne Krieg sein kann – und wie Zucker als uraltes Schönheitsmittel verwendet wird. Kurt Zechner traf die berückende libanesische Filmemacherin in Paris.<a href="" class="linkmore">[...]</a></p>
		</div>
	<div id="content_outer">
		<p class="orange_rezept_box">
			Gefüllter Schweinsbraten<img src="4.jpg">
		</p>
		<p class="orange_rezept_box">
			Gefüllter Schweinsbraten<img src="4.jpg">
		</p>
		<p class="gray_box">
			Gefüllter Schweinsbraten<img src="4.jpg">
		</p>
		<p class="gray_box">
			Gefüllter Schweinsbraten<img src="4.jpg">
		</p>
	</div>
	<div id="content">
			<p class="compartments_red">&nbsp;&raquo;Freizeit</p>
			<div class="borderbottom clearfix">
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</div>
			<div class="borderbottom clearfix">
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</div>
			<div class="borderbottom clearfix">
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</div>
			<p class="compartments_orange">&nbsp;&raquo;Kino</p>
			<div class="borderbottom clearfix">
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</div>
			<div class="borderbottom clearfix">
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</div>
			<div class="borderbottom clearfix">
				<img src="1.jpg" alt="Bon Jovi" style="width:100px; heigth:75px;float:left;">
				<h2>Bon Jovi - Lost Highway World Tour</h2>
				<p class="content_one">Bon Jovi begeben sich auf eine exklusive Welttournee,<br>
				die sie in 10 verschiedene Länder und vor allem nach Österreich führt.<a href="" class="linkmore">[...]</a></p>
			</div>
	</div>
</div>	
</body>
</html>

Danke!
Denn Screenshot habe ich mit bei gepackt.
 

Anhänge

  • Screenshot-3.jpg
    Screenshot-3.jpg
    49,9 KB · Aufrufe: 17
Hi,

wenn #content unmittelbar unter #content_left und #content_right anschliessen soll, wirst du das Layout restrukturieren und zu einem "globalen" dreispaltigen Layout umstellen müssen, in dem sich die drei genannten Boxen gemeinsam in der mittleren Spalte befinden.
 
Danke für die schnelle Antwort
So zum Beispiel:

#leftNavi (LinkeSeite)

#maincontent
{
#leftcontent
#rightcontent
darunter #content
}

#content_outer

ich hoffe ich werde das Bald begreifen :)
 
Hier mal ein kleines Beispiel ;)

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">
<meta name="author" content="Maik">
<title>tutorials.de | demo_hmmNaGut</title>

<style type="text/css">
* {
margin:0;
padding:0;
}

html,body {
height:100%;
}

#wrapper {
width:900px;
min-height:100%;
height:auto !important;
height:100%;
background:#ccc;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

#leftCol {
float:left;
width:145px;
margin-left:3px;
display:inline;
}

#rightCol {
float:right;
width:170px;
display:inline;
}

#centerCol {
margin:0 185px 0 163px;
}

#content_left {
float:left;
width:265px;
}

#content_right {
float:right;
width:265px;
}

#content {
clear:both;
}
</style>


</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="leftCol"><h1>leftCol</h1></div>
     <div id="rightCol"><h1>rightCol</h1></div>
     <div id="centerCol">
          <div id="content_left"><h1>content_left</h1></div>
          <div id="content_right"><h1>content_right</h1></div>
          <div id="content"><h1>content</h1></div>
     </div>
</div>

</body>
</html>
 
Das finde ich spitze:
<title>tutorials.de | demo_hmmNaGut</title>

Werde es gleich mal einbinden und nachschauen

ein einfaches ja so ungefähr hätte aber auch schon genügt

:)
 
hmmNaGut hat gesagt.:
Das finde ich spitze:
<title>tutorials.de | demo_hmmNaGut</title>
Zum Vergrößern anklicken....
Das schreib ich immer als Seitentitel rein, wenn ich hier dem User den Quellcode einer von mir verfassten Beispielseite poste ;)
hmmNaGut hat gesagt.:
ein einfaches ja so ungefähr hätte aber auch schon genügt
Zum Vergrößern anklicken....
Ich wollte hier auch eine Alternative zu deinem Konzept zeigen :) - man beachte hierbei die Reihenfolge der drei Spalten #leftCol, #rightCol und #centerCol im HTML-Code, sowie die Formatierung für die mittlere Spalte #centerCol.
 
Auf alle Fälle Danke ich dir recht herzlich und
hoffe das ich es jetzt irgend wie hinbekommen.

Ich beschäftige mich nämlich genau seit 1 Tag mit der Erstellung
von Layouts mit CSS denn vorher habe ich das nur mit Tabellen gemacht.

Und es ist irgendwie schon eine Andere Denkweise.

Danke dir vielmals.:-(
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück