✔ Problem mit 100%

roundaboutmedia · 9. September 2009

HTML:

* {
	margin: 0px;
	padding: 0px;
}
html, body {
	height: 100%;
}
body {
	background-color: #FFFFFF;
}
#wrapper {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
#hauptdiv {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	background-attachment: scroll;
	background-image: url(../image/red.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	padding: 0px;
}
#navi {
	height: 200px;
	width: 100px;
	position: absolute;
	left: 120px;
	top: 250px;
	z-index: 2;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 120%;
	font-weight: bold;
	color: #000000;
	text-align: left;
}
#navi a {
	text-decoration: none;
	color: #000000;
}
#navi a:hover {
	color: #FFCC00;
	padding-left: 5px;
}
#navi ul, li {
	display: block;
	list-style-image: none;
	list-style-type: none;
}
#navi ul li {
	padding-bottom: 5px;
}
#navi ol {
	padding-left: 5px;
}
#navi ol li {
	padding-bottom: 0px;
	padding-top: 0px;
}
#navi ol li a {
	color: #CC0000;
	font-size: 0.8em;
}
#headder {
	background-attachment: scroll;
	background-image: url(../image/kebabhaus_head.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 550px;
	width: 1024px;
	position: absolute;
	margin: 0px;
	padding: 0px;
	z-index: 1;
}
#headbild {
	background-attachment: scroll;
	background-image: url(../image/doenerbild.gif);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	top: 0px;
	right: 110px;
	height: 237px;
	width: 461px;
}
#newsbereich {
	background-attachment: scroll;
	background-image: url(../image/news.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 106px;
	width: 118px;
	position: absolute;
	top: 560px;
	left: 113px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 120%;
	font-weight: bold;
	color: #CC0000;
	padding-top: 10px;
	padding-left: 6px;
}
#content {
	width: 600px;
	padding-top: 200px;
	padding-left: 250px;
	padding-bottom: 10px;
	z-index: 2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 140%;
	font-weight: normal;
	color: #FFFFFF;
	font-style: normal;
}
#content h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 120%;
	font-weight: bold;
	padding-bottom: 10px;
}
#content h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 130%;
	font-weight: bold;
	padding-bottom: 5px;
}
#content p {
	padding-top: 0px;
	padding-bottom: 5px;
}
#content a {
	color: #FFFFFF;
	text-decoration: underline;
}
#content a:hover {
	color: #FFCC00;
}
#content img {
	border-style: none;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#content strong {
	font-weight: bold;
}
#content .text {
	float: left;
	width: 350px;
}
#content .picture {
	width: 200px;
	padding: 0px;
	float: right;
	margin: 0px;
	text-align: left;
}

mein Problem ist das wenn sich das Fenster verkleinert der Hintergrund von #hauptdiv 100% wird wenn man aber runterscrollt ist da eben kein Hintergrund mehr und das sieht komisch aus.
Gibt es eine Lösung das dieser Hintergrund immer von oben nach unten geht auch wenn das Fenster kleiner wird?
Ich hoffe Ihr versteht was ich mein

Maik · 9. September 2009

Hi,

ohne jetzt das Ganze live in Aktion gesehen zu haben, tippe ich auf den Block #wrapper, der dir hier in die Suppe spuckt, und würde ihn aus dem Markup (HTML-Code) entfernen.

mfg Maik

roundaboutmedia · 9. September 2009

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"><!-- InstanceBegin template="/Templates/temp.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<!-- InstanceBeginEditable name="head" -->
<meta name="Description" content="Buchener-Kebap-Haus, Pizza und Döner- Service, Tel.06281-5659096" />
<meta name="Keywords" content="Buchener-Kebap-Haus, Pizza, Döner, Salate, Seelen, Pide" />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Buchener-Kebap-Haus::Pizza und Döner-Service</title>
<!-- InstanceEndEditable -->
<link href="css/kebaphaus.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper">
  <div id="hauptdiv">
  
<div id="navi">
  	<ul>
    	<li id="home"><a href="index.html" target="_self">Home</a></li>
        <li id="food"><a href="speisekarte_kebaphaus.html" target="_self">Speisekarte</a></li>
        <li id="picture"><a href="bildergalerie_kebaphaus.html" target="_self">Bilder</a></li>
        <li id="contact"><a href="kontakt_kebaphaus.html" target="_self">Kontakt</a></li>
        <li id="impressum"><a href="impressum_kebaphaus.html" target="_self">Impressum</a></li>
    </ul>
</div>
 <div id="headder"><div id="headbild"></div></div>
    <div id="newsbereich">Lieferservice 06281/5659096</div>
   <div id="content"><!-- InstanceBeginEditable name="Textbearbeitung" --><div class="text">
    <h1>Willkommen im Buchener-Kebap-Haus</h1>

Wir bieten Ihnen eine gro&szlig;e Auswahl an ofenfrischen Pizzen und Fladenbrot.
Jede Bestellung wird von uns frisch zubereitet und Sie k&ouml;nnen uns dabei durch unsere offene Theke zusehen.<br />
Ausgesuchtes Fleisch, frischer Salat und selbstzubereitete So&szlig;en werden je nach Wunsch bei unserem D&ouml;ner verwendet. Auch Vegetarier k&ouml;nnen bei uns einen D&ouml;ner mit frischen Salatzutaten bestellen.
Wir geben immer unser Bestes um Ihre W&uuml;nsche zu erf&uuml;llen.
Wenn Sie m&ouml;chten, dann nehmen Sie an einem unserer Tische Platz und lassen es sich schmecken. 
Machen Sie sich selbst einen Eindruck auf unserer Bilderseite.<br />
Wenn Sie jetzt Hunger bekommen haben auf einen unserer D&ouml;ner oder etwas Anderes aus unserer Speisekarte, dann kommen Sie zu uns ins Buchener-Kebap-Haus.<br />
Wir freuen uns auf Ihren Besuch 
    </div>
        <div class="picture">
    <img src="image/doener.jpg" alt="Kebaphaus_doener" /><br />
	<img src="image/pizza.jpg" alt="Kebaphaus_pizza" />
    </div><!-- InstanceEndEditable --></div>
   
  </div>
</div>
</body>
<!-- InstanceEnd --></html>

die ist noch nicht online, deswegen kann ich dir es nur so zeigen. Also der Wrapper ist es nicht hab des grad mal ausprobiert.

Maik · 9. September 2009

Dann werden desweiteren die absoluten Positionsangaben der inneren DIV-Blöcke dafür verantwortlich sein.

Diese würde ich aufheben, und nebeneinander liegende Blöcke mittels der float-Eigenschaft aus dem normalen Textfluß nehmen.

Und beachte hierbei: Wo "gefloatet" wird, muß am Ende auch "gecleart" werden.

mfg Maik

roundaboutmedia · 9. September 2009

Hier ein screenshot vllt hilft dir das was ich meine?
Ich probier es aber gleich auch mal mit den positionierungen.

Maik · 9. September 2009

Ich weiß schon, was du meinst ;-)

Mach das mal, denn wenn ich diese einfach nur mal im CSS auskommentiere, hat sich dieses Problem in Luft aufgelöst.

mfg Maik

roundaboutmedia · 9. September 2009

Danke, hat funktioniert, eine Frage hab ich jetzt allerdings noch und zwar, das mit den index Werten wie muss ich anfangen? Der unterste Layer bekommt doh die niedrigere Zahl oder?

Maik · 9. September 2009

Jip

Und bedenke, dass anstelle von position:absolute nun position:relative benötigt wird, denn nur in Verbindung mit einer dieser beiden Positionsarten funktioniert überhaupt z-index.

mfg Maik

✔ Problem mit 100%

roundaboutmedia

Erfahrenes Mitglied

Maik

roundaboutmedia

Erfahrenes Mitglied

Maik

roundaboutmedia

Erfahrenes Mitglied

Anhänge

Maik

roundaboutmedia

Erfahrenes Mitglied

Maik

Neue Beiträge