drei spalten Layout

veneue · 18. Februar 2014

Hallo zusammen,

ich schaffe es nicht in meinem drei spalten Layout den aside Bereich oben zu halten. So dass er neben dem Section Bereich ist, mit float habe ich es auch schon probiert, irgendwie klappt es nicht, könnte mir jemand helfen?

Gruß

Veneue

CSS

*{
margin: 0 ; /* Beide Seiten teilen sich den Platz automatisch auf*/
padding: 0;
background-color: lightgrey;







}




header, nav, footer, section, aside
{




 display:block;







}
#wrapper {




 width:1100px;
margin: 0 auto;
text-align: left;
background-color: lightblue;
border-radius: 15px;
padding-top:30px;




}




.h1 {
text-align: center;




}




sectionh3 {




 padding-bottom: 3px;
}




 




header
{
color: blue;
margin: 30px;
padding: 30px;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 5px;
border-radius: 15px;
}







nav
{ 
list-style: none;
background-color: silver;
width: 150px;
float: left;
padding: 15px;
margin-left:30px;
text-align: left;
border-radius: 15px;




}




nav ul 
{




list-style: none;
border: 1px black thin;
padding-left:1em;







}
nav li




 {
padding-bottom:0.2em;
padding-top:0.2em;




 }




 
section
{
background-color: yellow;
margin-right: 120px;
margin-left: 260px;
padding: 10px;
width:490px;
padding: 20px;
border-radius: 15px;




}







aside
{
background-color: red;
width:175px;
float:right;
border-radius: 15px;
margin-right:30px;
padding:15px;
margin-bottom:50px;
clear:float;
}




footer 
{
clear: both;
border-top: 2px solid black;
text-align: center;
}

Alles anzeigen

HTML

<!DOCTYPE html>
<html>




 <head>
<title>Ender Karaman - Gas, Heizung, Sanit&auml;r und Solartechnik in Rosenheim</title>




<meta http-equiv="language" content="deutsch.de; charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta name="description" content="Ender Karaman Ihr Meisterbetrieb f&uuml;r Gas-Heizung-Sanitär-Solartechnik in Rosenheim"/>
<meta name="keywords" content="Ender Karaman, Rosenheim, sanit&auml;r, heizung, klima, Ender Karaman, Rosenheim, 83022, innstrasse 26, hebeb&uuml;hnenSanit&auml;r,SFA-Hebeanlagen, Heizung,Solar,Gas, handwerker, bauen, fliesen, klima, bad, b&auml;der, sanit&auml;r, gas, wasser, armaturen, dusche, umwelt, energie, klimager&auml;te, elektro, w&auml;rmepumpe, solar, brenner, klimaanlage, klimatechnik, heizk&ouml;rper, badm&ouml;bel, klempner, heizungsbau, pellets, heizkessel, solaranlage, anlage, solarenergie, wassseraufbereitung, &ouml;lheizung, wartung, heizger&auml;te, badplanung, geb&auml;udetechnik, sonnenenergie, zentralheizung, energiesparen, energietechnik, sanit&auml;ranlagen, haustechniker, w&auml;rmetechnik, abwassertechnik, traumbad, l&uuml;ftungstechnik, brennwert, wasserinstallation, sanit&auml;rinstallation, warmwasser, heizungsanlage, solarw&auml;rme, sanitaer, regenwassernutzung, l&uuml;ftung, solarstrom, heizen, heizungstechnik "/>
<meta name="date" content="31.01.2014/11:00"/>
<meta name="autor" content="Venedikoglu &Uuml;mit"/>
<meta name="publisher" content="Venedikoglu &Uuml;mit"/>
<meta name="audience" content="alle, all"/>
<meta name="contributor" content="&Uuml;mit Venedikoglu"/>
<meta name="page-topic" content="Gas, Heizung, Sanit&auml;r, Solartechnik, Ender Karaman, SFA Anlagen, bad, solarenergie, badplanung, armaturen, zentralheizung, wasserinstallation, sanit&auml;rinstallation, w&auml;remetechnik"/>
<meta name="robots" content="index,follow"/>
<meta name="revisit-after" content="7 days"/>
<meta name="expires" content="0"/>
<meta name="viewport" content"width=device-width, initial-scale=1.0"/>
<meta name="copyright" content="Copyright by Ender Karaman"/>
<meta http-equiv="imagetoolbar" content="false"/>










 <link href="style1.css" type="text/css" rel="stylesheet"/> 







 <!--[if IE]>
<script src="[url='http://www.html-seminar.de/html-css-php-forum/'http://html5shiv.googlecode.com/svn/trunk/html5.js']http://html5shiv.googlecode.com/svn/trunk/html5.js"></script[/url]>
<![endif] -->




<!--[if lt IE 9]>
<script src="[url='http://www.html-seminar.de/html-css-php-forum/'http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js']http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script[/url]>
<![endif]-->




 </head>




<body>




 




<div id="wrapper">
<header><div id="kopfbereich">
<!-- <img src="/bilder/headerpicture.jpg" width="900" height="200" alt="Ender Karaman"/> -->
<h1>Ender Karaman</h1>
</div></header> <!-- Ende Kopfbereich -->










 







<nav><div id="navbereich">
<ul>
<li><a href="startseite.htm" title="Startseite">Startseite</a></li>
<li><a href="aktuell.htm" title="Aktuelles zum Thema Sanit&auml;r">Aktuell</a></li>
<li><a href="ueber-uns.htm" title="Der Werdegang von uns">&Uuml;ber uns</a></li>
<li><a href="team.htm" title="Unser Team im &Uuml;berblick">Team</a></li>
<li><a href="unsere.htm" title="Unsere Leistungen">Unsere Leistungen</a>
<ul>
<li><a href="gas.htm" title="Gas">Gas </a></li>
<li><a href="oel.htm">&Ouml;l</a></li> 
<li><a href="solartechnik.htm" title="Solartechnik">Solartechnik</a></li> 
<li><a href="bad.htm" title="Bad und Sanit&auml;rinstallation">Bad und Sanit&auml;rinstallation</a></li>
<li><a href="kundendienst.htm" title="Kundendienst">Kundendienst</a></li>
</ul>
</li>
<li><a href="karriere.htm" title="Stellenangebote und Ausschreibungen">Karriere</a></li>
<li><a href="online.htm" title="Online-Shop">Online-Shop</a></li>
<li><a href="partner.htm" title="Die Partner">Partner</a></li>
<li><a href="referenzen.htm" title="Unsere Referenzen">Referenzen</a></li>
<li><a href="kontakt.htm" title="Kontaktformular">Kontakt</a></li>
<li><a href="impressum.htm" title="Impressum">Impressum</a></li>
</ul>
</div></nav>







<section>
<div id="inhaltbereich">
<p>
<h3 class="sectionh3">Herzlich Willkommen</h3>auf unserer neuen Internetpr&auml;senz [url='http://www.ender-karaman.de/']www.ender-karaman.de[/url]
<p class="inhaltsbereichp">Wir bieten Ihnen alles aus einer Hand an, egal ob Neubau, Sanierung oder Wartung.<br/> Unser Arbeitsschwerpunkt liegt sowohl im privaten Kundendienstbereich als auch im Gro&szlig;- und Industrianlagen.</p>




 




 <p>Erweitert wird unser Leistungskatalog durch eine immer wichtiger werdende Energieberatung und das Aufzeigen von Einsparpotentialen. <br/>Auch die Notdiensteins&auml;tze f&uuml;r unsere Stammkunden sind fÃ¼r uns selbstverst&auml;ndlich.</p>




<p class="abstand">F&uuml;r uns steht die Zufriedenheit unserer Kunden im Mittelpunkt unserer t&auml;glichen Arbeit. Wir stehen <br/>Ihnen gerne Rund um die Uhr mit Rat und Tat bei Ihrem Vorhaben zur Seite. &Uuml;berzeugen Sie sich von unserem Service <br/>und der Qualit&auml;t unserer Arbeit.
</p>




<hr/>
<p>
Wir sind Ihr kompetenter Partner in Sachen Planung, Beratung und Umsetzung Ihrer Ideen!
</p></div></section>




<aside>
<p><b>Infos, News und Tipps..</b><br/>
Wir bieten Ihnen alles aus einer Hand <br/>
an, egal ob Neubau, Sanierung oder Wartung. Unser Arbeitsschwerpunkt liegt sowohl im <br/>
privaten Kundendienstbereich als auch im Gro&szlig;- und Industrianlagen.
</p>
</aside>













<!-- <p class="bild1"><img class="ausrichten" src="/bilder/notdienst.jpg" width="120" height="120" alt="Notdienst"> </p>
<p class="bild2"><img class="ausrichten" src="/bilder/meister.jpg" width="120" height="120" alt="Notdienst"> </p>
<p class="bild3"><img class="ausrichten" src="/bilder/alles.jpg" width="120" height="120" alt="Notdienst"> </p>
</div> -->




 




 




 <footer><div id="fussbereich"> 




 
<p>
&copy; 2013 [url='http://www.ender-karaman.de/']www.ender-karaman.de[/url] &middot; Alle Rechte vorbehalten &middot; Created by Venedikoglu
</p>




 </div></footer>










</div>




 




</body>
</html>

Alles anzeigen

veneue · 18. Februar 2014

Hallo zusammen,

ich habs gefunden :-), man muss in der index Datei die Reihenfolge anders legen! Cool trotzdem vielen Dank...

Viele Grüße

veneue

Az. · 21. Februar 2014

Tipp:
Vergib deinem optischen Kopfbereich der Seite eine Klasse um ihn mit CSS Regeln zu versehen.
Du kannst nämlich die neuen semantischen Elemente überall verschachteln, z. B. so:

Code

<article>
	<header>
		<h1>Überschrift</h1>
		<time>Datum</time>
	</header>
	<div>
		<p>Artikel Inhalt</p>
	</div>
	<footer>
		Themen: <a href="#" title="Haus">Haus<a href="#" title="Baum">Baum</a><a href="#" title="Auto">Auto</a>
	</footer>
</article>

Alles anzeigen

(code nicht vollständig)

The Scout · 22. Februar 2014

Übrigens, um etwas neben der rechts neben die sction zu setzen, muss die section ein float: left und das eigentliche Objekt ein float: right bekommen. Dann klappts sicher.

drei spalten Layout

Jetzt mitmachen!

Teilen