✔ Firefox + Height 100% + repeat-y ?

d-braun · 10. November 2006

Hi,

Ich habe ein Problem mit meiner CSS-Formatierung.
Die linke Seite meiner Page wird nicht korrkt dargestellt sobald man nach unten scrollt.

Hier könnt ihr euch das mal an:
http://www.mydom-designs.de/test/test.html

Die HTML-Datei:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>blabla</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all"/>
  </head>

  <body>
    <div id="container">
      <div id="main-title">Title</div>
      <div id="header-image"></div>
      <div id="navbar">
        <a href="#">Link</a> | 
        <a href="#">Link</a> | 
        <a href="#">Link</a> | 
        <a href="#">Link</a> | 
        <a href="#">Link</a> | 
        <a href="#">Link</a> | 
        <a href="#">Link</a>
      </div>
      <div id="headline"></div>
      <div id="body">
        <h1>This is a Topic</h1>
        <div id="main-text">
          <p>Text ...</p>
        </div>
      </div>
    </div>
  </body>
</html>

Die CSS-Datei:

Code:

html {
height: 100%;
background-image: url(images/right_side.gif);
background-repeat: repeat-y;
background-position: top right;
}

body {
height: 100%;
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
background-image: url(images/left_side.gif);
background-repeat: repeat-y;
color: #000000;
}
#container {
	width: 800px;
	display: inline;
}
#main-title {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
letter-spacing: 5px;
text-align: right;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
padding-right: 50px;
background-color: #333333;
color: #ffffff;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}


#header-image {
background-color: #4d80b9;
background-image: url(images/flower.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 177px;
border-top: 2px #ff4700 solid;
border-bottom: 2px #ff4700 solid;
margin-left: 110px;
margin-right: 110px;
}

#navbar {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: 11px;
text-align: center;
margin-top: 0;
padding-bottom: 8px;
padding-top: 8px;
background-color: #333333;
color: #ffffff;
word-spacing: 8px;
border-bottom: 2px #ff4700 solid;
}

#navbar a:link, #navbar a:visited {
color: #ffffff;
word-spacing: none;
}

#navbar a.current {
color: #ff4700;
}

#navbar a:hover {
color: #ff4700;
text-decoration: none;
}


#headline {
font-size: .65em;
padding-top: 30px;
text-align: justify;
background-color: #F2F2F2;
padding-left: 100px;
padding-right: 100px;
margin-left: 110px;
margin-right: 110px;
margin-bottom: 0;
line-height: 1.5em;}


p.byline {
text-align: right;
margin-bottom: 0;
}

h1 {
margin-left: 110px;
margin-right: 110px;
font-size: .8em;
padding-bottom: 3px;
padding-top: 23px;
padding-left: 50px;
padding-right: 0;
color: #000000;
border-bottom: 1px #ff4700 solid;
letter-spacing: 5px;
font-weight: bold;
background-color: #F2F2F2;
margin-top: 0;
margin-bottom: 0;
}


#main-text {
margin-top: 0;
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
line-height: 1.8em;
background-color: #ffffff;
height: 100%;
}

#main-text p {
text-align: justify;
margin-left: 50px;
margin-right: 50px;
}

h2 {
padding-bottom: 3px;
padding-right: 0;
color: #000000;
border-bottom: 1px #000000 solid;
letter-spacing: 5px;
margin-left: 50px;
margin-right: 50px;
font-size: 1em;
margin-top: 0;
padding-top: 10px;
}

p, ul, ol, table {
margin-top: 17px;
margin-bottom: 0;
}

ol, ul {
margin-left: 75px;
margin-right: 75px;
}

a:link, a:visited {
text-decoration: none;
font-weight: bold;
color: #ff0000;
}

a:hover {
text-decoration: underline;
}


#footer {
text-align: center;
margin-bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 11px;
margin-top: 20px;
padding-right: 50px;
background-color: #4d80b9;
color: #ffffff;
font-weight: bold;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}

