✔ Div Container bekommen einen Abstand nach <p>

L

leon_20v

Erfahrenes Mitglied
Ich versuche gerade eine Seite mit CSS aufzubauen.
Doch leider mache ich irgendwo einen Fehler.

HTML: 
<body>

<div id="container" > 

<div id="test1"></div>
<div id="test2"><p>Text</p> </div>
<div id="test3"> </div>



</div>

</body>

Jetzt ist zwischen dem Container test1 und test 2 sowie zwischen test 2 und test 3 jeweils ein abstand der da nicht hingehört.

Die Container sind wie folgt Definiert:

HTML: 
#container {
width: 970px;
min-height: 400px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #114455;
}

#test1 {
background-color: #554411;
min-height: 50px;
padding: 0px;
margin:0px;

}


warum macht der das? test2 und 3 sind identisch mit test1!

Wenn ich das <p> weg lasse, kommt kein Abstand
 
Das <p>-Element erzeugt als sog. "Block-Element" (siehe HTML-Elementreferenz für Block-Elemente) automatisch einen Absatz im Textfluß, und besitzt, für seine Elementgattung typisch, einen voreingestellten vertikalen Außenabstand, um zum vorherigen und nachfolgenden Element einen gewissen Abstand zu wahren.

Lösung:

CSS: 
p { margin:0; }

Noch besser aber mittels dem Universalselektor "*" zu Beginn des Stylesheets, um weitere Block-Elemente (siehe o.g. Link) einzubeziehen, die ebenso solche Initialwerte bzgl. eines Außen- und/oder Innenabstandes besitzen, und die sich in den Browsern zum Teil voneinander unterscheiden - insbesondere IE vs. übrige Browser.

Als klassisches praktisches Beispiel sei die unsortierte Liste <ul> genannt, die in Navigationmenüs zum Einsatz kommt, und je nach Browsertyp entweder margin:0 oder padding:0 zu deklarieren ist, um die Listeneinträge <li> linksbündig auszurichten.

CSS: 
* {
margin:0;
padding:0;
}
 
Zuletzt bearbeitet:
danke für deine antwort. also ich soll dem menü position:absolute geben? das habe ich jetzt gemacht.

Jetzt hab ich aber das problem, das die danach kommenden container sich unter das menü schieben****


was ganz komisch ist, wenn ich die datei mit <?php include_once ("") ?> einbinde, dann funktioniert es einwandfrei?
 
Zuletzt bearbeitet:
Würdest du in deinen Folgebeiträgen weiterhin auf Groß-/Kleinschreibung achten, wie in der Netiquette erwünscht? Danke!

Bei dir bringt es keinen Unterschied?

Seltsam, bei mir schon. Wie unschwer zu erkennen, verschiebt sich da nichts mehr nach unten.

dropdown.png

Schon mal den Browsercache geleert, um sicher zu stellen, dass nicht das überholte CSS geladen wird?
 
hmm.. ja also bei dem Bild welches du mir gepostet hast ist das ganze per PHP-Include gemacht worden. Dann funktioniert es komischerweise. (in der includeten Datei befindet sich nur das div, sonst nichts)

Was für Grundlagen über das Includen per PHP? Kannst du mir sagen was du meinst?


Ich versuche das aber gerade eh ohne PHP-Include zu machen. Wenn ich jetzt dem div mit der Navigation absolute geben, dann rutscht das Bild unter die Navigation. Muss ich jetzt im Fluss ein Blind-Div mit einer gewissen Höhe einfügen, damit alles wieder passt oder gibts eine elegantere Lösung?

Was benutzt du für einen Browser weil auf dem Screenshot hat sich ja alles schrecklich verschoben. Ich habs im Interntexplorer, FF, Opera und Netscape angeschaut, da passt es überall.
 
Nicht das umschliessende <div> soll absolut positioniert werden, sondern lediglich die Untermenüebenen.

Damit sich diese Formatierung nicht in der Voreinstellung auf das <body>-Element bezieht, werden im Gegenzug die <li>-Elemente mit position:relative versehen - auf diese Weise verhält sich die absolute Position des nachfolgenden Untermenüs darin relativ.

Wenn du meine Antworten aufmerksam gelesen, und einfach meinem empfohlenen Link in Post #4 gefolgt wärst, hätte sich schon deine Frage nach einer eleganteren Lösung erübrigt :rolleyes:

Und hier der Link zum dazugehörigen Artikel: Son of Suckerfish Dropdowns.

@ include: Wenn dir nicht klar ist, worauf ich hinaus wollte, und die verlinkten Fehlermeldungen des Validators dir ebenso nichts sagen, sollten dir wohl die rotmarkierten Zeilen verdeutlichen, was hier syntaktisch verkehrt ist:

