Hallo zämä,
habe da ein Problem bei meiner (zukünftigen) Homepage, auf welches ich immernoch keine Lösung gefunden habe.
Und zwar habe ich ein Background-Image, welches sich vom Header bis zum Footer durchzieht (repeat-y). Komischerweise wird die Länge jedoch nicht übers längste Div-Element in "content" bestimmt, sondern nur über die Länge von "sidebar" (siehe CSS-Code). D.h. wenn ich im Hauptfenster ("main_content") einen langen Inhalt habe, dann läuft er über die Seite raus.
Web-Adresse: http://gidoo.pytalhost.com/index.html (sry für Werbung).
-> Die Seite ist W3C geprüft (XHtml & CSS)
Am Einfachsten ist die Page mittels Entwicklerwerkzeuge zu kontrollieren (Opera Dragonfly und Firefox 'irgendwas'...)
und ich danke schon mal allen für eine Antwort - habe mir schon stundenlang den Kopf zerbrochen
Das CSS-File (habe auch hier gekürzt).
Edit: Hier noch ein Foto von meinem Problem:
habe da ein Problem bei meiner (zukünftigen) Homepage, auf welches ich immernoch keine Lösung gefunden habe.
Und zwar habe ich ein Background-Image, welches sich vom Header bis zum Footer durchzieht (repeat-y). Komischerweise wird die Länge jedoch nicht übers längste Div-Element in "content" bestimmt, sondern nur über die Länge von "sidebar" (siehe CSS-Code). D.h. wenn ich im Hauptfenster ("main_content") einen langen Inhalt habe, dann läuft er über die Seite raus.
Web-Adresse: http://gidoo.pytalhost.com/index.html (sry für Werbung).
-> Die Seite ist W3C geprüft (XHtml & CSS)
Am Einfachsten ist die Page mittels Entwicklerwerkzeuge zu kontrollieren (Opera Dragonfly und Firefox 'irgendwas'...)
und ich danke schon mal allen für eine Antwort - habe mir schon stundenlang den Kopf zerbrochen
HTML:
<head>
<title>muster.org - Startseite</title>
<!-- Diverses -->
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv " />
<link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
<style type="text/css">
</style>
</head>
<body>
<!-- #content: holds all except site footer - causes footer to stick to bottom -->
<div id="content" class="width background">
<div id="content_left">
<div id="mainmenu">
<ul>
<!-- Hauptmenu -->
</ul>
</div>
<div id="sidebar_left">
<ul>
<!-- Unter-Menu -->
</ul>
</div>
</div>
<div id="content_right">
<!--#header_right: holds the right part of the header with logo & headerimage-->
<div id="header_right">
<!-- Alles welches auf der "rechten" Seite des Headers ist -->
</div>
<!--#header_right end-->
<div id="main_content">
<!-- Start Post -->
<div class="post">
<!-- Post 1 -->
</div>
<!-- End Post -->
<!-- Start Post -->
<div class="post">
<!-- Post 2 -->
</div>
<!-- End Post -->
</div>
</div>
</div>
<div style="clear:both;"></div>
<!-- #content end -->
<!-- #footer: holds the site footer (logo and links) -->
<div id="footer" class="width">
<!-- footer -->
<!-- #footer end -->
</body>
</html>Das CSS-File (habe auch hier gekürzt).
Code:
/*Allgemeine Breite */
.width {
display: block;
width: 1180px;
margin: 0 auto;
}
.width30 {
width: 20%;
}
.width70{
width: 77%;
}
/* Hauptfenster */
#content {
position: relative;
height: auto !important;
min-height: 95%;
height: 100%;
}
.background{
background: url(../images/bg/page.gif) repeat-y top center;
background-position: 48% 0;
}
/*Unterteilung der Seite in zwei Spalten (OBEN&UNTEN!) */
#content_left {
display: inline-block;
width: 289px;
margin: 0;
padding: 0;
}
#content_right{
display: inline-block;
width : 784px;
margin: 0;
padding: 0;
}
/*Rechte Spalte OBEN (Header-Bild, RSS-Feed, Logo*/
#header_right {
position: absolute;
top: 0px;
width : 784px;
height : 306px;
margin: 0;
padding: 0;
}
/*RSS-Feed begin*/
#rssFeed {
margin: 0 0 0 -4px;
padding: 0;
text-align: left;
width : 711px;
height : 65px;
float: left;
background: url(../images/bg/header.gif) repeat-x top right;
color: #faa24b;
}
#rssFeed a{
color: #faa24b;
text-decoration: none;
border: 0;
}
#rss_pic {
position: relative;
left: 9pt;
top: 4pt;
height: 50px;
border: 0;
}
.rss_abo {
position: relative;
left: 14pt;
top: -7pt;
font: 14pt Verdana,Helvetica,Arial,sans-serif;
text-decoration:none;
}
.clearbox {
display: block;
height: 0;
clear: both;
}
/*RSS-Feed end*/
/*logo - hier www.gidoo.ch*/
#logo {
position: relative;
top: -27pt;
float: right;
width: 260px;
font: 20pt Verdana,Helvetica,Arial,sans-serif;
color: #fff;
}
/*usw...*/
/*Linke Spalte OBEN (Hauptmenu)*/
/*Hauptmenu begin*/
#mainmenu {
text-align : left;
background-color: #5b5b5b;
display: inline-block;
margin: 0;
width : 289px;
height: 371px;
vertical-align: top;
}
/*usw...*/
/*here == aktiv-Element für hover-Effekt*/
#mainmenu ul li a:hover,
#mainmenu ul li a.here {
height: 58px;
background: #0d0d0d;
border-top: 7px solid #b10011;
}
/*usw...*/
/*Hauptmenu end*/
/*Linke Spalte UNTEN (Sidebar mit Untermenu) begin*/
#sidebar_left {
font: 16pt Verdana,Helvetica,Arial,sans-serif;
text-align: left;
margin:0;
width: 289px;
}
/*usw...*/
/*LINKE Spalte end*/
/*RECHTE Spalte UNTEN (Inhalt der Page) begin*/
#main_content{
display: inline-block;
padding: 5px 5px 5px 20px;
position: absolute;
top: 400px;
vertical-align: top;
width:665px;
height: 100%;
}
/*RECHTE Spalte end*/
/*Footer (Login/Copyright) begin*/
#footer {
background: url(../images/bg/footer.gif) no-repeat top center;
height: 58px;
background-position: 48% 0;
font: 10pt Verdana,Helvetica,Arial,sans-serif;
color: #fff;
}
/*usw...*/
/*Footer end*/Edit: Hier noch ein Foto von meinem Problem:
Zuletzt bearbeitet:
(Foto angefügt)
! 