#footer a:link, #footer a:visited {
color: #ffffff;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
color: #ffffff;
}
.right {
float: right;
text-align: right;
width: 50%;
}
.left {
float: left;
text-align: left;
padding-left: 50px;
}
.right h3 {
margin-top: 0px;
font-size: 90%;   
}

.borders {
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

input {
	background-color: #ffffff;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 11px;
}

Danke schonmal im Voraus.

MFG
dom

Maik · 10. November 2006

Setze mal folgende CSS-Regel ein:

Code:

html,body {
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
}

html {
background-image: url(images/right_side.gif);
background-repeat: repeat-y;
background-position: top right;
}

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
background-image: url(images/left_side.gif);
background-repeat: repeat-y;
color: #000000;
}

Gumbo · 10. November 2006

Kennst du schon die Faux-columns-Technik? Übrigens braucht dein Dokument noch eine Namensraumdeklaration.

d-braun · 11. November 2006

Hi,
danke für die schnellen Antworten.

zu michaelsinterface:
wenn ich diese CSS-Regeln einsetze wird die "left_side.gif" zwar durchgehend angezeigt, jedoch es jetzt das Problem dass wenn der Text nicht Seitenfüllend ist die linke Seite auch leer ist.
Es geht irgendwie immer nur die Hälfte und nicht beides

zu Gumbo:
also entweder hab ich die Technik nicht ganz kapiert oder die funktioniert bei mir nicht.

MFG
dom

Maik · 11. November 2006

Sorry, das hatte ich gestern Abend nicht beachtet bzw. überprüft. :-(

Probier es mal so:

Code:

html {
height: 100%;
background-image: url(images/right_side.gif);
background-repeat: repeat-y;
background-position: top right;
}

body {
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
background-image: url(images/left_side.gif);
background-repeat: repeat-y;
color: #000000;
}

Zu Gumbos Vorschlag: In deinem Fall (linker u. rechter Rahmen wird in der Vertikalen wiederholt) funktioniert die Technik nur mit einem Layout, das eine fixe Breite besitzt, da die "Rahmenelemente" in einer Grafik vereint sein müssen.

Maik · 12. November 2006

Ich hab dir mal ein Beispiel für deine Seite erstellt und hänge es hier als ZIP-Datei an.

Der relevante CSS-Code sieht nun so aus:

Code:

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

body {
font-family: verdana, arial, helvetica, sans-serif;
background: url(images/bg_body.png);
color: #000000;
}

#container {
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
background: url(images/bg_container.png) repeat-y;
}

Desweiteren habe ich für alle im DIV #container eingebetteten Elemente die margin-left- und margin-right-Werte auf 20 Pixel reduziert.

d-braun · 13. November 2006

Klasse funktioniert.
Jedoch brauche ich den größeren Container den ich anfangs hatte.
Ich bekomm das irgendwie nicht größer.
Was genau hast du den verändert damit das kleiner ist bzw. was muss ich ändern damit es wieder größer wird?

MFG
dom

Maik · 13. November 2006

Wie schon erwähnt, funktioniert die "Faux-Columns-Technik" in deinem Fall nur bei einem Layout mit fester Breite. Wenn du also die Breitenvorgabe für das DIV #container erhöhen willst, mußt du auch die Hintergrundgrafik (bg_container.png) dementsprechend verbreitern.

Ansonsten versuch mal meinen zuletzt korrigierten CSS-Code für die ursprüngliche Variante mit variabler Breite.

d-braun · 13. November 2006

Guten Abend.

Ich habs jetzt alles soweit alles passend gemacht.
Danke für die Hilfe.

MFG
dom

✔ Firefox + Height 100% + repeat-y ?

d-braun

Erfahrenes Mitglied

Maik

Gumbo

Erfahrenes Mitglied

d-braun

Erfahrenes Mitglied

Maik

Maik

Anhänge

d-braun

Erfahrenes Mitglied

Maik

d-braun

Erfahrenes Mitglied

Neue Beiträge