Meine Überschrift bzw. der Titel soll unter der Bildergalerie dargestellt werden,
nur die DIVS sollen dem Attribut (FLOAT:LEFT) folgen.
HTML
[CODE]
Fotostudio 2010
<div class="menu_fontstyle" id="menu"> <!-- MENU -->
<ul id="menu_left"> <!-- MENU ON LEFT -->
<li><a href="">Startseite</a></li>
<li><a href="">Hintergrundbilder</a></li>
<li><a href="">Tutorials</a></li>
<li><a href="">Designs + Fonts</a></li></ul>
<ul id="menu_right"> <!-- MENU ON RIGHT -->
<li><a href="">Impressum</a></li>
<li><a href="">Kontakt</a></li></ul>
</div> <!-- END MENU -->
<div class="content">
<!-- 1ST TEXT -->
<h3>Willkommen auf meiner Website <span>(Intro)</span></h3>
<p>Informationen und einleitende Worte ...</p>
<hr />
<p>
Lorem ipsum
</p>
<hr />
<!-- 2ND TEXT -->
<h3>Meine Favoriten <span>(Top 20)</span></h3>
<p>Um Bilder herunterladen zu können, klicken Sie auf die "Thumbnails"</p>
<hr />
<div><a href="wallpaper/wall_01.jpg"><img src="thumbnails/wall_01.png" /></a>
<br />Conquer The World |
<a href="live/wall_01.jpg">Live View</a></div>
<div><a href="wallpaper/wall_02.jpg"><img src="thumbnails/wall_02.png" /></a>
<br />Creamy Sky |
<a href="live/wall_02.jpg">Live View</a></div>
<div><a href="wallpaper/wall_03.jpg"><img src="thumbnails/wall_03.png" /></a>
<br />Dark Day |
<a href="live/wall_03.jpg">Live View</a></div>
<div><a href="wallpaper/wall_04.jpg"><img src="thumbnails/wall_04.png" /></a>
<br />Horsehead Nebula |
<a href="live/wall_04.jpg">Live View</a></div>
<div><a href="wallpaper/wall_05.jpg"><img src="thumbnails/wall_05.png" /></a>
<br />Illuminated |
<a href="live/wall_05.jpg">Live View</a></div>
<div><a href="wallpaper/wall_06.jpg"><img src="thumbnails/wall_06.png" /></a>
<br />London Eye |
<a href="live/wall_06.jpg">Live View</a></div>
<div><a href="wallpaper/wall_07.jpg"><img src="thumbnails/wall_07.png" /></a>
<br />Placid |
<a href="live/wall_07.jpg">Live View</a></div>
<div><a href="wallpaper/wall_08.jpg"><img src="thumbnails/wall_08.png" /></a>
<br />Summer |
<a href="live/wall_08.jpg">Live View</a></div>
<div><a href="wallpaper/wall_09.jpg"><img src="thumbnails/wall_09.png" /></a>
<br />Clouds Like Silk |
<a href="live/wall_09.jpg">Live View</a></div>
<div><a href="wallpaper/wall_10.jpg"><img src="thumbnails/wall_10.png" /></a>
<br />The Sleeping Harbour |
<a href="live/wall_10.jpg">Live View</a></div>
<div><a href="wallpaper/wall_11.jpg"><img src="thumbnails/wall_11.png" /></a>
<br />The Mountains Of Guilin |
<a href="live/wall_11.jpg">Live View</a></div>
<div><a href="wallpaper/wall_12.jpg"><img src="thumbnails/wall_12.png" /></a>
<br />Westlake At Sunset |
<a href="live/wall_12.jpg">Live View</a></div>
<div><a href="wallpaper/wall_13.jpg"><img src="thumbnails/wall_13.png" /></a>
<br />Red Blossom |
<a href="live/wall_13.jpg">Live View</a></div>
<div><a href="wallpaper/wall_14.jpg"><img src="thumbnails/wall_14.png" /></a>
<br />Stones |
<a href="live/wall_14.jpg">Live View</a></div>
<div><a href="wallpaper/wall_15.jpg"><img src="thumbnails/wall_15.png" /></a>
<br />Vitrex Cubes |
<a href="live/wall_15.jpg">Live View</a></div>
<div><a href="wallpaper/wall_16.jpg"><img src="thumbnails/wall_16.png" /></a>
<br />Deep Silence |
<a href="live/wall_16.jpg">Live View</a></div>
<div><a href="wallpaper/wall_17.jpg"><img src="thumbnails/wall_17.png" /></a>
<br />Snow Leopard |
<a href="live/wall_17.jpg">Live View</a></div>
<div><a href="wallpaper/wall_18.jpg"><img src="thumbnails/wall_18.png" /></a>
<br />Art |
<a href="live/wall_18.jpg">Live View</a></div>
<div><a href="wallpaper/wall_19.jpg"><img src="thumbnails/wall_19.png" /></a>
<br />Aurora |
<a href="live/wall_19.jpg">Live View</a></div>
<div><a href="wallpaper/wall_20.jpg"><img src="thumbnails/wall_20.png" /></a>
<br />Tiger |
<a href="live/wall_20.jpg">Live View</a></div>
<hr />
<!-- 3RD TEXT -->
<h3>Free Fonts <span>(Top 10)</span></h3>
</div> <!-- END CONTENT -->
@charset "utf-8";
/* stylesheet.css */
body{
background: #111;
margin: 0;
padding: 0;}
.header_fontstyle{
font-weight: bold;
font-family: tahoma;}
#span_left{
color: #FFF;
float: left;
margin: 0px 15px 0px 15px;
line-height: 70px;
font-size: 36px;}
#span_left em{
color: #CF0;
font-style: normal;}
#header{
position: relative;
top: 0;
min-width: 1000px;
width: auto;
height: 70px;
background-color: #222;}
.menu_fontstyle{
color: #FFF;
font-weight: bold;
font-size: 11px;
font-family: tahoma;
line-height: 29px;}
.menu_fontstyle a:link,
.menu_fontstyle a:visited{
color: #BBB;
text-decoration: none;}
.menu_fontstyle a:hover,
.menu_fontstyle a:focus{
color: #FFF;
text-decoration: none;}
.menu_fontstyle ul{
list-style: none;
padding: 0;
margin: 0;}
.menu_fontstyle li{
margin: 0px 15px 0px 15px;}
#menu_left li{
float: left;}
#menu_right li{
float: right;}
#menu{
position: relative;
top: 0;
min-width: 1000px;
width: auto;
height: 30px;
background-color: #333;
border-bottom: solid 1px #555;
border-top: solid 1px #444;}
.content{
position: relative;
top: 0;
margin: 0 20px 0 20px;
font-family: tahoma;
min-width: 980px;}
.content h3{
color: #FFF;
margin: 20px 0 0 0;}
.content h3 span{
color: #555;
font-size: 14px;}
.content hr{
border: solid 1px #fff;}
.content p{
color: #BBB;
font-size: 12px;
margin: 0;
line-height: 20px;}
.content div{
float: left;
font-size: 12px;
color: #FFF;
text-align: center;
margin: 0 20px 20px 0px;}
.content div a:link,
.content div a:visited{
color: #CF0;
text-decoration: none;}
.content div a:hover,
.content div a:focus{
text-decoration: underline;}
.content img{
padding: 3px;
border: solid 3px #333;}
.content span{
position: relative;
font-size: 12px;
color: #FFF;}
.content img:hover{
border: solid 3px #FFF;}
hat geklappt - werd’ ich mir in Zukunft merken