Div Container springt nach unten

Intermediate

Sunday, April 18th 2010, 9:32pm

Huhu liebe Community,

ich bin gerade dabei die Seite unser örtlichen Feuerwehr auf Joomla umzubauen.

Das fertige Template habe ich nun ja schon.
Nun zu meinem Problem:

Wie ich nen Template selber baue für Joomla ist kein Problem, nur sprint jetzt komischerweiße immer der eine Div Container und egal was ich gemacht habe er will nicht auch Google half nicht.

Erstmal nen Screenshot mit dem Fehler:

So nun noch der HTML und der CSS Code:

HTML Code

<html>
<head>
    <base href="" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Feuerwehr</title>
 
  <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>
 
  <link rel="stylesheet" href="/templates/ffw/css/template.css" type="text/css" />
  <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
  <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
 
</head>
<body>
 <div id="header">
   <div id="header_left"><img src="/templates/ffw/images/banner_kopf_links.jpg" /></div>
<div id="header_right"><img src="/templates/ffw/images/banner_kopf_rechts.jpg" /></div>
 
 </div>
 <div id="page">
   <div id="page_left"><div class="moduletable_menu">
<ul class="menu"><li id="current" class="active item1"><a href=""><span>Startseite</span></a></li></ul></div>
 
</div>
   <div id="page_main"><div class="componentheading">
Feuerwehr</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
</td>
</tr>
 
 
</table>
 
</div>
 </div>
 <div id="footer">
   <div id="footer_left"><img src="/templates/ffw/images/fusszeile_links.jpg" /></div>
   <div id="footer_right"><img src="/templates/ffw/images/fusszeile_rechts.jpg" /></div>
 
 </div>
</body>
</html>

Cascading Style Sheets

* {
  margin: 0;
  padding: 0;
}
 
 
  body { font-family: Arial;
background: #fff url(../images/ffw_bg.jpg);
text-align: center;
    }
 
  img {
border: none;
    }
 
  #header { background: #fff url(../images/banner_kopf_bg.jpg);
height: 110px;
margin: 0 auto;
margin-top: 35px;
text-align: center;
width: 80%;
    }
 
  #page { margin: 0 auto;
position: relative;
text-align: center;
width: 80%;
height: 550px;
    }
 
  #page_left { background: #fff url(../images/bg_menu.jpg);
font-size: small;
left: 10px;
padding-left: 5px;
text-align: left;
top: 0;
width: 15%;
height: 550px;
    }
 
  #page_main { background: #fff;
float: right;
margin: 0 auto;
width: 85%;
overflow: auto;
height: 550px;
text-align: right;
    }
 
  #footer { background: #fff url(../images/fusszeile_bg.jpg);
height: 70px;
margin: 0 auto;
text-align: center;
width: 80%;
    }
 
  #header_left { float: left;
text-align: left;
    }
 
  #header_right { float: right;
text-align: right;
    }
 
  #footer_left { float: left;
text-align: left;
}
 
  #footer_right { float: right;
text-align: right;
}

Hoffe jeder blickt ein bisschen durch und ihr hoffe ihr versteht was ich meine.

Gruß

iriss

Beginner

Posts: 5

2

Sunday, April 18th 2010, 10:09pm

Ich kenn mich jetzt auch nicht so gut aus, weil ich grad nicht ganz durchschaue welcher Teil der Seite über welches <div> erzeugt wird(die Müdigkeit schlägt langsam zu

) aber ich hatte mal ein ähnliches Problem.
Ich konnte es beheben indem ich das betreffende <div> kleiner gemacht habe. Allerdings hatte das <div> bei mir eine fixe Breite, die Lösung lag darin dass ich die Höhe und Breite des <div>s um 20px verkleinert habe.
Das lag an dem padding:10px; (mal 2 macht dann 20px die in der Höhe und in der Breite "weggenommen" werden müssen).
Wie dass dann bei Prozentwerten aussieht weiß ich leider nicht, aber verkleiner einfach mal das betreffende und schau ob sich was tut, viel Glück!
Edit: http://www.css4you.de/wsboxmodell/index.html#buh Hilft dir vielleicht : )

Ansonsten gibts vielleicht ein Problem mit den floats?

Exi

Intermediate

Posts: 91

3

Sunday, April 18th 2010, 10:12pm

Ja bei mir liegt auch schon nen haufen Müdigkeit vor

Also die Seite funktioniert sonst ja also die Vorlage ist genauso aufgebaut.
Der entsprechende Div ist der:

HTML Code

<div id="page_main"><div class="componentheading">
Feuerwehr</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
</td>
</tr>
 
 
</table>
 
</div>

Die table wurde von Joomla erzeugt aber macht keinen Unterschied ob da oder nicht.

Mit der Breite und Höhe werde ich mal testen

Exi

Intermediate

Posts: 91

4

Wednesday, April 21st 2010, 7:18pm

Also Höhe und Breite ändern hat nichts gebracht.

Finde es schon ziemlich komisch, da das Original funktioniert und genauso aufgebaut ist wie das hier jetzt....

Hoffe es hat jemand noch einen entscheidenden Tipp

mad

Professional

Posts: 662

5

Wednesday, April 21st 2010, 7:28pm

Hast du irgendwo eine laufende Version von dem was funktioniert und von deinem? Am Live-Code lässt sich das am einfachsten und schnellsten ablesen.
Außerdem fehlt die Angabe um welche CSS-Datei es sich hier im Forum handelt. Du bindest ja 3 Dateien ein. Welche davon hast du hier reingepostet?

EDIT: ich habe mir den Code jetzt mal angeschaut. Also ganz unrecht hatte iriss nicht. Du musst eventuell die Größen etwas anpassen. Das Problem ist, dass die innenliegenden Container zusammen 100% Breite ergeben. Dazu hat #page_left noch einen padding. Im Firefox bricht das aus den Fugen, da du damit über 100% liegst.
Das eigentliche Problem ist aber, dass dein #page_left nicht floatet. Div-Container sind halt Blockelemente und wenn man ihnen kein floating zuweist, brechen sie um. du könntest das Ganze also z.B. so beheben.

Cascading Style Sheets

* {
  margin: 0;
  padding: 0;
}
 
 
  body { font-family: Arial;
background: #fff url(../images/ffw_bg.jpg);
text-align: center;
    }
 
  img {
border: none;
    }
 
  #header { background: #fff url(../images/banner_kopf_bg.jpg);
height: 110px;
margin: 0 auto;
margin-top: 35px;
text-align: center;
width: 80%;
    }
 
  #page { margin: 0 auto;
position: relative;
text-align: center;
width: 80%;
height: 550px;
border: 1px solid red;
    }
 
  #page_left { background: #fff url(../images/bg_menu.jpg);
font-size: small;
left: 10px;
padding-left: 5px;
text-align: left;
top: 0;
width: 15%;
height: 500px;
border: 1px solid green;
float: left;
    }
 
  #page_main { background: #fff;
float: right;
margin: 0 auto;
width: 83%;
overflow: auto;
height: 500px;
text-align: right;
border: 1px solid blue;
    }
 
	div.clear {
	clear:both;
	}
 
  #footer { background: #fff url(../images/fusszeile_bg.jpg);
height: 70px;
margin: 0 auto;
text-align: center;
width: 80%;
border: 1px solid gray;
    }
 
  #header_left { float: left;
text-align: left;
    }
 
  #header_right { float: right;
text-align: right;
    }
 
  #footer_left { float: left;
text-align: left;
}
 
  #footer_right { float: right;
text-align: right;
}

(Die Ränder habe ich eingebaut, damit man mal sieht wo welche Box rumschwirrt, das ist immer sehr hilfreich bei der Fehlersuche)
Du solltest dein HTML, aber auch noch ein wenig anpassen. Und zwar solltest du nach deinen beiden Boxen mit float ein clea-div einfügen:

HTML Code

<div id="page">
			<div id="page_left">
				<div class="moduletable_menu">
					<ul class="menu">
						<li id="current" class="active item1">
							<a href=""><span>Startseite</span></a>
						</li>
					</ul>
				</div>
			</div>
			<div id="page_main">
				<div class="componentheading">
					Feuerwehr
				</div>
				<table class="blog" cellpadding="0" cellspacing="0">
					<tr>
						<td valign="top"></td>
					</tr>
				</table>
			</div>
			<div class="clear"></div>
		</div>