css überlappen

[krackmoe]

Ich hab einige Probleme mit der Positionierung der ganzen Elemente. Es haut immer irgendwas nicht hin und im Moment ist es, wenn ich die Seite kleiner ziehe dann überlappt sich das Menü mit meinem Content.

Könntet ihr mir bitte helfen bei der CSS Datei?

Url wäre mal folgende:
Daniel Zimmermann's Lifestyle Blog

so wie ich die ganzen Div angeordnet habe:

<div id="top"><a href="http://www.daniel-zimmermann.at/Blog"><div id="banner"></div></a></div>
				<div id="main">
					<div id="menu">					
						<div style="background-color:#B3DFFF; width: 100%">Menu</div><br />						
						<a href="login.php">Admin-Center</a>										
					</div>
					<div id="newsAnzeigen">			
					    <xsl:for-each select="channel/item">
					    	<xsl:sort select="id" order="descending" />					    	
					    	<div id="tableBlogItem">
					    		<div id="blogTitle">
					    			<a><xsl:attribute name="name"><xsl:value-of select="concat('#',title)" /></xsl:attribute></a>
					    			<xsl:value-of select="title" />					    					
					    		</div>
					    		<div id="blogDatum">
					    			<xsl:value-of select="datum" />
					    		</div>				    		
					    		<div id="blogText">
						    		<xsl:if test="not(bildUrl = '')">
						    			<img class="blogBild">
						    				<xsl:attribute name="src"><xsl:value-of select="bildUrl" /></xsl:attribute>
						    				<xsl:attribute name="alt"><xsl:value-of select="alternativText" /></xsl:attribute>
						    			</img>
						    		</xsl:if>				    		
					    			<xsl:value-of select="text" />					    			
					    		</div>
					    		<a href="RSSFeed.rss" style="position: absolute; right: 10px; bottom: 10px"><img src="rss.gif" alt="RSS-Feed" /></a> 	
					    	</div><br />		    				    
				    	</xsl:for-each>
			    	</div>						
				  </div>

styleBlog.css:

#main{
	margin-bottom:0px;
	margin-right:11.5em;
	margin-top:140px;
	text-align:justify;
	margin-left: 100px;
}
#newsAnzeigen{
	clear:left;
	margin-bottom:0;
	margin-right:11.5em;
	margin-top:140px;
	text-align:justify;
	width: 90%;
	min-width: 90%;
}
#menu{
	background:white none repeat scroll 0 0;
	float:right;
	margin-bottom:1em;
	position:absolute;
	right:200px;
	text-align:left;
	top:140px;
	width:100px;
	border: 1px solid black;
	
}
#tableBlogItem{	
	width: 90%;
	max-width: 90%;
	height: 240px;
	min-height: 240px;
	padding: 4px; 
	text-align: left;	
	background-color: white;
	border: 1px solid black;
	overflow: auto;	
}
#blogTitle{
	font-weight: bold;
	background-color: #B3DFFF;
}
#blogDatum{

}
img.blogBild{
	float: right;
	border: 1px solid black;
	margin: 5px;
}
#blogText{
	padding-top: 10px;
	overflow: auto; 
	word-wrap: break-word;
}
#blogBild{
	float: right;
}
#top{
	background:#3d8ac4 none repeat scroll 0 0;
	color:black;
	height:100px;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;	
}
#banner{
	background-image: url(dazi.png);
	height: 100px;
	width: 500px;
	text-align: center;
	margin: auto; 
}

 

[Efchen]

1. float und position gleichzeitig ist sinnfrei. Entferne eines der beiden.
2. #menu soll immer 200px von rechts liegen. #tableBlogItem (was übrigens mehrfach vorkommen, IDs müssen aber eindeutig im Dokument sein) soll 90% (vom Elternelement) breit sein. Logisch, dass sich das bei einer bestimmten Größe überlappt, wenn Du die Größe prozentual festlegst und den Abstand pixelgenau.

Das HTML ist übrigens grauenvoll. Semantik = Null. Nur div-Suppe. Keinen Deut besser als Tabellenlayout.

 

[krackmoe]

zu 2.) Ja mh... wie kann ich das mit den mehrfachen Id's lösen? Das lässt sich irgendwie nicht umgehen wenn ich das in einer Schleife mache und es einfach mehrere von diesen tableBlogItems geben muss und zwar soviel wie in der DB drinstehen.

zu der Semantik:
Mh.. ja wie macht man das besser!? Ich brauch die div Container ja

 

[Efchen]

a mh... wie kann ich das mit den mehrfachen Id's lösen?

Indem Du statt IDs Klasse verwendest. Die dürfen mehrmals in einem Dokument vorkommen.

und es einfach mehrere von diesen tableBlogItems geben muss und zwar soviel wie in der DB drinstehen.

Aber nicht mit ein und der selben ID.

zu der Semantik: Mh.. ja wie macht man das besser!? Ich brauch die div Container ja

Mit HTML. Lerne HTML. HTML ist dafür da, Deinem Inhalt eine Bedeutung zu geben. Mit <div> vermittelst Du keine Bedeutung. Zeichne Überschriften als solche aus, Textabsätze, Adressen, wichtige Textpassagen, etc.

<div> wird lediglich dazu verwendet, mehrere Elemente zu gruppieren. Zu mehr brauchst Du die nicht. Das ist ein Trugschluss, dem viele CSS-Einsteiger unterliegen. HTML ist das Zauberwort. Und nicht nur div ist ein "Container" in dem Sinne, in dem Du ihn verwendest. Auch <p>, <address>, <ul> usw. sind solche Container, alle diese Elemente nennt man "Block-Elemente" (im Gegensatz zu den Inline-Elementen wie <em>, <strong> oder <span>).