✔ Problem mit "dynamischem Div"

the_royal · 5. Juli 2010

Hallo Zusammen
Ich habe bei meiner Website ein Div welches eine Box darstellen sollte.
Zuerst hatte ich das ganze nur mit einem Bild als eine Box dargestellt... dumm aber wenn man dann den Inhalt mal anpassen möchte.
Ich versuchte nun also das Bild in einen Head, einen Footer und ein Verlängerungspixel zu zerlegen. Ich kriege es aber jetzt nicht hin, dass sich das Feld dynamisch dem Text anpasst...
Hoffe jemand kann mir weiterhelfen

Besten Dank schonmal!

Hier das komplette CSS:

HTML:

@charset "utf-8";

/* CSS Document */
body {
	background-color: #1e1e1e;
	font-family: sans-serif;
	font-size: 11px;
	color: #cce1e3;
	text-align: justify;
}

#container {
	width: 850px;
	min-height: 200px;
	left: 50%;
	margin-left: -425px;
	position: absolute;
}

/* for Internet Explorer */ /*\*/
* html #container {
	height: 200px;
}

/**/
#header {
	position: absolute;
	width: 850px;
	height: 175px;
	left: 0px;
	top: 0px;
	background-image: url(images/header.png);
	background-repeat: no-repeat;
}

#content {
	position: relative;
	top: 175px;
	left: 0px;
	width: 850px;
	min-height: 373px;
	background-image: url(images/verlaengerungspixel.png);
	background-repeat: repeat-y;
}

/* for Internet Explorer */ /*\*/
* html #content {
	height: 373px;
}

/**/
#middle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 850px;
	min-height: 830px;
	background-image: url(images/middle.png);
	background-repeat: repeat-x;
}

/* for Internet Explorer */ /*\*/
* html #middle {
	height: 630px;
}

/**/
#middleLarge {
	position: relative;
	top: 0px;
	left: 0px;
	width: 850px;
	min-height: 1330px;
	background-image: url(images/middle.png);
	background-repeat: repeat-x;
}

/* for Internet Explorer */ /*\*/
* html #middleLarge {
	height: 1330px;
}

/**/
#textcont {
	position: relative;
	padding-top: 5px;
	padding-bottom: 20px;
	top: 0px;
	left: 50px;
	width: 400px;
	min-height: 300px;
}

#footer {
	position: relative;
	width: 850px;
	height: 400px;
	background-image: url(images/footer.png);
	background-repeat: no-repeat;
}

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 850px;
	height: 45px;
	position: relative;
}

#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}

#menu .home {
	width: 85px;
	height: 45px;
	background: url(images/buttons/Home.png) no-repeat;
	left: 30px;
	top: 120px;
}

#menu .home:hover {
	width: 85px;
	height: 45px;
	background: url(images/buttons/Home_hover.png) no-repeat;
	left: 30px;
	top: 120px;
}

#menu .events {
	width: 85px;
	height: 45px;
	background: url(images/buttons/Events.png) no-repeat;
	left: 115px;
	top: 120px;
}

#menu .events:hover {
	width: 85px;
	height: 45px;
	background: url(images/buttons/Events_hover.png) no-repeat;
	left: 115px;
	top: 120px;
}

#menu .contact {
	width: 85px;
	height: 45px;
	background: url(images/buttons/ContactUs.png) no-repeat;
	left: 215px;
	top: 120px;
}

#menu .contact:hover {
	width: 85px;
	height: 45px;
	background: url(images/buttons/ContactUs_hover.png) no-repeat;
	left: 215px;
	top: 120px;
}

#menu .showroom {
	width: 85px;
	height: 45px;
	background: url(images/buttons/Showroom.png) no-repeat;
	left: 330px;
	top: 120px;
}

#menu .showroom:hover {
	width: 85px;
	height: 45px;
	background: url(images/buttons/Showroom_hover.png) no-repeat;
	left: 330px;
	top: 120px;
}

#boxBig {
	top: 5px;
	left: 27px;
	position: absolute;
	min-height: 303px;
	height: 303px;
	min-width: 795px;
	background-repeat: no-repeat;
	text-align: left;
	font-weight: bold;
}

/* for Internet Explorer */ /*\*/
* html #boxBig {
	width: 795px;
}

/**/
#boxBigText {
	top: 10px;
	left: 500px;
	position: absolute;
	max-width: 275px;
}

/* for Internet Explorer */ /*\*/
* html #boxBigText {
	width: 270px;
}

/**/
#boxShowroom {
	top: 300px;
	left: 27px;
	position: relative;
	min-height: 100px;
	height: 100px;
	background-repeat: no-repeat;
	text-align: left;
	font-weight: bold;
}

#boxnews {
	top: 320px;
	left: 425px;
	position: absolute;
	background-image: url(images/newsbox.png);
	min-height: 307px;
	height: 307px;
	min-width: 395px;
	background-repeat: no-repeat;
	text-align: left;
	font-weight: bold;
}

/* for Internet Explorer */ /*\*/
* html #boxnews {
	width: 395px;
}

/**/
#boxnewsText {
	top: 80px;
	left: 15px;
	position: absolute;
	max-width: 280px;
}

/* for Internet Explorer */ /*\*/
* html #boxBigText {
	width: 280px;
}
/**/

#textboxcontent {
  top: 320px;
  left:30px;
  position: absolute;
  width: 795px;
  min-height: 800px;
  height: 800px;
  background-image: url(images/textverlaengerung.gif);
  background-repeat: repeat-y;
}

#textbox {
	top: -15px;
	position: absolute;
	width: 795px;
	min-height: 800px;
	height: 800px;
	text-align: left;
	background-image: url(images/textbox.gif);
	background-repeat: no-repeat;
}

#textboxfooter {
	margin-top:417px;
  position: relative;
  min-height: 15px;
  height: 15px;
  min-width: 795px;
  background-image: url(images/textfooter.gif);
  background-repeat: no-repeat;
}

#textboxtext {
	position: relative;
	top: 30px;
	left: 40px;
	width: 700px;
}

#showroomBox {
	top: 320px;
	left: 27px;
	position: absolute;
	min-height: 800px;
	height: 800px;
	min-width: 795px;
	text-align: left;
	background-image: url(images/showroomBox.png);
	background-repeat: no-repeat;
}

#showroomText {
	position: relative;
	top: 70px;
	left: 50px;
}

h1 {
	font-size: 22px;
	font-weight: bold;
	text-align: left;
}

h2 {
	font-weight: bold;
	font-size: 14px;
}

h3 {
	font-weight: bold;
	font-size: 12px;
}

hr {
	color: #ffce10;
	background-color: #ffce10;
	height: 1px;
}

img {
	border: none;
}

a.anker {
	color: #666666;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
}

a.anker:hover {
	color: #888888;
	text-decoration: none;
}

a.anker:active {
	color: #CCCCCC;
	text-decoration: none;
}

.textArea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
}

#content {
	text-align: justify;
}

#galleria {
	position: absolute;
	top: 555px;
	left: 20px;
	width: 750px;
	height: 420px;
}

Hier der Codeabschnitt mit dem Fehler:

HTML:

<?php
readfile('includes/header.html'); 
echo'
 <div id="header">';
readfile('navi.php');
?>
  </div>
    <div id="content">
    <div id="middle">
  <div id="boxBig" style=" background-image:url(images/banner_contact.png)">
  <div id="boxBigText">
  <h2>CONTACT US</h2>
 Hier siehst du wie man mit uns in Kontakt treten kann.
 Ob du Mitglied werden willst, an einem Ausflug teilnehmen möchtest,
 oder einfach nur ein Feedback zur Website geben, wir freuen uns über alles! ;)
    </div>
    </div>
    <div id="textboxcontent">
  <div id="textbox">
  <div id="textboxtext">
  <h2>Kontaktangaben folgen in kürze!</h2>
 Raser? RASER?
 Ist ja klar, kaum ist ein Car nicht mehr Serie und ein bisschen schneller unterwegs als der übliche Durchschnitt der sich wohl selber als Beste Autofahrer der Welt bezeichnen würde ist man gleich ein Raser… „Raser gehören nicht auf die Strasse“. „Raser haben kein Gehirn“. „Rasern sollte man das Auto wegnehmen“ .  „Raser sollen den Führerausweis abgeben“
Richtig
Na überrascht?
Jaja diese Raser…
Was zeichnet den einen Raser überhaupt aus?
180km/h im 120km/h Bereich  morgens um 03:00?
Wer jetzt bereits mit seinem Kopf nickt möchte gerne in sein Fahrzeug steigen und gegen eine Wand fahren. Danke.
180km/h wenn man sein Fahrzeug unter Kontrolle hat ist doch kein Rasen. Klar liebe Polizei und Unfallforscher u.s.w Höhere Geschwindigkeiten verursachen eine grössere Wahrscheinlichkeit für einen Unfall und der wird dann verheerender… Dazu sage Ich nichts… Ach doch was, möchte doch Deutschland mal freundlich Grüssen.
Aber ein Raser ist einer der mit 110km/h auf der Autobahn fährt wo die Geschwindigkeit auf 120km/h begrenzt ist! Angepasste Geschwindigkeit? 90% wenden das wohl eher zuhause im Ehebett an als auf der Strasse. Nein mit 110km/h ist man unterwegs aber ist total überfordert, in den Rückspiegel Blickt man erst gar nicht mehr weil man sich konzentrieren muss nach vorne zu schauen… Bern Zürich Basel? Welche Richtung… noch 100m… welche Richtung… links!! Blinken? Schauen? Na egal… Wenn man Glück hat kommt ja einer mit 140km/h von Hinten der ist ja dann Schuld dieser Raser… Nene, dieser 110km/h langsame beste Autofahrer ist hier der Raser! Wiso? Er hat sein Fahrzeug bei seiner gefahrenen Geschwindigkeit nicht unter Kontrolle! Die Schuld dem in die Schuhe zu schieben der schneller fährt ist ja wohl immer die einfachste Lösung… Aber ein Raser ist nicht einer der schnell fährt! Ein Raser ist einer der sein Fahrzeug bei seiner Gefahrenen Geschwindigkeit nicht unter Kontrolle hat! *
Slow Down Fly Low… mit dieser „Protestfahrt“ wollen wir darauf aufmerksam machen das Wir keine Raser sind den wir beherrschen unser Fahrzeug! Langsam Fahren heisst nicht immer besser!
Willkommen ist jeder mit einem TuningCar, man sollte jedoch genügend Zeit und Geduld mitbringen. Wird aber sicher ein unglaublicher Tag.
SLOW DOWN FLY LOW
  </div>
  <div id="textboxfooter"></div>  
  </div>

Maik · 5. Juli 2010

Hi,

ohne jetzt den Code im Browser betrachtet zu haben, tippe ich auf die absoluten Positionsangaben top der inneren Blöcke, die hier das Mitwachsen verhindern.

mfg Maik

the_royal · 5. Juli 2010

Habe sie auf margin-top geändert, aber sieht immer no gleich aus:
http://i47.tinypic.com/24cbfvq.gif

Gruss Marco

Maik · 5. Juli 2010

Jo, ich hatte meinen Post editiert, denn da sind sogar absolute Positionierungen für die "Textboxen" im Spiel, bei denen dann margin-top auch nicht weiterhilft.

Kannst du die Seite online stellen, damit ich sie mal in ihrem vollem Umfang einsehen kann?

mfg Maik

the_royal · 5. Juli 2010

Voilà:
http://xtreme-racers.lima-city.de

Vielen Dank für deinen Aufwand!

Maik · 5. Juli 2010

Eine weitere Fehlerquelle konnte ich hier entdecken:

Code:

#textboxcontent {
  top: 320px;
  left:30px;
  position: absolute;
  width: 795px;
  min-height: 800px;
  height: 800px;
  background-image: url(images/textverlaengerung.gif);
  background-repeat: repeat-y;
}

#textbox {
	top: -15px;
	position: absolute;
	width: 795px;
	min-height: 800px;
	height: 800px;
	text-align: left;
	background-image: url(images/textbox.gif);
	background-repeat: no-repeat;
}

Standardkonforme Browser interpretieren die height-Regel als absolute Höhe, womit die min-height-Regel nicht zum Zuge kommt.

mfg Maik

Maik · 5. Juli 2010

Mein Verdacht hat sich bestätigt, dass deine position:absolute-Regeln für #textboxcontent u. #textbox dafür verantwortlich sind.

Wenn ich diese kurzerhand im CSS auskommentiere, und den eben angesprochenen Fehler berichtige, wachsen die Boxen problemlos mit.

mfg Maik

Maik · 5. Juli 2010

Abschließend mein Fazit.

Ich empfehle dir, das Layout bei #header beginnend ohne absolute Positionierungen umzusetzen, denn wenn du damit einmal beginnst, einen Block in seinem Anzeigebereich absolut zu positionieren, und ihn auf diese Weise aus seinem normalen Dokumentfluß nimmst, mußt du das auch für alle weiteren nachfolgenden Blöcke fortsetzen, damit sie nicht nach oben unter den Block "rutschen".

mfg Maik

the_royal · 5. Juli 2010

Ich hab jetzt mal rumprobiert, und zwischendurch schiens zu funktionieren, was aber andere Fehler zur Folge hatte..
Ich hab nochmals das neue CSS auf lima-city geladen.. könntest du vielleicht mal versuchen das so hinzubiegen, dass es läuft?

Maik · 5. Juli 2010

Ich hab dir doch eben meine Empfehlung mitgeteilt, was du zu tun hast.

mfg Maik

✔ Problem mit "dynamischem Div"

the_royal

Mitglied

Maik

the_royal

Mitglied

Maik

the_royal

Mitglied

Maik

Maik

Maik

the_royal

Mitglied

Maik

Neue Beiträge