| Autor |
Nachricht |
SonnyBlack84
Threadersteller
Dabei seit: 13.07.2006
Ort: ULM
Alter: 39
Geschlecht: 
|
Verfasst So 04.11.2007 02:24
Titel CSS - Hintergrund wird nicht komplett gekachelt |
  |
|
Hallo zusammen,
ich arbeite gerade an einem Layout welches einen gekachelten Hintergrund mit Schatten besitzt (siehe Bild)
Dieser Hintergrund soll immer so lang sein wie der Browser. Dies hat auch erstmal funktioniert. Füge ich jedoch einen Inhalt ein bei dem man dann nach unten scrollen muss, ist der Hintergrund nur soweit gekachelt wie er beim sichtbaren Bereich der Seite geladen wurde. Scrollt man also runter wird der HG komischerweise nicht mehr gekachelt.
Hier mal ein Bild davon
Dieses Problem besteht nur beim Firefox. Im IE6 klappt es.
Hier mal der CSS Code dafür
Hintergrund:
| Code: | #shadow {
background-image:url(bilder/schatten.jpg);
width:847px;
height:100%;
margin-top:0;
margin-left:0;
background-repeat:repeat |
Textbereich | Code: | #textbereich {
font-family:verdana;
width:700px;
color:#999999;
font-size:16px;
padding-left:45px;
padding-top:30px;
} |
Ich habe ja dem kachelenden Hintergrund eine Höhe von 100% gegeben. Warum wird dann der Hintergrund nur soweit gekachelt wie der sichtbare Bereich beim Laden der Seite ist (also ohne scrollen)?
Wäre für jeden Tipp dankbar!
Gruß
|
|
| |
   |
 |
remote
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht:
|
Verfasst So 04.11.2007 04:35
Titel
|
|
|
in dem fall würde es sich doch anbieten den bg direkt im body zu definieren... ohne height und sonstige spielereien 
|
|
| |
|
|
|
Anzeige
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst So 04.11.2007 05:02
Titel
|
|
|
Da es im IE6 geht, geh ich davon aus das du nicht richtig gecleart hast.
Wenn man float benutzt, hebst man den Div aus dem normalen Textfluss raus. Für die richtige darstellung muss man den dann ein clearendes Element verenden, mit "clear:left"
Der Firefox macht es im übrigen korrekt, der IE falsch.
Hab grade kein tut zur Hand aber zeig doch mal deinen HTML Code, vollständig wenn es geht.
|
|
| |
|
|
SonnyBlack84
Threadersteller
Dabei seit: 13.07.2006
Ort: ULM
Alter: 39
Geschlecht:
|
Verfasst So 04.11.2007 14:19
Titel
|
|
|
Danke schonmal für eure Antworten. Nun es ist so das ich den Hintergrund zentriert haben will und ich ihn deswegen nicht in den Body packen kann. Ich habe zum zentrieren ein DIV mit den Werten margin-left:auto; und margin-right:auto; angelegt.
Hier mal der komplette Code:
HTML:
| Code: | <!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>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body id="agentur">
<div id="wrapper">
<div id="shadow">
<div id="navibereich">
<ul>
<li id="navi01"><a href="agentur.html">Die Agentur</a><span class="anders"> | </span></li>
<li id="navi02"><a href="gruenderin.html">Die Gründerin</a><span class="anders"> | </span></li>
<li id="navi03"><a href="mitarbeiter.html">Die Mitarbeiter</a><span class="anders"> | </span></li>
<li id="navi04"><a href="angebot.html">Angebot und Abgrenzung</a><span class="anders"> | </span></li>
<li id="navi05"><a href="vorteile.html">Ihre Vorteile</a><span class="anders"> | </span></li>
<li id="navi06"><a href="motto.html">Unser Motto</a><span class="anders"> | </span></li>
<li id="navi07"><a href="form.php">Formular</a><span class="anders"> | </span></li>
<li id="navi08"><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="textbereich">
<h1>Die Überschrift H1</h1>
<h2>Die Überschrift h2</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<p></p></li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<p></p></li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<p></p></li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<p></p></li>
</ul><br></br><br></br>
</div>
</div>
</div>
</body>
</html>
|
CSS (nicht komplett sauber)
| Code: | @charset "utf-8";
/* CSS Document */
body {
height:100%;
margin:0;
}
html {
height:100%;
margin:0;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width:847px;
height:100%;
padding:0
}
#shadow {
background-image:url(bilder/schatten.jpg);
width:847px;
height:100%;
margin-top:0;
margin-left:0;
background-repeat:repeat
}
#header {
width:810px;
height:124px;
margin-top:0;
position:relative ;
top:0;
}
#navibereich {
font-family:Verdana;
font-size:12px;
padding:0;
width:847px;
height:165px;
background-image:url(bilder/headnavi.jpg)
}
#navibereich ul {
margin-bottom: 0; /* keinen unteren Rand */
margin-left:0;
width:auto;
padding-left:31px;
padding-top:135px;
}
#navibereich li {
display: inline;
list-style-type: none;
margin: 0 0 0 0;
width:auto;
padding:0;
}
body#agentur li#navi01 a, body#gruenderin li#navi02 a, body#mitarbeiter li#navi03 a, body#angebot li#navi04 a, body#vorteile li#navi05 a,
body#motto li#navi06 a, body#form li#navi07 a, body#impressum li#navi08 a {color:
#000000;
}
a { text-decoration: none; outline: none; }
p, ul {
margin-top: 0 ;
margin-right: 0 ;
margin-bottom: 1em ;
margin-left: 0;
padding-left:3px;
}
ul ul {
margin: 0;
padding:0;
}
li {
margin-top: 0 ;
margin-right: 0;
margin-bottom: 0;
margin-left: 1em;
padding:0;
}
a { text-decoration: none; outline: none; }
a:link { color: #6699cc}
a:visited { color: #6699cc; }
a:hover, a:focus { text-decoration: underline; }
a:active { color: #6699cc; }
.skiplink { display: none; }
.anders {
color:#333;
font-weight:normal;
}
h1 {
color:#6699cc;
font-size:24px;
font-family:verdana;
font-weight:normal;
}
h2 {
color:#999999;
font-size:18px;
font-weight:normal;
}
#textbereich {
font-family:verdana;
width:700px;
color:#999999;
font-size:16px;
padding-left:45px;
padding-top:30px;
}
|
Gruß
|
|
| |
|
|
remote
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht:
|
Verfasst So 04.11.2007 15:28
Titel
|
|
|
| SonnyBlack84 hat geschrieben: | | Nun es ist so das ich den Hintergrund zentriert haben will und ich ihn deswegen nicht in den Body packen kann |
| Code: |
body {
background:#fff url(bilder/schatten.jpg) repeat-y top center;
}
|
|
|
| |
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst So 04.11.2007 18:10
Titel
|
|
|
| Code: | ...
<div id="textbereich"> text </div>
<div style="clear:left;"> </div>
...
|
So sollte es gehen.
|
|
| |
|
|
SonnyBlack84
Threadersteller
Dabei seit: 13.07.2006
Ort: ULM
Alter: 39
Geschlecht:
|
Verfasst So 04.11.2007 20:01
Titel
|
|
|
Vielen Dank euch zwei!  Es hat geklappt. Bin noch ein Anfänger in CSS aber das wird schon!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Hintergrund: Anfangsbild, danach ein anderes gekachelt
[HTML-CSS] Grafik wird nicht korrekt gekachelt
wo gibt es freie background-texturen ABER gekachelt?
Nahtlose Texturen im Ordner gekachelt anzeigen? Script?
Hintergrundbild gekachelt inkl. zentriertem Bild darüber
PHP Dateien komplett anschauen
|
|
Willkommen auf dem Portal für Mediengestalter
