Div: relative Breite

Status
Nicht offen für weitere Antworten.
R

Raven280438

Erfahrenes Mitglied
Hi,

ich verwende 5 Div's für mein Layout:
2 am linken- und rechten Rand,
1 in der Mitte oben,
1 in der Mitte unten,
und 1 in der Mitte.

Jetzt würde ich die Breite der Div's in der Mitte mit gerne dynamisch machen.
D.h. sie sollen so breit sein, wie 100% der Breite und davon die Breite des linken- und rechten Div's abgezogen.

Wie kann man das am besten realisieren? eine Berechnung wie style='width:(100%-80px)' geht nicht.

Hier der Ausschnitt des Quellcodes:
HTML: 
[...]
<style type="text/css">
<!--
#left {
	position:absolute; top:0px; left:0px; height:100%; width:40px;
	background:url(images/layout/left.jpg) repeat-y;
}
#right {
	position:absolute; top:0px; right:0px; height:100%; width:40px;
	background:url(images/layout/right.jpg) repeat-y;
}
#head {
	position:absolute; top:0px; right:40px; height:148px; width:(100%-80px);
	background:url(images/layout/header.jpg) repeat-x;
}
#foot {
	position:absolute; bottom:0px; right:40px; height:35px; width:(100%-80px);
	background:url(images/layout/footer.jpg) repeat-x;
}
-->
</style>
[...]
<div id='left'>&nbsp;</div>
<div id='right'>&nbsp;</div>
<div id='head'>&nbsp;</div>
<!--<div id='content'>Ich bin der Inhalt ...</div>-->
<div id='foot'>&nbsp;</div>
[...]
 
Hallo,

reicht es nicht wenn du einfach dem Content über die ganze Breite streckst und jeweils links und rechts einen Abstand von der Breite der beiden Layer machst?


Gruß BSA
 
Hi,

die relative Breite für die mittleren DIVs erzielst du mit Hilfe der margin-Eigenschaft:

Code: 
#left {
        position:absolute; top:0px; left:0px; height:100%; width:40px;
        background:url(images/layout/left.jpg) repeat-y;
}
#right {
        position:absolute; top:0px; right:0px; height:100%; width:40px;
        background:url(images/layout/right.jpg) repeat-y;
}

#head {
        height:148px; margin:0 40px;
        background:url(images/layout/header.jpg) repeat-x;
}

#content { margin:0 40px; }

#foot {
        position:absolute; bottom:0px; height:35px; margin:0 40px;
        background:url(images/layout/footer.jpg) repeat-x;
}
 
funktioniert auch nicht richtig

Wenn die Seite nach unten oder rechts erweitert wird, is wieder alles durcheinander.

Hab die ganze Zeit probiert, aber bekomm es nicht hin. Hat jemand ne Lösung?
 
Was meinst du mit erweitern?

Kannst du mal den "neuen" Quellcode als vollständige Fassung (HTML + CSS) zeigen?
 
Im moment nutze ich eine Mischung aus Tabellen und Div's und den rechten Rand hab ich weggelassen.


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>
<title>Kunden Administrations System</title>
<meta HTTP-EQUIV=Content-Type CONTENT=text/html; charset=iso-8859-1>
</head>
<body style='margin:0px;height:100%;width:100%'>

<table border='0' width='100%' height='100%' cellpadding='0' cellspacing='0'>
<tr>
	<td width='40' style='background:url(images/layout/left.jpg) repeat-y'>&nbsp;</td>
	<td valign='top' height='100%'>
		<div align='center' style='position:absolute; left:40px; top:0px; width:100%; height:148px; background:url(images/layout/header.jpg) repeat-x'>&nbsp;</div>
		<table border='0' width='100%' cellpadding='0' cellspacing='0'>
			<tr>
				<td align='left' style='padding-top:150px'><?php include("content.php"); ?><td>
			</tr>
		</table>
		<div align='center' style='position:absolute; left:40px; bottom:0px; width:100%; height:35px; background:url(images/layout/footer.jpg) repeat-x'></div></td>
</tr>
</table>

</body>
</html>

Manchmal entsteht an der rechten Seite ein Überhang, d.h. die untere Begrenzung ist Breiter als die 100%. Ich versuche grad rauszufinden wieso, weil das nicht immer ist.
 
Nur zur Verdeutlichung: Wenn du für ein Element eine linke Positionsangabe von 40px und eine Breite von 100% bestimmst, wandert es um 40px über den rechten Element- / Fensterrand hinaus, denn die 100% beziehen sich nicht auf das Restmaß abzüglich der 40px, sondern noch immer auf die Gesamtbreite des übergeordneten Elements.

Aus diesem Grund hatte ich auch heute Mittag diese beiden Angaben für die DIVs #head und #foot durch die margin-Deklaration ersetzt.

Aber der neue Quellcode hat ja mit dem letzten nicht mehr viel gemeinsam, und in ihm hat es tadellos funktioniert.

Und wozu benötigen die beiden DIVs überhaupt die linke Positionsangabe mit 40px, wenn in der Tabelle links von ihnen schon eine Tabellenzelle mit einer Breite von 40px enthalten ist? :suspekt:
 
Es funktioniert trotzdem nicht.
Spätestens beim Firefox is alles wieder durcheinander.

Ich verwende jetzt eine Tabelle mit 3 Zeilen, die beiden Leisten Links und Rechts lass ich weg.

Wie bekomm ich es jetzt hin, dass die untere Zeile immer ganz unten ist, auch wenn die Höhe der Tabelle > 100% ist?

Hier der HTML-Code

HTML: 
<body style='margin:0px;height:100%;width:100%;vertical-align:top'>

<table border='0' cellpadding='0' cellspacing='0' width='100%' height='100%' valign='top'>
<tr width='100%' height='148'>
	<td width='100%' height='148' style='background:url(images/layout/header.jpg) repeat-x'>&nbsp;</td>
</tr>
<tr valign='top' width='100%' height='100%'>
	<td valign='top'><?php include("content.php"); ?></td>
</tr>
<tr width='100%' height='35' valign='bottom'>
	<td width='100%' height='35' style='background:url(images/layout/footer.jpg) repeat-x'>&nbsp;</td>
</tr>
</table>

</body>

Im IE funktionierts einigermaßen, im Firefox ist die untere Zeile nicht ganz unten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück