• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div-positionierung(ie|ff und float:left;) und -höhe(ie)

Status
Für weitere Antworten geschlossen.
S

Spyro

Neues Mitglied
Hi boardies,

habe das Problem, dass der IE die divs nicht nebeneinander positioniert, obwohl "float: left;" in der css-Beschreibung für eines der beiden angegeben ist.
Weiterhin scheint er die "height"-Angabe in manchen div-Blöcken zu ignorieren (hier: "gap" und "crossover")
Zusätzlich ergibt sich im Fifo ein Problem mit dem "data-content"-Block. Ich setzte den Innenabstand per "padding: 24px;" und versuche damit zu erzielen, dass alles was später in den Content-Teil geschrieben wird, eben einen Abstand von 24px zum Rand hat. Aber der Fifo rechnet den Innenabstand zur normalen Breite und Höhe dazu. Normal oder Denkfehler von mir?

Zum Schluss noch der Code.

template.html
Code: 
<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML-Template</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>

<div id="head-block">

	
	<div id="banner">###BANNER###</div>

	
	<div id="mnavi">###MAIN_NAVI###</div>

	
	<div id="gap"></div>

	
	<div id="snavi-content-block">
		<div id="snavi">###SUB_NAVI###</div>
		<div id="data-content">###CONTENT###</div>
	</div>

	
	<div id="crossover"></div>

	
	<div id="footnote">###FOOTNOTE###</div>

</div>

</html>

styles.css
Code: 
body {
	text-align: center;
	font-size: 11px;
}


/*  */

#head-block {
	margin: 0 auto;
	border: 0px;
	padding: 0px;
	width:771px;
	background-color:#ffffff;
}

/*  */

#banner {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 771px;
	height: 92px;
	background-color: #636363;
	vertical-align: top;
	text-align: left;	
}

/*  */

#mnavi {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 771px;
	height: 16px;
	background-color: #636363;
	text-align: center;	
}

/*  */

#gap {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 771px;
	height: 1px;
	background-color: #ffffff;
	background-image:url(greydot.gif);
	background-repeat: no-repeat;
	background-position: right;
}

/*  */

#snavi-content-block {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 771px;
	min-height: 440px;
	background-color: #636363;
}

#snavi {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 140px;
	min-height: 440px;
	background-color: #ffffff;
	vertical-align: top;
	text-align: left;
	float: left;
}

#data-content {
	margin-left: 140px;
	border: 0px;
	padding: 24px;
	width: 630px;
	min-height: 440px;
	background-color: #ffffff;
	vertical-align: top;
	text-align: left;
}

/*  */

#crossover {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 771px;
	height: 1px;
	background-color: #636363;
	background-image:url(crossover.gif);
	background-repeat: no-repeat;
	background-position: right;
}

/*  */

#footnote {
	margin: 0px;
	border: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 140px;
	width: 771px;
	height: 24px;
	font-size: 10px;
	vertical-align: top;
	text-align: center;
}

Spyro
 
das mit der ausrichtungmüsste mit

"float: left;" funktionieren

#############
hab ein ähnliches problem
möchte die höhe so definieren das sich der <body> immer auf 100% ist aber das geht nicht.
wenn ich eine pixelangabe mach so muss man scrollen auch wenn die seite nicht ganz beschrieben ist... wer kann mir helfen.
 
Hi Spyro

es wäre sinnvoll wenn du die Seite mal irgendwo Posten könntest und dazu vielleicht ein Bild wie sie eigentlich aussehen sollte. Ich hab mir zwar mal den Code in entsprechende Dateien kopiert, sehe aber nicht wirklich wo die Fehle liegen. :roll:
Allerdings muss ich dazu sagen, dass ich auf ein Mac arbeite und weder IE noch FF einsetze. :lol:

@Syntax
Die Höhenangabe in % ignorieren viele Browser im Body bzw. wird sie "falsch" interpretiert. Sie beziehen die Angabe 100% nicht auf die Fenstergröße, warum auch immer.

Gruß
Hobbyuser
 
@hobbyuser:
kann man dies irgendwie umgehen ausser anhand von tabellen. oder ist es am einfachsten keinen "div" als body zu nehmen sondern ein hintergrund bild?
 
Es gäbe die Möglichkeit die Höhe in einer anderen Maßeinheit anzugeben.
LINK: http://de.selfhtml.org/navigation/css.htm#masseinheiten

Normalerweise könnte man das Ganze auch mit einer "min-height" flexibel halten, nur da zickt der IE mal wieder rum. :(

Ein Hintergrundbild alleine bringt da garnichts, weil wenn die Div kleiner ist wird einfach nicht das gesamte Hintergrundbild angezeigt. :roll:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben