✔ Fehler Boxmodell

0

08154711

Erfahrenes Mitglied
Hallo,
Habe folgendes Problem zum einen habe ich einen Abstand zwischen der Flashdatei und der darauffolgenden Navigationsleiste, und zwar einen Abstand siehe Bild der allerdings im IE nicht vorhanden ist(so soll es sein). Das zweite Problem ist wenn der Content zu gross wird die vertikale Scrollleiste eingeblendet, dann rutscht vermutlich der Content zusammen und somit wird auch die horizontale Scrollleiste mit eingeblendet, ein overflow-x:hidden bringt leider auch nichts. Hoffe Ihr habt einen Tipp :)
Code: 
body {
	margin:0;
	padding:0;
	background-color: #000066;
}

#container { 
	background-repeat:no-repeat;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color: #03F;
}

#content { 
	margin:-734px auto;/*-734*/
	width:938px;/*938*/
	height:718px;/*718*/
	overflow:scroll;
}

.p {
	text-align:justify; width:798px;/*898*/
	
}
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div align="center" id="container">
	<div> <img src="img/background.jpg" width="970" height="750" alt="background" />
		<div id="content"><br />
			<br />
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="715" height="70" id="FlashID" title="marquee">
				<param name="movie" value="marquee/infotafel.swf" />
				<param name="quality" value="high" />
				<param name="wmode" value="opaque" />
				<param name="swfversion" value="6.0.65.0" />
				<!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
				<param name="expressinstall" value="../Scripts/expressInstall.swf" />
				<!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="marquee/infotafel.swf" width="715" height="70">
					<!--<![endif]-->
					<param name="quality" value="high" />
					<param name="wmode" value="opaque" />
					<param name="swfversion" value="6.0.65.0" />
					<param name="expressinstall" value="../Scripts/expressInstall.swf" />
					<!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
					<div>
						<h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
						<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
					</div>
					<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
			<img src="img/navileiste.jpg" width="938" height="110" alt="navigation" />
			<p class="p">Den vielen Text lasse ich mal weg...</p>
		</div>
	</div>
</div>
<!--end container -->
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
 
Moin,

ich seh hier keinen Fehler im Boxmodell.

Vielmehr sind noch diese Angaben erforderlich, um die Lücken zu schliessen:

CSS: 
* {
margin:0;
padding:0;
}

object,img { 
display:block;
}


Dass der horizontale Scrollbalken erscheint, liegt schlichtweg an der overflow:scroll-Deklaration, mit der von Beginn an beide Scrollbalken eingeblendet werden, egal, ob nun benötigt, oder nicht. Zudem verringert sich der horizontale Viewport des DIVs #content um die Breite des vertikalen Scrollbalkens, und da das Grafikelement (navileiste.jpg) dieselbe Breite wie der Container besitzt, ist es auch um das Breitenmaß des Scrollbalkens scrollfähig. Eigentlich logisch, oder?

Ergo müsste die Breite des Containers gegenüber der Grafikbreite erhöht werden, und overflow:auto deklariert werden, damit nicht von Beginn an der horizontale Scrollbalken angezeigt wird.

mfg Maik
 
Hallo Maik,
Danke für Deine Lösung. Habe den Abstand der 2 Dateien etwas anders gelöst, ich habe der Navileiste eine margin-top von -5px gegeben, hier mal der neue Code. Kann es mit dieser Lösung Probleme bei Browsern geben? In der Entwurfsansicht springt bei Einfügen der neuen Deklaration der Hintergrund(ist ein Bild) nach links im Browser ist es aber in Ordnung.

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div align="center"><img src="img/background.jpg" width="970" height="750" alt="background" /></div>
<div id="container">
	<div> <br />
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="715" height="70" id="FlashID" title="marquee">
			<param name="movie" value="marquee/infotafel.swf" />
			<param name="quality" value="high" />
			<param name="wmode" value="opaque" />
			<param name="swfversion" value="6.0.65.0" />
			<!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
			<param name="expressinstall" value="../Scripts/expressInstall.swf" />
			<!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
			<!--[if !IE]>-->
			<object type="application/x-shockwave-flash" data="marquee/infotafel.swf" width="715" height="70">
				<!--<![endif]-->
				<param name="quality" value="high" />
				<param name="wmode" value="opaque" />
				<param name="swfversion" value="6.0.65.0" />
				<param name="expressinstall" value="../Scripts/expressInstall.swf" />
				<!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
				<div>
					<h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
					<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
				</div>
				<!--[if !IE]>-->
			</object>
			<!--<![endif]-->
		</object>
	</div>
	<!--
swfobject.registerObject("FlashID");
//-->
	<div><img style="margin-top:-5px;" src="img/navileiste.jpg" width="938" height="110" alt="navigationsleiste" /></div>
	<div id="content">
		<p class="p">Viel Text</p>
	</div>
	<!--end content -->
</div>
<!--end container -->
</body>
</html>
Code: 
body, html {
	margin:0;
	padding:0;
	background-color: #000066;
}

#container {
	width:938px;
	height:718px;
	position: relative;
	margin:-734px auto;
	text-align: center;
}

#content {
	width:900px;
	height:503px;
	margin:15px auto;
	/*border:#930 1px solid;*/
	overflow: auto;
}

.p {
	text-align:justify;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#03C;
	overflow: auto;
}
 
Mit margin-top:-5px wird sich aber das Grafikelement in allen Browsern um 5px nach oben verschieben, also auch in denen, die zuvor keine Lücke an dieser Stelle dargestellt hatten (bei mir IE & Opera) :p

Wenn du aber damit leben kannst, dass nun in diesen Browsern das Flash-Objekt von der Grafik um 5px verdeckt wird, soll's mir auch recht sein :suspekt:

mfg Maik
 
Hi,
war bloß verunsichert weil das background bild nach einfügen des neuen Codes an die linke Seite des Browsers gesprungen ist. Das die Datei überlagert wird habe ich erst gesehen als die Datei auf dem Server war. Danke für den Tipp:)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück