✔ Homepage Problem: Post Div Box wird nicht richtig dargestellt sondern doppelt

mäks · 9. November 2010

Hallo

Also ich stehe vor folgendem Problem:

Ich habe eine Homepage gestaltet in der ich alle PHP Inhalte per require einbinde um somit html von php zu trennen (hoffe das stimmt auch so).

In meiner index.php wird eine datei "display_posts.php" aufgerufen.

Zum besseren Verständnis hier etwas Code:

index.php

Code:

<!doctype html>


	   
	   
	<html>
	
	<p class="copyright"> (c) Gruber Marcus 2010 </p>
	<head>
	
		<link rel="stylesheet" type="text/css" href="index.css">
	
	</head>
	
		<body>
			
			<div id="wrapper">
				<div id="top">
					<div id="top_navi">
						<p> 
							<a href="index.php"> Home </a>
							<a href="blog.php"> Blog </a>
							<a href="download.php"> Download </a>
							<a href="register.php"> Register </a>
							<a href="impressum.php"> Impressum </a>
						</p>
					</div>
					<div id="top_banner">
					</div>
				</div>
				
				<div id="bottom">
					<div id="bottom_content">
					
						<?php
						
						# Connect to database
						
						require("basic_connect.php");
						require("display_posts.php");
						
						?>

					</div>
					<div id="bottom_stats">
					
						<fieldset>
						
						<legend> Anmeldung </legend>
						
							<table>
								
								<form action="index.php" method="POST">
								
								<tr> <td> Username </td> <td> <input type="text" name="username"> </td> </tr>
								<tr> <td> Passwort </td> <td> <input type="text" name="passwort"> </td> </tr>
								<tr> <td> <input type="submit" value="senden"> </td> </tr>
								
								</form>

							</table>
						</fieldset>
						
						<p class="whitespace"></p>
						
						
					</div>
				</div>
			
			<div id="float_clear">
			</div>
			
			</div>
		</body>
	   
	
	   
	 </html>

die css datei dazu

Code:

html
{
	font-family: Impact;
	font-size: 15px;
	padding-top: 50px;
	background-image: url("background_scroll.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
}

#wrapper
{
	border-bottom: 4px solid;
	margin: 0 auto;
	padding: 10px;
	width: 920px;
	min-height: 1000px;
}

#top
{
	background-image: url("background_fixed.png");
	background-repeat: repeat;
	background-attachment: fixed;
	width: 900px;
	height: 400px;
	padding: 10px;
}

#top_navi
{
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	background: black;
	width: 900px;
	height: 50px;
}

#top_navi a
{	
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
	font-size: 20px;
}

#top_navi a:hover
{
	color: white;
	border-bottom: 4px solid;
	border-color: white;
	text-decoration: none;
}

#top_navi a:visited
{
	color: white;
}

#top_navi a:active
{
	color: white;
	border-bottom: 4px solid;
	border-color: white;
	text-decoration: none;
}

#top_navi a:focus
{
	color: white;
	border-bottom: 4px solid;
	border-color: white;
	text-decoration: none;
}

#top_banner
{
	border: 1px solid;
	background-image: url("banner.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	width: 900px;
	height: 300px;
	margin-bottom: 50px;
}

#bottom
{
	background-image: url("background_fixed.png");
	background-repeat: repeat;
	background-attachment: fixed;
	float: left;
	width: 900px;
	min-height: 600px;
	padding: 10px;
}

#bottom_content
{
	border: 2px solid;
	border-color: green;
	float: left;
	width: 620px;
	min-height: 900px;
	padding: 10px;
	margin-right: 10px;
}

#bottom_stats
{
	background-color: #e2e2e2;
	float: left;
	border: 4px solid;
	width: 220px;
	min-height: 00px;
	padding: 10px;
}

#bottom_stats fieldset
{
	background-color: #e2e2e2;
}

#bottom_stats table
{
	text-align: center;
}

#bottom_stats input
{
	width: 80px;
}

#float_clear
{
	clear: both;
}

.copyright
{
	width: 100px;
	position: absolute;
	left: 780px;
	top: 0px;
}

.facebook_badge
{
	text-align: center;
}

.whitespace
{
	height: 10px;
}

so :

in der index.php wird also die Datei "display_posts.php" diese hat ein eigenes Stylesheet, in der die Box samt Unterboxen beschrieben wird, die zum ausgeben der Beitraege dient.

Funktion von "display_posts.php":

Sie gibt die ganzen Posts (von mir oder von anderen) in einer Box aus.

display_posts.php

Code:

<?php

/* 

kann man weglassen damit wollte ich nur sicher gehen dass er mir nur eine box ausgibt 

*/

for ($a=0; $a<1; $a++)
{
echo "<html>
		<head> <link rel='stylesheet' type='text/css' href='post.css'/> </head>
		
		<body>
		
			<div id='beitrag'>
				<div id='uid'>
				</div>
				
				<div id='bid'>
				</div>
				
				<div id='date'>
				</div>
				
				<div id='topic'>
				</div>
				
				<div id='beitrag'>
				</div>
				
			</div>
		
		";
		
		
	echo "
		</body>
	 </html>";
}

?>

so und jetzt die dazugehörige CSS-Datei

Code:

#beitrag
{
	float: left;
	border: 2px solid;
	border-color: orange;
	width: 500px;
	min-height: 200px;
	margin-bottom: 10px;
}

#uid
{	
	border-right: 1px solid;
	float: left;
	height: 20px;
	width: 30px;
}

#bid
{
	border-right: 1px solid;
	float: left;
	height: 20px;
	width: 20px;
}

#date
{	
	border-right: 1px solid;
	float: left;
	height: 20px;
	width: 200px;
}

#topic
{
	float: left;
	height: 20px;
	width: 250px;
}

#beitrag
{
	
}

Das Ergebnis findet ihr im Anhang und ich versteh nicht wieso dass er einen doppelten border macht wenn ich zum Beispiel margin: 10px mache... weil ich will ja das zu jedem Post also jeder box ein aussenabstand von 10px ist.

http://i56.tinypic.com/zjijwy.jpg

Der grüne Rand ist die Box in der sich dann die gelben post-boxes befinden sollen.

vielleicht wisst ihr weiter

danke

SpiceLab · 9. November 2010

Ist dir in "display_posts.php" noch nicht aufgefallen, dass sich innerhalb des DIVs #beitrag ein weiteres DIV namens #beitrag befindet?

ID-Bezeichner dürfen aber jeweils nur einmalig im Dokumentbaum vorkommen. Und so erhält das zweite DIV #beitrag eben dieselbe Formatierung wie sein gleichnamiges Elternelement.

mäks · 9. November 2010

tatsächlich was für ein dummer fehler...! was mich jetzt noch interessieren würde. Kommen sich eigentlich die beiden CSS-Dateien jemals in die Quere also stören sich diese.

Oder gibt es eine Möglichkeit ausser dass ich gleiche ID´s in beiden Stylesheets verwende?

SpiceLab · 9. November 2010

Solange in den CSS-Dateien keine gleichlautenden Selektoren mit gegensätzlichen / unterschiedlichen Wertangaben zu selben Eigenschaften enthalten sind, können sie sich nicht in die Quere kommen.

Übrigens ist dein HTML-Code in "display_posts.php" in einem weiteren Punkt nicht valide (regelkonform), der mir vorhin nicht aufgefallen ist: In den Dokumentkörper des Hauptdokuments "index.php" darf kein vollständiges HTML-Gerüst geladen werden, sondern nur das, was sich zwischen <body> </body> befindet.

✔ Homepage Problem: Post Div Box wird nicht richtig dargestellt sondern doppelt

mäks

Mitglied

SpiceLab

ZENmechanic

mäks

Mitglied

SpiceLab

ZENmechanic

Neue Beiträge