<div id="content"><!-- InstanceBeginEditable name="Inhalt" -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="1.css" rel="stylesheet" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>indextest</title>
</head>

<body>
<table width="708" border="0" cellspacing="0" cellpadding="0" style="margin-left: 10px; margin-right: 10px; margin-top: 0px;">
<tr>
<td colspan="2" bgcolor="#19202C"><h3>WILLKOMMEN BEI HIGH-BORN!! LET&acute;s START YOUR CAREER</h3></td>
</tr>
<tr>
<td width="508" bgcolor="#F5F5F5"><p>Du bist interessiert an dieser Branche?<br />
Du siehst gut aus und hast lust auf etwas Neues?<br />

Du willst irgendwann neben den gro&szlig;en Stars laufen?<br />
Du suchst Spass und neue nette Leute?<br />
Du willst was erleben und aus deinem Altag raus?<br />
Du willst was aus Dir machen und daf&uuml;r richtig was tun?<br />
Du suchst einen kompetenten Partner der dir immer zur Seite steht?
</p>

<p>Dann sind wir genau das Richtige f&uuml;r dich!<br />
<br />
</p></td>
<td width="200" bgcolor="#F5F5F5">&nbsp;</td>
</tr>
</table>
<p></p>
<p></p>
<table width="580" border="0" cellspacing="0" cellpadding="0" style="margin-left: 74px; margin-right: 74px; margin-top: 0px;">
<tr>

<td width="280" bgcolor="#19202C"><h3>MITGLIED</h3></td>
<td width="20">&nbsp;</td>
<td width="280" bgcolor="#19202C"><h3>PREMIUM-MITGLIED</h3></td>
</tr>
<tr>
<td bgcolor="#F5F5F5"><p>Die Mitgliedschaft bei High-Born ist absolut kostenlos und geht schnell.</p>
<p>Du kannst als Mitglied den kompletten Inhalt der Seite sehen und unsere Models betrachten sowie dich Interaktiv beteiligen.</p></td>

<td>&nbsp;</td>
<td bgcolor="#F5F5F5"><p>Als Premium Mitgied wird dir der Premium-Bereich freigeschalten. Hier kannst du Deine eigenen Fotos hochstellen und deine SetCard bearbeiten.</p>
<p>N&auml;heres findest Du <a class="speziell" href="premium.php">hier</a>.</p></td>
</tr>
</table>

<p></p>

<p></p>
<table width="708" border="0" cellspacing="0" cellpadding="0" style="margin-left: 10px; margin-right: 10px; margin-top: 0px;">
<tr>
<td colspan="2" bgcolor="#19202C"><h3>NEWS / AKTUELLES</h3></td>
</tr>
<tr>
<td width="508" bgcolor="#F5F5F5"><p>High-Born geht zum Test ONLINE******</p></td>
<td width="200" bgcolor="#F5F5F5" style="text-align:right;"><p>03.10.2010</p></td>

</tr>
</table>
</body>
</html>
<!-- InstanceEndEditable --></div>
Zum Vergrößern anklicken....


Mein hochgeladener Schnappschuß stammt übrigens aus der aktuellen FF-Version (WinXP).
 
Zuletzt bearbeitet:
Irgendwie sehe ich nicht was du meinst? Bei der Includeten Datei habe ich jetzt eigentlich alles weggelassen an html tags. da steht nur das DIV drinn.?


Vorallem, meine Datei auf dem rechner sieht garnicht so aus? passiert das durch das include?


Ahh ich hab den Fehler gefunden, ich hab da eine Datei Included. Das will ich ja eigentlich eh nimmer (dahinter war ein PHP switch)


Aber das mit der Position verstehe ich immer noch nicht. Kannst du mir das evtl. an der CSS verdeutlichen?

HTML: 
/* Navigation */

ul, li
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	
}

.menu
{	
	position: absolute;
    padding: 0px 12px;
	z-index: 2;
	
}

.menu li
{
	width: 105px;
	float: left;
}

.menu a.oben
{
	border: 1px solid #000;
	background-color: #000;
	text-decoration: none;
	text-align: center;
	font-weight: normal;
	cursor: default;
	margin: 0px 2px;
	padding: 2px 0px;
	display: block;
	height: 15px;
	color: #DDDDDD;
}

.menu a
{
	border: 1px solid #000;
	background-color: #fff;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	cursor: default;
	margin: 0px 2px;
	display: block;
	height: 20px;
	color: #000;
}

.menu a:hover
{
	background-color: #ccc;
}
.menu a.oben:hover
{   
	background-color: #000;
	color: #FFF;
	cursor: pointer;
	text-decoration: underline;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
	font-size: 12px;
	display: none;
	width: 105px;
	float: left;
	cursor: pointer;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
	font-weight: normal;
	padding-top: 2px;
	border-top: 0px;
	cursor: pointer;
	color:#000;
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück