problem mit div höhe und hintegrundbild

nobaschwa · 13. Dezember 2004

Hi!

Ich habe eine Seite (bzw. hätte sie gerne) die in drei Bereiche geteilt ist. Oben soll ein Bild hin auf dem eine Nav liegt, darunter soll links auch eine (Unter-)Nav hin und rechts dann der Inhalt. Das wollte ich mit Hilfe von divs machen. Soweit so gut...aber:

1. Die Divs haben nicht die Höhe und Breite, die sie haben sollten

2. Im oberen Bild wird das Hintergrundbild nicht angezeigt

Hier mein Code:

PHP:

<?php
error_reporting(E_ALL);
echo "<html>\n";
echo "	<head>\n";
echo "		<title>Meine Seite</title>\n";
echo "		<link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
echo "		</head>\n";
echo "			<body>\n";
echo "				<div id=\"root\">\n";
echo "				<div id=\"oben\">\n"; // obere nav
echo "					obere nav";
echo "				</div>\n";
echo "				<div id=\"links\">\n"; // linke nav
echo "					Hier kommt ein Menu hin\n";
echo "				</div>\n";
echo "				<div id=\"mitte\">\n"; // Inhalt
echo "					Hier kommt der Inhalt hin\n";
echo "				</div>\n";
echo "				</div>\n";
echo "			</body>\n";
echo "</html>\n";
?>

Code:

oben {
	height: 140px;
	background-image:url(oben.jpg);
}
#links {
	width: 80px;
	height: 100%;
	float: left;
	background-color:#FFCC00;
}
#mitte {
	background-color:#000099;
	height: 100%;
	float:left;
}

Kann mir da vielleicht jemand helfen?

Danke schonmal

Bis denn

Gumbo · 13. Dezember 2004

Wieso hast du nicht gleich „Marsch, Marsch!“ geschrieben, dass hätte meine Interpretation der Aussage deines Beitrags am besten getroffen.

Fangen wir erst einmal mit dem Grundlegenden an: Um eine korrekte und gleichmäßige Darstellung von CSS auf unterschiedlichsten Plattformen zu gewährleisten ist valides HTML und CSS erforderlich. Auf Anhieb kann ich deinem CSS nur unterstellen, dass oben kein legitimer Selektor. Desweiteren ist beim, dem Anschein nach, XHTML keinerlei Dokumententyp-Definition angegeben.

Weitergehend kann ich dir zu diesem Thema nur folgende Artikel von A List Apart empfehlen:

Schlussendlich gibt es noch den Adventskalendereintrag des Webstandards-Adventskalenders vom 12.12.2004.

Und nun etwas Eigeninitiative, bitte.

nobaschwa · 13. Dezember 2004

Tut mir leid, wenn das "befehlsmäßig" bei dir angekommen ist so war es auf jeden Fall nicht gemeint!

Normalerweise habe ich auch eine Dokumententyp-Definition drin...aber das dürfte ja nicht das Problem sein. Ich verstehe einfach nicht warum er das Bild nicht anzeigt und da helfen mir deine Links leider auch nicht weiter.

Wäre nett, wenn du mir bei diesem Problem helfen könntest

bis denn

nobaschwa · 14. Dezember 2004

So...ich bin nen bißchen weiter.

Hier mein neuer code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
		<link rel="stylesheet" type="text/css" href="page.css" />
<title>Test</title>
</head>
<body>
<div id="header">
  Obere Navigation
</div>
<div id="left">
  Linke Navigation
</div>
<div id="middle">
  Inhalt
</div>
</body>
</html>

Code:

body {
  margin: 0px;
  padding: 0px;
}

div#header {
  clear: both;
  height: 138px;
  background-image:url(oben.jpg);
  padding: 1px;
}
div#left {
  position: absolute;  
  height: 100%;   
  float: left;
  width: 80px;
  background-color: #FFCC00;
}
div#middle {  
  position: absolute;  
  height: 100%;
  width: 100%;
  left: 80px;
  padding: 0px 0px 0px 0px;
  margin: 0px;  
  background-color: #000099;
}

Das Bild wird jetzt auch angezeigt, aber ich habe jetzt das Problem das wenn ich bei der linken Navigation und/oder mitte height : 100%; angebe eine scrollbar erscheint, weil die seite 100% plus die höhe von der oberen Navigation angezeigt wird. Es ist das gleiche Problem beim middle-div, wenn ich width: 100% eingebe.
Wie bekomme ich es hin das die linke Navigation und der Middle div die Höhe von der Seite ausnutzt und nicht mehr und das middle div nur die breite von der Seite.

Danke schonmal

Bis denne

nobaschwa · 17. Dezember 2004

Hi!

Ich habe jetzt nochmal nen bißchen rumprobiert und habe ein neues Problem:

Es wird jetzt alles so angezeigt wie es soll: obere und linke Navigation scrollen nicht mit, aber der Inhaltsteil schiebt sich beim Scrollen über die obere Navigation. Kann man das irgendwie machen das der Inhaltsteil zwar scrollbar ist aber eine eigene Scrollleiste bekommt, d.h. nur in seinem Bereich gescrollt wird?

Hier mein Quellcode:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


<head>
		<link rel="stylesheet" type="text/css" href="page.css" />
<title>Test</title>
</head>
			<body>
<div id="top">
<div id="header">
  Obere Navigation
</div>
<div id="left">
  Linke Navigation
</div>
<div id="middle">
  Inhalt
</div>
</div>
</body>
</html>

Code:

body,html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

div#top {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

div#header {
  clear: both;
  position: fixed;
  left: 0px;
  height: 138px;
  width: 100%;
  background-image:url(oben.jpg);
  padding: 1px;
}
div#left {   
  float: left;
  height: 100%;
  position: fixed;
  top: 138px;
  left: 0px;
  width: 80px;
  background-color: #FFCC00;
}
div#middle {     
  height: 100%;
  width: 100%;
  position: absolute;
  top: 138px;
  left: 80px;  
  background-color: #000099;
}

Danke schonmal

Bis denn
Norman

PS: Es soll so aussehen wie hier unter Gästebuch

hela · 18. Dezember 2004

Hallo nobaschwa,

versuch's mal so:

Code:

  <?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
  <title>Test</title>
  <!--<link rel="stylesheet" type="text/css" href="page.css" />-->
  <style type="text/css">
  <!--
  html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  body {
    background-color: #ffffff;
    overflow: hidden;		/* Scrollbalken im Fenster unterdrücken */
  }
  
  #header {
    position: absolute;  
    top: 0;
    left: 0;
    width: 100%;
    height: 138px;
    background-image:url(oben.jpg);
    background-color: #ffffff;
 padding: 0;			/* geht nicht anders, Interpretation Boxmodell! */
    overflow: hidden;		/* Scrollbalken im DIV-Block unterdrücken */
    z-index: 2;
  }
  #header .inhaltDiv {
 margin: 10px;			/* hier padding-Eigenschaften realisieren! */
  }
  
  #left {
    position: absolute;  
    top: 138px;
    left: 0;
    bottom:0;
    width: 80px;
 padding: 0;			/* geht nicht anders, Interpretation Boxmodell! */
    background-color: #FFCC00;
    overflow: hidden;		/* Scrollbalken im DIV-Block unterdrücken */
    z-index: 1;
  }
  /* nur für IE: */
  * html #left {
    top: 0;
    height: 100%;
    border-top-width: 138px;	/* = Höhe #header */
    border-left-width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
    border-style: solid;
  }
  #left .inhaltDiv {
 margin: 10px;			/* hier padding-Eigenschaften realisieren! */
  }
  
  #middle {
    position: absolute;  
    top: 138px;
    left: 80px;
    bottom: 0;
    right: 0;
 padding: 0;			/* geht nicht anders, Interpretation Boxmodell! */
    background-color: #000099;
    color: #ffffff;
    overflow: auto;		/* Scrollbalken im DIV-Block, falls notwendig */
  }
  /* nur für IE: */
  * html #middle {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-top-width: 138px;	/* = Höhe #header */
    border-left-width: 80px;	/* = Breite #left */
    border-bottom-width: 0;
    border-right-width: 0;
    border-style: solid;
  }
  #middle .inhaltDiv {
 margin: 10px;			/* hier padding-Eigenschaften realisieren! */
  }
  -->
  </style>
  
  </head>
  <body>
  
  <div id="header"><div class="inhaltDiv">  Obere Navigation </div></div>
  <div id="left"><div class="inhaltDiv">  Linke Navigation </div></div>
  <div id="middle"><div class="inhaltDiv">  Inhalt </div></div>
  
  </body>
  </html>

nobaschwa · 19. Dezember 2004

Vielen Dank!

Ich hab nen mac und da läufts im Safari und Firefox richtig...im IE 5.2 ne neuere Version gibts für den mac nicht, werden keine Scrollleisten angezeigt...hast du es mal in einer höheren Version vom IE versucht (kann das leider selbst nicht testen). Dann habe ich noch ein Problem:
Ich kann auf der Seite nicht mit Hilfe des Scrollrades an der Maus scrolllen nur über die Leiste...mit den Pfeiltasten funktioniert es auch nicht. Hast du eine Idee warum das so ist?

bis denn

hela · 19. Dezember 2004

Hallo nobaschwa,

ja stimmt: Ich habe das Beispiel mit IE6 unter Win ausprobiert und da funktioniert es. Das Beispiel funktioniert beim IE auch nur, wenn in den XHTML-DOCTYPE-Angaben wirklich der XML-Prolog enthalten ist. Das ganze basiert auf einem Realisierungsvorschlag von Nicholls. Vielleicht kannst du mal auf seine Seite gehen und nachschauen, ob bei dir sein Beispiel funktioniert (Menüpunkt "Layouts" --> 'Fixed' layout v3 oder direkt unter http://www.stunicholls.myby.co.uk/layouts/body4.html). Er schreibt: "This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox", so weit kann ich aber eben auch nicht prüfen. Ich habe zwar keinen Mac, mich interessiert's aber trotzdem - wäre nett wenn du das Ergebnis noch mal posten würdest.

Zu dem Problem "Maus-Scrollrad" kann ich leider nichts sagen, weil völlig anhungslos. Aber du hast recht - mir ist das nur noch nie aufgefallen.

problem mit div höhe und hintegrundbild

nobaschwa

Mitglied

Gumbo

Erfahrenes Mitglied

nobaschwa

Mitglied

nobaschwa

Mitglied

nobaschwa

Mitglied

hela

nobaschwa

Mitglied

hela

Neue Beiträge