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;
}HTML
<!DOCTYPE html>
<html>
<head>
<title>Ender Karaman - Gas, Heizung, Sanitä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ür Gas-Heizung-Sanitär-Solartechnik in Rosenheim"/>
<meta name="keywords" content="Ender Karaman, Rosenheim, sanitär, heizung, klima, Ender Karaman, Rosenheim, 83022, innstrasse 26, hebebühnenSanitär,SFA-Hebeanlagen, Heizung,Solar,Gas, handwerker, bauen, fliesen, klima, bad, bäder, sanitär, gas, wasser, armaturen, dusche, umwelt, energie, klimageräte, elektro, wärmepumpe, solar, brenner, klimaanlage, klimatechnik, heizkörper, badmöbel, klempner, heizungsbau, pellets, heizkessel, solaranlage, anlage, solarenergie, wassseraufbereitung, ölheizung, wartung, heizgeräte, badplanung, gebäudetechnik, sonnenenergie, zentralheizung, energiesparen, energietechnik, sanitäranlagen, haustechniker, wärmetechnik, abwassertechnik, traumbad, lüftungstechnik, brennwert, wasserinstallation, sanitärinstallation, warmwasser, heizungsanlage, solarwärme, sanitaer, regenwassernutzung, lüftung, solarstrom, heizen, heizungstechnik "/>
<meta name="date" content="31.01.2014/11:00"/>
<meta name="autor" content="Venedikoglu Ümit"/>
<meta name="publisher" content="Venedikoglu Ümit"/>
<meta name="audience" content="alle, all"/>
<meta name="contributor" content="Ümit Venedikoglu"/>
<meta name="page-topic" content="Gas, Heizung, Sanitär, Solartechnik, Ender Karaman, SFA Anlagen, bad, solarenergie, badplanung, armaturen, zentralheizung, wasserinstallation, sanitärinstallation, wä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är">Aktuell</a></li>
<li><a href="ueber-uns.htm" title="Der Werdegang von uns">Über uns</a></li>
<li><a href="team.htm" title="Unser Team im Ü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">Öl</a></li>
<li><a href="solartechnik.htm" title="Solartechnik">Solartechnik</a></li>
<li><a href="bad.htm" title="Bad und Sanitärinstallation">Bad und Sanitä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ä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ß- und Industrianlagen.</p>
<p>Erweitert wird unser Leistungskatalog durch eine immer wichtiger werdende Energieberatung und das Aufzeigen von Einsparpotentialen. <br/>Auch die Notdiensteinsätze für unsere Stammkunden sind für uns selbstverständlich.</p>
<p class="abstand">Für uns steht die Zufriedenheit unserer Kunden im Mittelpunkt unserer täglichen Arbeit. Wir stehen <br/>Ihnen gerne Rund um die Uhr mit Rat und Tat bei Ihrem Vorhaben zur Seite. Überzeugen Sie sich von unserem Service <br/>und der Qualitä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ß- 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>
© 2013 [url='http://www.ender-karaman.de/']www.ender-karaman.de[/url] · Alle Rechte vorbehalten · Created by Venedikoglu
</p>
</div></footer>
</div>
</body>
</html>
, versuche mit zu verbessern und zu lernen!!