✔ DIV dynamisch zum content und browserübergreifend?

scrotum · 20. Februar 2006

Hallo zusammen

Also ich habe 3 DIVs in einem grossen content-DIV. Jetzt möchte ich, dass das content-DIV in der Länge angepasst wird, jenach Inhaltslänge natürlich. Leider macht er das nicht in jedem Browser gleich oder gar nicht. Wie kann ich es erreichen, dass das DIV in der Länge dem Content in jedem Browser angepasst wird?

Vielen Dank für die Antworten!
Gruss

Maik · 20. Februar 2006

Wie sieht denn der CSS-Code konkret aus?
Wie sind die DIVs in dem Content-Div eingebettet, fliessend oder positioniert?
Sollen alle Spalten die gleiche Höhe besitzen?

scrotum · 20. Februar 2006

hier der html code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prototyp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css"/> 
</head>
<body>

<div id="content">Content
	<div id="sponsoren">Sponsoren</div>
	<div id="news">News/Updates</div>
	<div id="altersgruppen">Kategorien
		<div class="altersgruppen_detail"><a href="#">AKTIVE<br>Alter<br>Trainingszeiten<br>Kontakt</a></div>
		<div class="altersgruppen_detail"><a href="#">SENIOREN</a></div>
		<div class="altersgruppen_detail"><a href="#">VETERANEN</a></div>
		<div class="altersgruppen_detail"><a href="#">JUNGFAHRER</a></div>
		<div class="altersgruppen_detail"><a href="#">JUNIOREN</a></div>
		<div class="altersgruppen_detail"><a href="#">SCHÜLER</a></div>
	</div>
</div>

</body>

und hier der css-code:

HTML:

#content {
position: absolute;
left: 128px;
top: 150px;
width: 630px;
height: auto;
background-color: black;
}

#sponsoren {
position: absolute;
left: 480px;
top: 0px;
width: 100px;
height:530px;
background-color: grey;
}

#news {
position: absolute;
left: 0px;
top: 0px;
width: 220px;
height: 400px;
background-color: grey;
}

#altersgruppen {
position: absolute;
left: 225px;
top: 0px;
width: 250px;
height: auto;
background-color: #FFCC66;
}

.altersgruppen_detail a:link, .altersgruppen_detail a:visited { 
background-color: white;
color: black;
float: left;
width: 245px;
height: 80px;
margin: 3px;
}

.altersgruppen_detail  a:hover { 
background-color: #00AA00;
color: black;
width: 245px;
height: 80px;
margin: 3px;
}

Zu beachten ist, dass der #content genau an dieser stelle sein muss, also kann ich ihn wohl nicht relative setzen, denn dann kann ich ja nicht left und top angeben.

Gruss

Maik · 20. Februar 2006

Mit absoluten Positionsangaben lässt sich dein Vorhaben nicht umsetzen, da das Content-DIV eine Höhenangabe benötigt, um den Hintergrund (oder einen Rahmen) nach unten auszudehnen.

scrotum · 20. Februar 2006

Und wie kann ich es sonst lösen?

Ist das unmöglich? Ich dachte das gibts nicht

.

Maik · 20. Februar 2006

CSS-Modell mit floatenden DIVs:

edit @ 20:55 h

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prototyp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css"/>

<style type="text/css">
<!--
html, body
{
margin: 0;
padding: 0;
}

#content {
margin-left: 128px;
margin-top: 150px;
width: 630px;
background-color: black;
}

#news {
float: left;
width: 220px;
height: 400px;
background-color: gray;
}

#sponsoren {
float: right;
margin-right: 50px;
width: 100px;
height: 530px;
background-color: gray;
}

* html #sponsoren /* IE-Korrektur */
{
margin-right: 25px;
}

#altersgruppen {
margin: 0 150px 0 220px;
background-color: #FFCC66;
}

.altersgruppen_detail a:link, .altersgruppen_detail a:visited {
background-color: white;
color: black;
display: block;
width: 244px;
height: 80px;
margin: 3px;
}

.altersgruppen_detail  a:hover {
background-color: #00AA00;
color: black;
width: 244px;
height: 80px;
margin: 3px;
}

div.clear
{
clear: both;
margin: 0;
padding: 0;
height: 0;
font-size: 0;
}
-->
</style>

</head>
<body>

<div id="content">Content
     <div id="news">News/Updates</div>

     <div id="sponsoren">Sponsoren</div>

     <div id="altersgruppen">Kategorien
                <div class="altersgruppen_detail"><a href="#">AKTIVE<br>Alter<br>Trainingszeiten<br>Kontakt</a></div>
                <div class="altersgruppen_detail"><a href="#">SENIOREN</a></div>
                <div class="altersgruppen_detail"><a href="#">VETERANEN</a></div>
                <div class="altersgruppen_detail"><a href="#">JUNGFAHRER</a></div>
                <div class="altersgruppen_detail"><a href="#">JUNIOREN</a></div>
                <div class="altersgruppen_detail"><a href="#">SCHÜLER</a></div>
     </div>

     <div class="clear">&nbsp;</div>
</div>

</body>
</html>

scrotum · 28. Februar 2006

Hallo nochmals.

Also ich habe auf meiner Seite alle absoluten Positionierungen rausgenommen und habe mit floats gearbeitet.

Leider funktioniert es immernoch nicht richtig. der Content-Rahmen (blau) wird in der Grösse zum Inhalt angepasst, aber leider nicht der übergeordnete Inhaltsrahmen (grau mit weissem Rahmen).

Ich habe auch mit demIE-Hack versucht, die Seite für IE anzupassen (wegen dem Boxmodell-Fehler von IE). Leider stimmt es noch nicht, der IE zeigt die Seite immernoch falsch an!

Ich habe schon verschiedene Sachen ausprobiert, aber bis jetzt ohne Erfolg. Ich hoffe mir kann jemand helfen!

Hier der Link dazu: http://www.alsodenn.ch/tutorials/html/hauptseite.html

Hier der HTML-Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Wasserfahrverein FISCHER-CLUB BASEL 1884</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="../css/basic.css"> 
	</head>	
	<body>
		<div id="inhaltsrahmen">
			<img id="titel" src="../images/screendesign/hauptseite.jpg" alt="Hauptseite">
			<div id="termine_box">
				<div id="termine_titel">Nächste Termine <div id="termine_kalender">--> <a href="#">zum Kalender</a></div></div>
				<div class="termine"><b>29.-31. Juli 2006</b><br>Fischer Club Classic Einzelwettfahren und BF</div>
				<div class="termine"><b>12./13. August 2006</b><br>Nat. Paarwettfahren ACM Bern</div>
				<div class="termine_ohnestrich"><b>12.-20. August 2006</b><br>Fernfahrt Saar-Lahnstein</div>
			</div>
			<div id="navigation">
				<div class="navigationspunkt"><a href="hauptseite.html">Hauptseite</a></div>
				<div class="navigationspunkt"><a href="verein.html">Verein</a></div>
				<div class="navigationspunkt"><a href="wasserfahren.html">Wasserfahren?</a></div>
				<div class="navigationspunkt"><a href="classics.html">Classics</a></div>
				<div class="navigationspunkt"><a href="fotos.html">Fotos</a></div>
				<div class="navigationspunkt"><a href="downloads.html">Downloads</a></div>
				<div class="navigationspunkt"><a href="links.html">Links</a></div>
				<div class="navigationspunkt"><a href="gaestebuch.html">Gästebuch</a></div>
			</div><div class="antifloat"></div>
			<div id="unternavigation">
				<div style="visibility: hidden"<div class="unternavigationspunkt"><a href="#">leer</a></div></div>
			</div>
			<div id="content">
				<div id="willkommennews">
					<div id="willkommen">
						<div id="willkommenheader">WILLKOMMEN</div>
						<div id="willkommeninhalt">dlakjf adöfj öaldj fölajs dflöajsdlökfj aöldjfölasdj fölasjd fasdjföa jdlf aöls fjöasdfadsf asölf as föalsjflöasj fölas flöas flöas </div>
					</div>
					<div id="news">
						<div id="newsheader">NEWS</div>
						<div class="newstitel">Neue Schiffe!</div><div class="newsinhalt">blablablablabl balbla ba bl abl abl al lab la bla balblabl alb aba bla lb albalb ab</div>
						<div class="newstitel">Neue Schiffe!</div><div class="newsinhalt">blablablablabl balbla ba bl abl abl al lab la bla balblabl alb aba bla lb albalb ab</div>
						<div class="newstitel">Neue Schiffe!</div><div class="newsinhalt">blablablablabl balbla ba bl abl abl al lab la bla balblabl alb aba bla lb albalb ab</div>
						<div class="newstitel">Neue Schiffe!</div><div class="newsinhalt">blablablablabl balbla ba bl abl abl al lab la bla balblabl alb aba bla lb albalb ab</div>
					</div>
				</div>
				<div id="kategorien">
					<div id="kategorienheader">KATEGORIEN</div>
					<div class="altersgruppen_detail"><a href="#"><h5>AKTIVE</h5>Alter:<br>Trainingszeiten:<br>Kontakt:</a></div>
					<div class="altersgruppen_detail"><a href="#"><h5>SENIOREN</h5></a></div>
					<div class="altersgruppen_detail"><a href="#"><h5>VETERANEN</h5></a></div>
					<div class="altersgruppen_detail2"><a href="#"><h5>JUNGFAHRER</h5></a></div>
					<div class="altersgruppen_detail2"><a href="#"><h5>JUNIOREN</h5></a></div>
					<div class="altersgruppen_detail2"><a href="#"><h5>SCHÜLER</h5></a></div>
				</div>
				<div id="sponsoren">
					<div id="sponsorheader">SPONSOREN</div>
				</div>
			</div>
		</div>
	</body>
</html>

Hier der CSS-Code:

HTML:

<!--
body {
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Helvetica , sans-serif;
font-size: 9px;
line-height: 11px;
letter-spacing: 0.5px;
background-image: url(../images/screendesign/pattern5.gif);
}

#inhaltsrahmen {
width: 750px;
margin: 10px auto 0 auto;
background-color: gray;
color: inherit;
border: 5px solid white;
}
* html #inhaltsrahmen {
width: 760px;
w\idth: 750px;
}

a:link, a:hover, a:active, a:visited{
background-color: inherit;
color: black;
text-decoration: none;
}

.antifloat {
clear: both;
visible: hidden;
}

/* --> FESTE KÄSTCHEN START <-- */
#titel {
float: left;
width: 480px;
height: 110px;
border: 1px solid black;
}
* html #titel {
width: 482px;
height: 112px;
w\idth: 480px;
h\eight: 110px;
}


/* TERMINE START*/
#termine_box {
float: right;
width: 261px;
height: 110px;
padding: 0px;
margin: 0px;
color: black;
background-color: #d7ffcd;
border: 1px solid black;
}
* html #termine_box {
width: 263px;
height: 112px;
w\idth: 261px;
h\eight: 110px;
}

#termine_titel {
width: 252px;
padding: 4px 4px 4px 5px;
color: black;
background-color: #00AA00;
font-weight: bold;
}
* html #termine_titel {
width: 261px;
w\idth: 252px;
}

#termine_kalender {
margin: 0px;
margin-top: -11px;
padding: 0px;
float: right;
color: black;
background-color: inherit;
}

#termine_kalender a:hover {
text-decoration: underline;
} 

.termine {
border-bottom: 1px dashed black;
margin-top: 2px;
margin-bottom: 2px;
padding: 2px;
}

.termine_ohnestrich {
margin-top: 2px;
margin-bottom: 2px;
padding: 2px;
}
/* TERMINE ENDE  */


/* NAVIGATION START */ 
#navigation {
float: right;
width: 622px;
font-size: 10px;
font-weight: bold;
line-height: 12px;
letter-spacing: normal;
padding: 0px;
margin: 0 -4px 0 0;
}
* html {
width: 618px;
w\idth: 622px;
}

#unternavigation {
float: left;
width: 120px;
font-size: 10px;
line-height: 12px;
font-weight: normal;
letter-spacing: normal;
}

.navigationspunkt a:link, .navigationspunkt a:visited {
background-color: #12911e;
color: white;
float: left;
margin: 8px 6px 8px 0;
padding: 4px 9px;
border: 1px solid white;
}

.navigationspunkt a:hover {
background-color: white;
color: #2d6c2c;
margin: 8px 6px 8px 0;
padding: 4px 5px;
border-width: 1px 5px;
border-style: solid;
border-color: #12911e;
}

.unternavigationspunkt a:link, .unternavigationspunkt a:visited {
background-color: #12911e;
color: white;
float: left;
margin: 0 0 3px 6px;
padding: 7px 4px;
border: 1px solid white;
}

.unternavigationspunkt a:hover {
background-color: white;
color: #2d6c2c;
margin: 0 0 3px 6px;
padding: 4px;
border-width: 4px 1px;
border-style: solid;
border-color: #12911e;
}

/* NAVIGATION ENDE*/

/* --> FESTE KÄSTCHEN ENDE <--  */



#content {
float: left;
width: 613px;
margin: 0 0 0 12px;
background-color: #3399FF;
}
* html #content {
width: 625px;
w\idth: 613px;
}



#willkommennews {
float: left;
width: 240px;
}

/* NEWS START */
#news {
float: left;
width: 238px;
border: 1px solid black;
margin: 5px 0 0 0;
}
* html #news {
width: 240px;
w\idth: 238px;
}

#newsheader {
float: left;
width: 228px;
font-weight: bold;
padding: 4px 4px 4px 6px;
background-color: black;
color: white;
}
* html #newsheader {
width: 238px;
w\idth: 228px;
}

.newstitel {
float: left;
width: 232px;
font-weight: bold;
background-color: #00AA00;
color: black;
padding: 3px;
text-transform: uppercase;
}
* html {
width: 238px;
w\idth: 232px;
}

.newsinhalt {
float: left;
width: 230px;
padding: 4px 4px 15px 4px;
background-color: #d7ffcd;
color: black;
}
* html {
width: 238px;
w\idth: 230px;
}

/* NEWS ENDE  */

/* WILLKOMMEN START  */
#willkommen {
float: left;
width: 238px;
border: 1px solid black;
}
* html #willkommen {
width: 240px;
w\idth: 238px;
}


#willkommeninhalt {
float: left;
width: 230px;
padding: 4px 4px 15px 4px;
background-color: #d7ffcd;
color: black;
}
* html #willkommeninhalt {
width: 238px;
w\idth: 230px;
}

#willkommenheader {
float: left;
width: 228px;
font-weight: bold;
padding: 4px 4px 4px 6px;
background-color: black;
color: white;
}
* html #willkommenheader {
width: 238px;
w\idth: 228px;
}
/* WILLKOMMEN ENDE  */


/* KATEGORIEN START  */
#kategorien {
position: relative;
float: left;
width: 250px;
margin: 0 9px;
border: 1px solid black;
}
* html #kategorien {
width: 270px;
w\idth: 250px;
}

#kategorienheader {
float: left;
font-weight: bold;
padding: 4px 4px 4px 6px;
background-color: black;
color: white;
width: 241px;
}
* html #kategorienheader {
width: 251px;
w\idth: 241px;
}

.altersgruppen_detail a:link, .altersgruppen_detail a:visited { 
background-color: #00AA00;
color: black;
float: left;
width: 242px;
height: 80px;
padding: 0 4px 0 4px;
border-top: 1px solid black;
}
* html .altersgruppen_detail a:link, .altersgruppen_detail a:visited {
width: 250px;
height: 81px;
w\idth: 242px;
h\eight: 80px;
}

.altersgruppen_detail a:hover { 
background-color: #d7ffcd;
color: black;
width: 242px;
height: 80px;
padding: 0 4px 0 4px;
border-top: 1px solid black;
}
* html .altersgruppen_detail a:hover {
width: 250px;
height: 81px;
w\idth: 242px;
h\eight: 80px;
}

.altersgruppen_detail2 a:link, .altersgruppen_detail2 a:visited { 
background-color: #00d900;
color: black;
float: left;
width: 242px;
height: 80px;
padding: 0 4px 0 4px;
border-top: 1px solid black;
}
* html .altersgruppen_detail2 a:link, .altersgruppen_detail2 a:visited {
width: 250px;
height: 81px;
w\idth: 242px;
h\eight: 80px;
}

.altersgruppen_detail2 a:hover { 
background-color: #d7ffcd;
color: black;
width: 242px;
height: 80px;
padding: 0 4px 0 4px;
border-top: 1px solid black;
}
* html .altersgruppen_detail2 a:hover {
width: 250px;
height: 81px;
w\idth: 242px;
h\eight: 80px;
}

h5 {
font-size: 12px;
font-weight: bold;
color: black;
background-color: inherit;
margin: 7px 0;
}
/* KATEGORIEN ENDE  */

/* SPONSOREN START */
#sponsoren {
float: left;
width: 100px;
height: 530px;
background-color: #d7ffcd;
color: inherit;
border: 1px solid black;
}
* html #sponsoren {
width: 102px;
height: 532px;
w\idth: 100px;
h\eight: 530px;
}

#sponsorheader {
float: left;
font-weight: bold;
padding: 4px 4px 4px 5px;
background-color: black;
color: white;
width: 91px;
}
* html #sponsorheader {
width: 100px;
w\idth: 91px;
}
/* SPONSOREN ENDE  */


-->

Ich habe extra Hintergrundfarben eingefügt für den Content-Rahmen blau, da wird wie gewollt der Rahmen an den Inhalt angepasst. Aber der graue Hintergrund mit dem weissen Rahmen wird nicht angepasst. Ich möchte dass dieser graue Rahmen bis nach unten geht, halt so lang wie der Inhalt ist.

Ich hoffe, ich habe mein Problem klar dargestellt.

Quaese · 28. Februar 2006

Hi,

versuch mal, nach dem Element mit der ID content den normalen Textfluss wieder herzustellen.

HTML:

<div id="content">
  <!-- Dein bisheriger Content -->
</div>
<div style="font-size: 1px; line-height: 0em; height: 0; clear: both;">&nbsp;</div>

Ciao
Quaese

Maik · 28. Februar 2006

Zudem musst du einen Syntax-Fehler im HTML-Code korrigieren: es fehlt ein > -Zeichen

Code:

<div style="visibility: hidden"><div class="unternavigationspunkt"><a href="#">leer</a></div></div>

scrotum · 1. März 2006

Super. Danke. Es hat funktioniert! Aber kannst du mir noch erklären warum das so ist? Wieso font-size: 1px, line-height: 0 und height: 0?

nochmals vielen Dank.

✔ DIV dynamisch zum content und browserübergreifend?

scrotum

Erfahrenes Mitglied

Maik

scrotum

Erfahrenes Mitglied

Maik

scrotum

Erfahrenes Mitglied

Maik

scrotum

Erfahrenes Mitglied

Quaese

Moderator

Maik

scrotum

Erfahrenes Mitglied

Neue Beiträge