Objekt lässt sich nicht positionieren

Harald_Lesan · 4. April 2010 um 17:21

[B]Das Objekt von dem ich spreche ist eine einfache Überschrift/Titel (h3),
es fließt nach links, in der CSS habe ich das aber nicht angegeben, lediglich divs sollen nach link fließen.
Die Überschrift soll unter den Bildern (Bildergalerie erscheinen)

Bin relativ neu im Umgang mit HTML & CSS.

Hier der HTML-Code[/B]

<body>
	<div class="header_fontstyle" id="header">
    <span id="span_left">Fotostudio <em>2010</em></span></div>   <!-- TITLE -->
    
	<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 -->
    
    
</body>

Hier die CSS

@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;}

system · 6. April 2010 um 13:20

Ich glaube, Du stellst Dir hier mit Deiner relativen Positionierung ein Bein. Lass die raus, im Normalfall wirst Du das nicht brauchen.
Mir fällt aber auf, dass Du nur

und keine

oder

hast, das ist unlogisch und semantisch nicht korrekt. Korrigiere Deine Semantik (da sind noch etliche mehr Patzer drin)!

Dana1 · 6. April 2010 um 14:42

Versuch’s mal mit position: absolute;

im style

#box {
position:absolute;
width:500px;
height:100px;
top:50px;
left:50px;
overflow:auto;
border:solid 2px #FF0000;
}

im Body

<div id="box">
Text
</div>

Werte entsprechend ausmessen.

Diese Box kann man bei linksbündigen Designs gut positionieren.

system · 6. April 2010 um 15:07

Lasst doch die absolute und relative Positionierung mal außen vor. Die muss man schon genau verstehen, um sie anzuwenden. Außerdem ist sie nicht geeignet für die normale Positionierung von Elementen. Das kann der Browser viel besser. Es reicht in den allermeisten Fällen, solche Positionierungen mit float zu machen. position kommt eigentlich nur bei ganz besonderen Fällen ins Spiel. Gerade Anfänger glauben, absolute Positionierung sei die Erfüllung für den Designer - ist sie aber nicht.

Safak53 · 29. Dezember 2010 um 19:44

Danke Dana +!!! klappt ja auch mit bildern dieses

tag (html) + Style(css)!!! =D