Zur Navigation

Merkwürdiger Abstand [2]

11 Jörg Kruse

Mit dem Code, den du oben gepostet hast, kann ich den Fehler nicht reproduzieren - wenn margin auf 0 gesetzt ist, sind die Abstände beim IE, Firefox und Opera gleich

02.05.2006 07:12

12 Isildur

Mhh der HTML Code an der Stelle selber macht ja auch keine Problem weiter unten nur bei dem obersten Eintrag. Hier nochmal der Screenshot dazu. Das kann dann ja eigentlich nichts mit margin oder so zu tun haben, weil dann müsste es doch in denen darunter(die ja im Prinzip gleich sind). auch so sein oder? In wie fern ist dieser erste Eintrag besonders, denn da muss ja irgendwo der Fehler liegen. Ich poste mal den Code der kompletten Seite vll hab ich ja irgendwo was nicht gechlossen, was ich übersehe oder so.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Myrkwid.net</title>
<meta name="author" content="Henning Schwab">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="SHORTCUT ICON" href="11.ico">
</head>
<body>
<div id="all">
<div id="head">
<h1>Head</h1>
</div><div id="top">
<p style="text-align:left; float:left;">
	&nbsp;Sie sind der 5. Besucher dieser Seite.
</p>
<p style="text-align:right; font-family:arial; font-size:10pt;">
Di, 02.05.2006-17:50&nbsp;
</p>
</div><div id='navi'><p class='menutitle'>Navigation</p>
<a class='menu' href='?id=1&c=news&offset=0&'>Seite</a>
<a class='u-menu' href='?id=1&c=news&offset=0&'>&rArr;Meldungen</a>
<a class='u-menu' href='?id=1&c=gb&offset=0&'>&rArr;G&auml;stebuch</a>
<a class='menu' href='?id=2&c=news&offset=0&'>Link</a>

</div>         <div id="right">
         <div id='menu'>
         	<p class='menutitle'>Entwicklungsblog</p>
         	<a class='menu' href='?id=1'>blub</a>
         	<a class='menu' href='?id=2'>blub</a>
		<a class='menu' href='#'>blub</a>
         </div>

	</div><div id="content">
		<h2>Meldungen</h2>
<div class='newshead'>
	neuster artikel
</div>
<div class='newsbody'>
	text
</div>
<div class='newstail'>
<p class='date'>
	26.04.2006-20:07</p>

<p class='comment'>
	<a href='?id=1&c=comment&offset=13'>Kommentare</a>
</p>
<div>
</div>
</div>
<div class='newshead'>
	ads
</div>
<div class='newsbody'>
	asssd
</div>
<div class='newstail'>

<p class='date'>
	24.04.2006-22:48</p>
<p class='comment'>
	<a href='?id=1&c=comment&offset=12'>Kommentare</a>
</p>
<div>
</div>
</div>
<div class='newshead'>
	dfg
</div>
<div class='newsbody'>
	dfg
</div>
<div class='newstail'>
<p class='date'>
	24.04.2006-22:48</p>
<p class='comment'>
	<a href='?id=1&c=comment&offset=11'>Kommentare</a>
</p>
<div>
</div>
</div>
<div class='newshead'>

	asd
</div>
<div class='newsbody'>
	asd
</div>
<div class='newstail'>
<p class='date'>
	24.04.2006-21:28</p>
<p class='comment'>
	<a href='?id=1&c=comment&offset=10'>Kommentare</a>
</p>

<div>
</div>
</div>
<div class='newshead'>
	asd
</div>
<div class='newsbody'>
	asd
</div>
<div class='newstail'>
<p class='date'>
	24.04.2006-21:28</p>
<p class='comment'>

	<a href='?id=1&c=comment&offset=9'>Kommentare</a>
</p>
<div>
</div>
</div>
<div id='pagecount'><a class='' href='?id=1&c=news&offset=5&'>&Auml;ltere Meldungen im Archiv</a>
</div></div><div id="notice">
<p style="float:right"><a style="text-align:right; background-color:#000000;" target="_blank" href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" border="0" height="31" width="88"></a></p>
<p style="float:left">Optimiert f&uuml;r <img src="ff.png" width="20" height="19" border="0" alt=""> Firefox 1.5.0.* und 1024x768. &copy;2006 by H.Schwab(Isildur).</p>

<p><a style="text-align:right; background-color:#000000;" href="http://jigsaw.w3.org/css-validator/" target="_blank"><img style="border:0;width:88px;height:31px;" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" ></a></p>
</div></div>
</body>
</html>
* {margin: 0; padding: 0;}
body
	{
			background-color:#000000;
			color:#FFFFFF;
                         font-size:11pt;
	}
h2
	{
         		text-align:center;
                         font-size:1.5em;
                         text-decoration:underline;
         }
input, textarea
	{
         		background-color:#1F1F1F;
                         color:#FFFFFF;
         }
a
	{
			display:block;
                         padding:0px 3px;
	}
ol
	{
         		list-style:none;
         }
a:hover, a:link, a:visited, a:active
	{
			color:#FFFFFF;
                         text-decoration:none;
	}
a:hover
	{
			text-decoration:underline;
	}
/**********************************************/
/**********************************************/
/************Positionierung********************/
/**********************************************/
/**********************************************/
#all
	{
         		margin:10px;
         }
#head, #top, #notice
         {
         		border:1px dotted #A9A9A9;
         }
#navi, #content, #right
	{
			padding:10px;
         }
#head, #top, #content
	{
         		margin-bottom:6px;
         }
#navi, #right
	{
                         width:135px;
         }
#head
	{
         		height:100px;
                         width:100%;
         }
#top
	{
         		clear:both;
                         padding:5px;
                         font-weight:bold;
         }
#navi
	{
         		float:left;
         }
#content
	{
			margin-right:165px;
                         margin-left:165px;
         }
#right
	{
         		float:right;
         }
#notice
	{
         		clear:both;
                         padding:7px;
         }
#pagecount
	{
			height:1em;
                         margin:5px 0px;
         }
#pagecount a
	{
			display:inline;
         }
/**********************************************/
/**********************************************/
/*****************Class************************/
/**********************************************/
/**********************************************/
p.menutitle, a.menu, a.umenu
	{
                         vertical-align:middle;
         }
p.menutitle
	{
         		background-color:#3F3F3F;
                         border:1px dotted #A9A9A9;
                         font-weight:bold;
                         font-size:12pt;
                         margin-top:10px;
                         padding:0px 5px;
         }
a.menu
	{
                        background-color:#1F1F1F;
                        border:1px dotted #A9A9A9;
                        border-top:0px;
                        padding:0px 5px;
         }
a.u-menu
	{
                        background-color:#1F1F1F;
                        border:1px dotted #A9A9A9;
                        border-top:0px;
                        padding:0px 7px;
         }
div.newshead
	{
         		background-color:#3F3F3F;
                         border:1px dotted #A9A9A9;
                         font-weight:bold;
                         font-size:12pt;
                         text-align:center;
                         padding:3px;
                         margin-top:10px;
         }
div.newsbody
	{
                      	background-color:#1F1F1F;
         		border:1px dotted #A9A9A9;
                         border-top:0px;
                         padding:5px;
         }
div.newstail
	{
                      	background-color:#2F2F2F;
         		border:1px dotted #A9A9A9;
                         border-top:0px;
                         text-align:right;
                         margin:0px;
                         padding:0px;
         }
div.newstail div
	{
                         clear:both;
          }
p.date
	{
         		float:right;
                         font-size:10pt;
         }
p.comment
	{
         		float:left;
                         font-size:10pt;
         }
div.gbhead
	{
                 background-color:#3F3F3F;
                 border:1px dotted #A9A9A9;
                 padding:5px;
                 margin-top:10px;
         }
div.gbbody
	{
         	padding:5px;
                 background-color:#1F1F1F;
                 border:1px dotted #A9A9A9;
                 border-top:0px;
         }
div.gblist
	{
         	width:4.4em;
                 text-align:right;
                 float:left;
                 margin-right:3px;
         }
Der mit PHP erstelle Code ist noch etwas wirr ich muss den noch richtig formatieren mit \t&\n und das #all fliegt auchnoch raus.

02.05.2006 18:04

13 Jörg Kruse

Ich denke, ich habe den Auslöser für die Fehlanzeige gefunden, er ist z.T. tatsächlich außerhalb von #content zu finden:

Das div#navi hat ja die Eigenschaft float:left:

#navi
{
        float:left;
        }

Dieser Umfluss wird durch das erste div innehalb von div.newstail aufgehoben:

div.newstail div
{
                        clear:both;
         }

Die Folge ist, dass Firefox und Opera völlig korrekt dieses Clear-Div genau unterhalb dem Ende des Navigations-Divs beginnen - die darüber liegenden Elemente werden dementsprechend zu dieser Linie ausgedehnt. Dadurch entsteht dann dieser auf den ersten Blick rätselhafte Abstand.

Du könntest diesen Effekt vermeiden, indem du die Meldungen etwas tiefer beginnen lässt, dann erhält das div.newstail keine vergrößerten Abstand mehr

02.05.2006 20:03 | geändert: 02.05.2006 20:04

14 Isildur

Danke!
Ja ich arbeite das erste mal mit floats(Webseiten schreibe ich im kleinere Stil schon seit einigen Jahren) und die Teile sind irgendwie etwas schwierig zumindest am Anfang weil man doch einiges beachten muss.
Aber jetzt mit
div#content h2
	{
         		padding:6px;
         }
geht alles super!

edit:am einfachsten gehts mit .newstail{height:1em;}

02.05.2006 21:13 | geändert: 03.05.2006 20:16

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]