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

HILFE! DIV-Box über die ganze Höhe

E

elexier23

Neues Mitglied
Hallo Leute!ich habe für einen Kunden eine Website gestaltet und versuche nun, diese im Dreamweaver CS6 zu programmieren.Mein Problem ist nun folgendes:Ich habe für jede Seite ein anderes Hintergrundbild (wie hier auf der Index-Seite die Blumen), der weiße Balken bleibt immer gleich und der rote Balken wechselt mit jeder Seite die Farbe und wird farblich auf das Hintergrundbild angepasst. Soweit hat das ja auch alles ganz gut funktioniert, allerdings wenn man diese Seite nun auf einem kleineren Bildschirm anschaut und runterscrollt, dann enden die weiße und rote Box dort, wo das Browserfenster aus war und der Text steht weiter unten ohne den Boxen.Ich hätte gerne, dass die Boxen auch mit dem Text nach unten gescrollt werden können, dass das Hintergrundbild aber gleich bleibt (das ist eigentlich auch nicht gut zentriert sondern nur irgendwie angeschnitten...)Ich sollte heute schon einen Online-Entwurf präsentieren, auch wenns nur die Startseite ist - aber solange das nicht funktioniert, brauch ich auch nichts herzeigen :(Zum sehen gibt's die Seite hier:Herzlich Willkommen in der Schulz Hütt'n!Und hier der Code:Herzlich Willkommen in der Schulz Hütt'n!
index.gif

eigenlt


logo_schulz.gif

SPEISEN & GETRÄNKE
NÄCHSTES EVENT:

Maibaumkraxln am 1. Mai 2013 ab 12:00 Uhr mit Live-Musik und Buffet!

// mehr lesen...
MUTTERTAG:

12. Mai 2013 – Sie schenken Ihrer Mutter Zeit und wir erledigen den Rest!

// mehr lesen...
Wetter Maiß

mehr Wetter auf




ÜBER UNS
NEWS & EVENTS
FEIERN
COOL FOR KIDS
BADETEICH
KONTAKT
DIE SCHULZ HÜTT'N

Unser rustikales Ausflugslokal in Altlengbach bietet eine wunderschöne Aussicht und eine herrlich ruhig Lage fernab von jedem Verkehr. In der gemütlichen, rustikalen Stube beim Kamin oder auf der überdachten Terrasse mit Blick ins Freie können Sie aus unserem umfangreichen Angebot wählen. Hausmannskost, Grillspezialitäten, Spareribs und vieles mehr.

Das ideale Ausflugerlebnis für Kinder und Erwachsene!

Die Schulz Hütt´n ist nur wenige Minuten von der Autobahnabfahrt Altlengbach entfernt und deswegen leicht und schnell zu erreichen. Das Lokal liegt auf 600m Seehöhe im Herzen des Wienerwaldes und bietet optimale Voraussetzungen für entspannte und erholsame Stunden für die ganze Familie. Am Gelände finden Sie einen großem Erlebnisspielplatz für kleine und große Kinder, ein ruhiges Natur-Badeteichareal mit Kinderbecken, sowie ein Wildtiergehege mit Rotwild und Dammhirschen zum Streicheln.

Feiern Sie mit uns!

Die Schulz Hütt´n mit ihrem rustikalen Flair ist der perfekte Ort für gemütliche Feiern und außer-gewöhnliche Feste. Das große Areal mit vielen Parkplätzen und dem hauseigenen Badeteich bietet sich geradezu an Ihre Feier zu einem unvergesslichen Erlebnis zu gestalten.

Wir stehen Ihnen mit unserem professionellen Team auch gerne bei der Veranstaltungsplanung zur Seite.

Mehr dazu finden Sie auch auf www.schulzcatering.at



Hier die CSS Datei:@charset "UTF-8";@import url("../webfonts/CorpoA_Regular/stylesheet.css");@import url("../webfonts/CorpoA_Bold/stylesheet.css");html,body,#bg,#bg table,#bg td,#content {width:100%;height:100%;overflow:hidden;}#bg div {position:absolute;width:200%;height:200%;top:-50%;left:-50%;}#bg td {vertical-align:middle;text-align:center;}#bg img {min-height:50%;min-width:50%;margin:0 auto;display:block;}#content { top: 2px; z-index: 70; overflow: auto; width: 650px; margin-right: auto; margin-left: auto; position: absolute; left: 250px; height: 100%;}#content #balken_weiss { background-color: #FFF; float: left; height: 100%; width: 250px; position: absolute; left: 0px; top: 0px;}#content #balken_farbe { float: left; height: 100%; width: 400px; position: absolute; left: 250px;}#balken_weiss .logo { float: left; width: 180px; margin-top: 80px; margin-right: 35px; margin-left: 35px;}#balken_weiss .subnav { font-family: "CorpoA_Regular"; font-size: 16px; line-height: 19px; color: #704439; float: left; width: 180px; margin-top: 100px; margin-right: 35px; margin-left: 35px;}#balken_weiss .subnav a { font-family: "CorpoA_Regular"; font-size: 16px; text-decoration: none; color: #704439;}#balken_weiss .subnav a:hover { font-weight: bold; color: #704439; text-decoration: none;}.navigation { font-family: "CorpoA_Regular"; font-size: 16px; line-height: 19px; color: #FFF; float: left; width: 200px; margin-top: 80px; margin-left: 40px; opacity: 1; height: 107px;}#balken_farbe .farbe_index { color: #fff; font-size: 30px; padding: 0px; background-color: rgba(171, 0, 0, .7); height: 100%; width: 400px; position: relative;}.fliesstext { font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px; color: #FFF; float: left; width: 320px; margin-top: 100px; margin-right: 40px; margin-left: 40px; position: relative;}#balken_weiss #news { float: left; width: 180px; margin-top: 50px; margin-right: 35px; margin-left: 35px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #704439; border-left-color: #704439; font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px; color: #704439; padding-top: 10px; padding-bottom: 25px;}#news a { color: #704439;}#news_02 { font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px; color: #704439; float: left; width: 180px; margin-right: 35px; margin-left: 35px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #704439; padding-top: 10px; padding-bottom: 25px;}#news_02 a { color: #704439;}#balken_weiss #wetter { float: left; height: 150px; width: 180px; margin-top: 30px; margin-right: 35px; margin-left: 35px;}.fliesstext .headline { font-size: 15px; font-weight: bold;}.navigation a { color: #FFF; text-decoration: none;}.navigation a:hover { font-weight: bold; text-decoration: none;}.nav_aktiv { font-weight: bold;}.headline_02 { font-size: 14px; font-weight: bold;}.fliesstext a { color: #FFF;}.news_headline { font-family: "CorpoA_Regular"; font-size: 15px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #704439; padding-bottom: 10px;}Bitte bitte helft mir :(Dank euch schon mal vielmals...
 
Was für ein Chaos!! Hier noch einmal der Quellcode:

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>Herzlich Willkommen in der Schulz Hütt'n!</title>
<style type="text/css"></style>
<link href="css/all.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>eigenlt
<td>
<img alt="background" src="http://www.html.de/images/background/index.gif" />
</td>
</tr>
</table>
</div>
</div>


<div id="content">
  <div id="balken_weiss">
    <div class="logo"><img src="http://www.html.de/images/logo_schulz.gif" width="180" height="107" alt="logo" /></div>
    
    <div class="subnav"><a href="speisen.html">SPEISEN &amp; GETRÄNKE</a></div>
    <div id="news">
      <div class="news_headline">NÄCHSTES EVENT:</div>
      <br />
      Maibaumkraxln am 1. Mai 2013 ab 12:00 Uhr mit Live-Musik und Buffet!<br />
      <br />
    <a href="veranstaltungen.html">// mehr lesen... </a></div>
    <div id="news_02">
      <div class="news_headline">MUTTERTAG:</div>
      <br />
      12. Mai 2013 – Sie schenken Ihrer Mutter Zeit und wir erledigen den Rest!<br />
      <br />
    <a href="veranstaltungen.html">// mehr lesen... </a></div>
    <div id="wetter"><!-- wetter.com button 180x150-->
<div id="wettercom-button-2b264838a43adda6a481dcdd2d470e4e">
<link id="wettercom-css" href="http://www.wetter.com/css/woys3.1.css?42232,2b264838a43adda6a481dcdd2d470e4e" rel="stylesheet" type="text/css" />
<div id="wettercom-title">
<a id="wettercom-citylink" href="http://www.wetter.com/wetter_aktuell/wettervorhersage/3_tagesvorhersage/?id=ATAT10012015" title="Wetter Mai&szlig;" target="_blank">Wetter Mai&szlig;</a>
</div>
<div id="wettercom-woys-2b264838a43adda6a481dcdd2d470e4e"></div>
<div id="wettercom-brand">
<a id="wettercom-link" href="http://www.wetter.com" target="_blank">
<span id="wettercom-more">mehr Wetter auf </span>
<img id="wettercom-logo" src="http://www.wetter.com/img/websitetools/woys/logo.png" alt="wetter.com" title="wetter.com" />
</a>
</div> <div id="wettercom-clear">
<script type="text/javascript" src="http://www.wetter.com/js/woys3.1.js?42232,2b264838a43adda6a481dcdd2d470e4e"></script>
</div>
</div>
<!-- wetter.com button 180x150--></div>
  </div>
  <div id="balken_farbe">
    <div class="farbe_index">
      <div class="navigation">
        <div class="nav_aktiv">ÜBER UNS</div>
        <a href="news.html">NEWS &amp; EVENTS</a><br />
        <a href="feiern.html">FEIERN</a><br />
        <a href="kids.html">COOL FOR KIDS</a><br />
        <a href="badeteich.html">BADETEICH</a><br />
      <a href="kontakt.html">KONTAKT </a></div>
      <div class="fliesstext">
<div class="headline">DIE SCHULZ HÜTT'N</div>
<br />
Unser rustikales Ausflugslokal in Altlengbach bietet eine wunderschöne Aussicht und eine herrlich ruhig Lage fernab von jedem Verkehr. In der gemütlichen, rustikalen Stube beim Kamin oder auf der überdachten Terrasse mit Blick ins Freie können Sie aus unserem umfangreichen Angebot wählen. Hausmannskost, Grillspezialitäten, Spareribs und vieles mehr.<br />
<br />
<div class="headline_02">Das ideale Ausflugerlebnis für Kinder und Erwachsene!</div>
<br />
  Die Schulz Hütt´n ist nur wenige Minuten von der Autobahnabfahrt Altlengbach entfernt und deswegen leicht und schnell zu erreichen. Das Lokal liegt auf 600m Seehöhe im Herzen des Wienerwaldes und bietet optimale Voraussetzungen für entspannte und erholsame Stunden für die ganze Familie. Am Gelände finden Sie einen großem Erlebnisspielplatz für kleine und große Kinder, ein ruhiges Natur-Badeteichareal mit Kinderbecken, sowie ein Wildtiergehege mit Rotwild und Dammhirschen zum Streicheln.<br />
<br />
<div class="headline_02"><strong>Feiern Sie mit uns!</strong></div>
<br />
Die Schulz Hütt´n mit ihrem rustikalen Flair ist der perfekte Ort für gemütliche Feiern und außer-gewöhnliche Feste. Das große Areal mit vielen Parkplätzen und dem hauseigenen Badeteich bietet sich geradezu an Ihre Feier zu einem unvergesslichen Erlebnis zu gestalten.<br />
<br />
Wir stehen Ihnen mit unserem professionellen Team auch gerne bei der Veranstaltungsplanung zur Seite.<br /><br />
Mehr dazu finden Sie auch auf <a href="http://www.schulzcatering.at">www.schulzcatering.at</a></div>
    </div>
  </div>
</div>
</body>
</html>


Und hier der CSS Code:

Code: 
@charset "UTF-8";@import url("../webfonts/CorpoA_Regular/stylesheet.css");
@import url("../webfonts/CorpoA_Bold/stylesheet.css");
html,body,#bg,#bg table,#bg td,#content {
width:100%;
height:100%;
overflow:hidden;
}


#bg div {
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
}


#bg td {
vertical-align:middle;
text-align:center;
}
#bg img {
min-height:50%;
min-width:50%;
margin:0 auto;
display:block;
}


#content {
	top: 0px;
	z-index: 70;
	overflow: auto;
	width: 650px;
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	left: 250px;
	height: 100%;
}


#content #balken_weiss {
	background-color: #FFF;
	float: left;
	height: 100%;
	width: 250px;
	position: absolute;
	left: 0px;
	top: 0px;
}
#content #balken_farbe {
	float: left;
	height: 100%;
	width: 400px;
	position: absolute;
	left: 250px;
}
#balken_weiss .logo {
	float: left;
	width: 180px;
	margin-top: 80px;
	margin-right: 35px;
	margin-left: 35px;
}
#balken_weiss .subnav {
	font-family: "CorpoA_Regular";
	font-size: 16px;
	line-height: 19px;
	color: #704439;
	float: left;
	width: 180px;
	margin-top: 100px;
	margin-right: 35px;
	margin-left: 35px;
}
#balken_weiss .subnav a {
	font-family: "CorpoA_Regular";
	font-size: 16px;
	text-decoration: none;
	color: #704439;
}
#balken_weiss .subnav a:hover {
	font-weight: bold;
	color: #704439;
	text-decoration: none;
}
.navigation {
	font-family: "CorpoA_Regular";
	font-size: 16px;
	line-height: 19px;
	color: #FFF;
	float: left;
	width: 200px;
	margin-top: 80px;
	margin-left: 40px;
	opacity: 1;
	height: 107px;
}
#balken_farbe .farbe_index {
	color: #fff;
	font-size: 30px;
	padding: 0px;
	background-color: rgba(171, 0, 0, .7);
	height: 100%;
	width: 400px;
	position: relative;
}
.fliesstext {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 19px;
	color: #FFF;
	float: left;
	width: 320px;
	margin-top: 100px;
	margin-right: 40px;
	margin-left: 40px;
	position: relative;
	margin-bottom: 50px;
}
#balken_weiss #news {
	float: left;
	width: 180px;
	margin-top: 50px;
	margin-right: 35px;
	margin-left: 35px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #704439;
	border-left-color: #704439;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 19px;
	color: #704439;
	padding-top: 10px;
	padding-bottom: 25px;
}
#news a {
	color: #704439;
}
#news_02 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 19px;
	color: #704439;
	float: left;
	width: 180px;
	margin-right: 35px;
	margin-left: 35px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #704439;
	padding-top: 10px;
	padding-bottom: 25px;
}
#news_02 a {
	color: #704439;
}
#balken_weiss #wetter {
	float: left;
	height: 150px;
	width: 180px;
	margin-top: 30px;
	margin-right: 35px;
	margin-left: 35px;
	margin-bottom: 50px;
}
.fliesstext .headline {
	font-size: 15px;
	font-weight: bold;
}
.navigation a {
	color: #FFF;
	text-decoration: none;
}
.navigation a:hover {
	font-weight: bold;
	text-decoration: none;
}
.nav_aktiv {
	font-weight: bold;
}
.headline_02 {
	font-size: 14px;
	font-weight: bold;
}
.fliesstext a {
	color: #FFF;
}
.news_headline {
	font-family: "CorpoA_Regular";
	font-size: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #704439;
	padding-bottom: 10px;
}
#news a:hover {
	color: #C00;
}
#news_02 a:hover {
	color: #C00;
}


Ich würde mich über baldige Hilfe wirklich sehr freuen!! :cry:
 
Zuletzt bearbeitet von einem Moderator:
»HILFE« war auch mein erster Gedanke.
Nur so des Verständnisses wegen:
- Warum verwendest du für den Body kein background-image?
- Warum arbeitest du mit float UND absoluter Positionierung gleichzeitig?

Das Posten von Quellcode ist bei der Angabe eines Links zum Projekt übrigens überflüssig. Und falls doch mal Quellcode erforderlich ist: Der lässt sich mit dem Editor formatieren. Dann kann man ihn auch lesen ...
 
Danke für deine Antwort. Die Formatierung des Codes hab ich beim 2. Versuch dann eh hinbekommen ;)

Wenn ich für den Body ein Background Image verwende, dann wird das nicht mit dem Browserfenster mitskaliert oder?
Bis jetzt habe ich eigentlich nur mit floating gearbeitet, das mit den Positionen ist mir erst seit kurzem bekannt - ich bin leider noch etwas unerfahren was das betrifft.

Es würde mir sehr helfen, wenn irgendwer meinen "Code korrigieren" kann, damit das so aussieht wie gewünscht.
 
Das mit dem Positionieren solltest du dir aufsparen, bis du es verstanden hast. Hier brauchst du es jedenfalls nicht.
Das mit dem Float solltest du dir auch nochmal genau durchlesen ... Stichwort: Clear.
Jemand, der dir Code so korrigiert, dass du nicht mehr drüber nachdenken musst, sondern ihn direkt deinem Kunden verkaufen kannst, findet sich in diesem Forum erfahrungsgemäß nicht.

Btw: Ein Hintergrundbild im gif-Format? Mit 2MB für eine Blumendeko?
 
Zuletzt bearbeitet:
Na gut, ich versuchs auf einem anderen Weg.

Ich habe das Hintergrundbild mithilfe eines Codes positioniert, den ich im Internet gefunden hab. Hat eigentlich ganz gut funktioniert, aber wenn ich den Content jetzt nicht "Absolut" positioniere, dann liegt der im Hintergrund und ist nicht sichtbar! Mit Hilfe von "absolut" ist er jetzt jedenfalls im Vordergrund, denn sobald ich die Position verändere oder gar weg gebe ist er wie schon gesagt futsch.

Ich bin ja auch eigentlich ganz zufrieden so wie es jetzt ist, dass es nicht perfekt aufgebaut ist oder ein paar Funktionen nicht stimmen ist mir eh klar - aber optisch stimmts zumindest!
Aber wie könnte ich das Problem mit dem weißen und roten Balken lösen? Es muss hier doch irgendeine Lösung geben?!
 
hey ,

mit der höhe , versuch mal height:200%;
bei den beiden balken....ich weiß zwar nicht ob es funktioniert , aber nen versuch ist es wert ;)
wenn nicht dann am besten mit absoluten angaben ...

wenn ich noch kurz meine persönliche meinung sagen soll , die seite gefällt mir sehr gut , nur stört mich ein bisschen
der untere scrollbalken , da dieser auch nicht wirklich ein nutzen hat ...
versuch mal die seite auch für netbooks anzupassen ;)
(der rechte text ist teilweise abgeschnitten)
am besten left mit prozentangaben oder mit
@media ;)
die weiterverlinkungen auf externen sites löst man , finde ich , eigentlich am besten mit target...womit sich dann ein neuer
tab öffnet ..(rote box ganz unten)

MfG
 
Ich kann dir sagen, wo das Problem liegt.

Dein "Hintergrundbild" ist ein src-image, und demzufolge liegen alle folgenden HTML-Elemente darunter. Das versuchst du mit einem position: absolute zu kontern, welches die Elemente aus dem Textfluss hebt, was wiederum das Phänomen der sich nicht verlängernden Boxen verursacht. Im IE 7/8 ist die Seite übrigens total zerschossen.

Schreibe die Datei neu. Lege das Bild als background-image auf den Body, Lösche die Tabelle und verzichte im CSS auf die Attribute: position, overflow und z-index. Die werden überhaupt nicht gebraucht. Das ist eine ganz simple Aufgabe, die sich rein über margin, padding, float und clear lösen lässt.

Solltest du das nicht hinbekommen, gib den Auftrag lieber zurück.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben