CSS Positionierung Problem

Basti_rsl2

Hallo,

ich habe noch nicht so viel Erfahrungen mit css. Hab mal ein Grundgerüst für meine neue Homepage gebaut. Geht schon mal ganz gut:

http://www.esv-rosslau.de/germania/index.html

Wenn ich jetzt aber versuche die Container mit Inhalt zu füllen kommt es immer wieder vor, dass die Container verschoben werden. Zum Beispiel wenn ich im Content Teil Inhalt include:

https://www.forum-hilfe.de/www.esv-rossla…mania/index.php

Was muss ich bei der Positionierung meiner divs noch beachten?

Vielen Dank schoneinmal für Eure Hilfe.

lukasn

Das Problem liegt im Includeten Quelltext. Hier mal der relevante Teil, nämlich der content-div:

HTML

<div id="contents"><!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>Unbenanntes Dokument</title>
</head>


<body>
Dein Inhalt (war etwas zu gross für das HTML-Fenster hier im Forum ;))
</body>
</html>
 </div></div>

Alles anzeigen

Ich denke das Problem fällt jedem auf. Die includete Datei scheint eine Komplette HTML-Datei zu sein, samt Doctype, <html> usw. Das geht natürlich gar nicht, da du so <html> und <head> 2x in einer Datei hast.
Gewisse Browser übersehen diesen fehler zwar noch, aber auch diese scheitern ganz am ende an de </div></div>. Dies schliesst den container vor dem Footer, dadurch wird der Footer absolut an der Fenstergrenze positioniert. Ich weiss jetzt nicht, ob die beiden <div>-Endtags ein Fehler im Grundscript oder in der includeten Datei sind, aber die müssen auch raus.

So, nochmal zusammengefast was gemacht werden muss:

Die include-Datei darf nur den tatsächlichen inhalt enthalten
Die doppelten </div>-Tags müssen entfernt werden, damit der container erst nach dem footer geschlossen wird. Falls das schon mit Punkt 1 gelöst wurde, um so besser

Ich hoff das war verständlich,
-Lukas

Basti_rsl2

Vielen Dank schonmal dafür. Jetzt klappt es. Noch eine Frage:

Wie kann ich nun in den linken div eine senkrechte Navigation einbauen, die nach rechts ausgeklappt wird? Also über die Grenze des divs hinaus? Ist sowas möglich?

jojo87

ist möglich:
http://htmldog.com/articles/suckerfish/

lukasn

Ich hab mir den aktuellen Quellcode von der Seite grad nochmal angeschaut, das sieht ja wieder schlimm aus

Verwendest du irgend ein IDE oder so? Du hast nämlich wieder 3 HTML-Seiten zusammengehängt, das musst du korrigieren.

Das Menu funktioniert im moment noch nicht, weil du für #left overflow:auto angegeben hast, wenn du das auf overflow:visible änderst funktionierts.

-Lukas

Edit: Weil ich grad nichts zu tun hatte, hab ich mal deinen Code in eine Valide form gebracht. er ist noch nicht perfekt so, aber immerhin mal Valide HTML 4.01. Da fällt mir ein, denk beim schreiben daran dass du im Doctype HTML 4.01 angegeben hast. Die img-tags in der Tabelle waren mit /> geschlossen, das ist jedoch XHTML, in HTMl schliesst man die tags mit >

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>SV Germania 08 Rosslau</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">


html, body
{
height:100%;
padding: 0; 
margin: 0; 
text-align: center;
background-color: #e0e0ec;
}


#container
{
text-align: left;
padding:0;
margin: 0px auto 0;
width: 936px;
position: relative;
height: auto;
height:100%;
min-height: 430px;
background: white;
}


#header
{
text-align: left;
padding:0;
margin: 0px auto 0;
height:170px;
width:934px;
background-image:url(Bilder/index_02.jpg)
}




#left
{
width: 178px;
height: auto;
overflow: visible;
background: #d3d3d3;
float: left;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: white;
border-left-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
}


#right
{
width: 178px;
height: 300px;
overflow: auto;
background: #d3d3d3;
float: right;
padding-bottom: 45px;
border-style:solid;
border-width:1px;
border-color:white;
}


#contents
{
width:564px;
height: 400px;
overflow: auto;
background: white;
padding-bottom: 45px;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CCCCCC;
border-left-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;	
}


#footer 
{
text-align:center;
position: absolute;
bottom: 0px;
height: 26px;
width:936px;
background-color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
.menu {
	font-family: arial, sans-serif;
	width:178px;
	height:0px;
	position:relative;
	font-size:11px;
	text-align: left;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	background-image: url(./Bilder/index_13.jpg);
	line-height: 26px;
}
.menu ul li a, .menu ul li a:visited {
	display:block;
	text-decoration:none;
	color:#666666;
	width:178px;
	height:26px;
	text-align:left;
	line-height:26px;
	font-size:11px;
	text-indent: 10px;
	background-image: url(./Bilder/index_13.jpg);
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #fff;
	border-right-color: #fff;
	border-bottom-color: #fff;
	border-left-color: #fff;
}
.menu ul {
	padding:0;
	margin:0;
	list-style-type: none;
	background-image: url(./Bilder/index_13.jpg);
	width: 178px;
}
.menu ul li {
	float:left;
	margin-right:1px;
	position:relative;
	line-height: 26px;
	background-image: url(./Bilder/index_13.jpg);
}
.menu ul li ul {
	display: none;
	line-height: 26px;
	background-image: url(./Bilder/index_13.jpg);
}


/* specific to non IE browsers */
.menu ul li:hover a {
	color:#fff;
	background-color: #99FF00;
}
.menu ul li:hover ul {
	display:block;
	position:absolute;
	top:0;
	left:179px;
	width:100px;
/*	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;  */
}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
.oben {
	color:#fff;
	font-size: 12px;
	background-image: url(./Bilder/11_11.jpg);
	height: 29px;
	width: 178px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 29px;
	text-align: left;
	text-indent: 10px;
	display: block;
	font-style: normal;
}
.tab


{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}
.Stil3 {font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.Stil4 {color: #666666}
.Stil10 {font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.Stil11 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-indent: 10px;
}


</style>
</head>


<body>
<div id="container"> 
  <div id="header"></div>
  <div id="left"><div class="oben">Men&uuml;</div>
<div class="menu">


 <ul>


  <li><a class="hide" href="../menu/index.html">Germania Aktuell</a>


  <!--[if lte IE 6]>
  <a href="../menu/index.html">Germania Aktuell
  <table><tr><td>
  <![endif]-->


   <ul>
    <li><a href="../menu/zero_dollars.html" title="Aktuelle Germania News">News</a></li>
    <li><a href="../menu/embed.html" title="Wichtige Termine">Termine</a></li>
    <li><a href="../menu/form.html" title="Ankündigungen">Ank&uuml;ndigungen</a></li>
    </ul>


   <!--[if lte IE 6]>
   </td></tr></table>
   </a>
   <![endif]-->


  </li>


  <li><a class="hide" href="index.html">Verein</a>


  <!--[if lte IE 6]>
  <a href="index.html">MENUS
  <table><tr><td>
  <![endif]-->


   <ul>
    <li><a href="spies.html" title="a coded list of spies">Historie</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">Gegenwart</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">Vorstand</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">Elbesportpark</a></li>
    <li><a href="cross.html" title="non-rectangular links">Anfahrt</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">Archiv</a></li>
   </ul>


  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->


  </li>


  <li><a class="hide" href="../layouts/index.html">Mannschaften</a>


  <!--[if lte IE 6]>
  <a href="../layouts/index.html">LAYOUTS
  <table><tr><td>
  <![endif]-->


   <ul>
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">1. Mannschaft</a></li>
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">2. Mannschaft</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">A-Jugend</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">B-Jugend</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">C-Jugend</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">D-Jugend</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">E-Jugend</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">F-Jugend</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">Alte Herren</a></li>
   </ul>


  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->


  </li>


  <li><a class="hide" href="../boxes/index.html">Saison</a>


  <!--[if lte IE 6]>
  <a href="../boxes/index.html">BOXES
  <table><tr><td>
  <![endif]-->


   <ul>
    <li><a href="spies.html" title="a coded list of spies">1. Mannschaft</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">2. Mannschaft</a></li>
   </ul>


  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->


  </li>


  <li><a class="hide" href="../mozilla/index.html">Galerie</a>


  <!--[if lte IE 6]>
  <a href="../mozilla/index.html">MOZILLA
  <table><tr><td>
  <![endif]-->


 
  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->


  </li>


  <li><a class="hide" href="../ie/index.html">G&auml;stebuch</a>


  <!--[if lte IE 6]>
  <a href="../ie/index.html">EXPLORER
  <table><tr><td>
  <![endif]-->


  
  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->


  </li>


  <li><a class="hide" href="../opacity/index.html">Links</a>


  <!--[if lte IE 6]>
  <a href="../opacity/index.html">OPACITY
  <table><tr><td>
  <![endif]-->


 
  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->


  </li>
 </ul>


</div>


<table width="178" border="0" align="left" cellpadding="0" cellspacing="0" id="tab">
  <tr class="Stil11">
    <td height="27" colspan="4" style="background-image: url(./Bilder/index_20.jpg)"><span class="Stil11">Tabelle</span></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td width="19" height="25"><div align="center" class="Stil4"><span class="Stil3">3</span></div></td>
    <td width="37" height="25"><div align="center"><span class="Stil4"></span><img src="./Wappen/hett.gif" width="25" height="25" alt=""></div></td>
    <td width="87" height="25"><div align="left" class="tab">Hettstedt</div></td>
    <td width="35" height="25"><div align="center" class="tab">21</div></td>
  </tr>
  <tr bgcolor="#d3d3d3">
    <td height="25"><div align="center" class="Stil4"><span class="Stil3">4</span></div></td>
    <td height="25"><div align="center"><span class="Stil4"></span><img src="./Wappen/halber.gif" width="25" height="25" alt=""></div></td>
    <td height="25"><div align="center" class="tab">
      <div align="left">Halberstadt</div>
    </div></td>
    <td height="25"><div align="center" class="tab">
      <div align="center">20</div>
    </div></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td height="25"><div align="center" class="Stil4"><span class="Stil3">5</span></div></td>
    <td height="25"><div align="center"><span class="Stil4"></span><img src="./Wappen/Unbenannt-1.gif" width="25" height="25" alt=""></div></td>
    <td height="25"><div align="left" class="tab">Wernigerode</div></td>
    <td height="25"><div align="center" class="tab">19</div></td>
  </tr>
  <tr bgcolor="#d3d3d3">
    <td height="25"><div align="center" class="Stil4"><span class="Stil10">6</span></div></td>
    <td height="25"><div align="center"><span class="Stil4"></span><img src="./Wappen/rosslau.gif" width="25" height="25" alt=""></div></td>
    <td height="25"><div align="center" class="tab">
      <div align="left"><strong>Rosslau</strong></div>
    </div></td>
    <td height="25"><div align="center" class="tab">
      <div align="center"><strong>17</strong></div>
    </div></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td height="25"><div align="center" class="Stil4"><span class="Stil3">7</span></div></td>
    <td height="25"><div align="center"><span class="Stil4"></span><img src="./Wappen/arnstedt.gif" width="25" height="25" alt=""></div></td>
    <td height="25"><div align="left" class="tab">Arnstedt</div></td>
    <td height="25"><div align="center" class="tab">17</div></td>
  </tr>
  <tr bgcolor="#d3d3d3">
    <td height="25"><div align="center" class="Stil4"><span class="Stil3">8</span></div></td>
    <td height="25"><div align="center"><span class="Stil4"></span><img src="./Wappen/piesteritz.gif" width="25" height="25" alt=""></div></td>
    <td height="25"><span class="tab">Piesteritz</span></td>
    <td height="25"><div align="center" class="tab">15</div></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td height="25"><div align="center" class="Stil4"><span class="Stil3">9</span></div></td>
    <td height="25"><div align="center"><span class="Stil4"></span><img src="./Wappen/elster.gif" width="25" height="25" alt=""></div></td>
    <td height="25"><span class="tab">Elster</span></td>
    <td height="25"><div align="center" class="tab">14</div></td>
  </tr>
</table>
</div>
  <div id="right"></div>
  <div id="contents"><strong><a href="http://de.wikipedia.org/wiki/Lewis_Carroll" title="Lewis Carroll">Lewis Carroll</a></strong> (* 27. Januar 1832 in Daresbury im County Cheshire als <em>Charles</em> <em>Lutwidge</em> <em>Dodgson</em>; 14. Januar 1898 in Guildford) war ein britischer Schriftsteller des  viktorianischen Zeitalters, Fotograf, Mathematiker und Diakon. Er ist  der Autor der berühmten Kinderbücher <em>Alice</em> <em>im</em> <em>Wunderland</em>, <em>Alice</em> <em>hinter</em> <em>den</em> <em>Spiegeln</em> (oder <em>Alice</em> <em>im</em> <em>Spiegelland</em>) und <em>The</em> <em>Hunting</em> <em>of</em> <em>the</em> <em>Snark</em>.  Mit seiner Befähigung für Wortspiel, Logik und Fantasie schaffte er es,  weite Leserkreise zu fesseln. Seine Werke, als sogenannte  Nonsensliteratur bezeichnet, sind bis heute populär geblieben und haben  nicht nur die Kinderliteratur, sondern ebenso Schriftsteller wie James  Joyce, die Surrealisten wie André Breton oder den  Kognitionswissenschaftler Douglas R. Hofstadter beeinflusst. Bekannt  wurde Carroll auch als Fotograf: Wie Julia Margaret Cameron und Oscar  Gustave Rejlander hat er bereits ab der Mitte des 19. Jahrhunderts  Fotografie als Kunst betrieben.
</div>
  <div id="footer">&copy; 2009 SV Germania 08 Ro&szlig;lau &amp; Bastian Schneider </div>
</div>
</body>
</html>

Alles anzeigen

Basti_rsl2

Vielen Dank. Jetzt habe ich noch ein weiteres Problem. Und zwar möchte ich links unter die Navigation noch eine Tabelle und eventuell noch andere Dinge packen. Ich hab das jetzt einfach per include eingebunden. Im Firefox sind die zwei Dinge (menu.php und tabelle.ph) untereinander. Im explorer irgendwie hintereinander.

Wie immer schon mal Danke.

hier nochmal der link:

http://esv-rosslau.de/Germania/index.php

Basti_rsl2

Ich habe mal eine Skizze gemacht wie mein Aufbau sein soll:

[Blockierte Grafik: http://i366.photobucket.com/albums/oo108/M…neider/divs.jpg]

Wie bekomme ich nun left2 genau unter left1?

derzeit sieht es so aus:

http://www.esv-rosslau.de/germania/index2.php

Wäre super, wenn mir nochmal jemand helfen könnte.

Danke

driver

ich leg bei sowas immer einen container namens "col_left" an, gib
dem nen float auf die linke seite und leg dort dann alle listen usw rein.

Basti_rsl2

Du meinst statt 2 containern nur einen? Also wie auf der rechten Seite?

driver

oder die 2 div (wenn es div sein müssen) in einen weitern div.

Unregistriert

Bei Firefox funktioniert das. Im iExplorer ist left2 immernoch hinter left1 und nicht darunter.

siehe: http://esv-rosslau.de/Germania/index4.php

Basti_rsl2

Irgendwie scheint das an meinem Menü zu liegen. Wenn ich leere Boxen nehmen funktioniert das.

http://esv-rosslau.de/Germania/index5.php

Einer ne Idee warum?

Tags