|
|||
Hintergrundbild beginnend ab bestimmten Randabstand od. div 100% höhe geben
Hallo!
Mirs jetzt kein besserer Thementitel eingefallen Folgendes Problem, ich hab über den body ein Hintergrundbild für die ganze Seite angegeben .. Mein Code fängt mit einem div an was zentriert ist und ne feste Breite hat (nennen wir den div mal #wrapper), in diesem ist der komplette Seiteninhalt. Da kommt zuerst ein Header, der ist oben Transparent weil ein Stück der Grafik herausragt, im Hintergrund soll die Hintergrundgrafik des Bodys erscheinen, klappt bis hier hin auch alles. Problem ist jetzt der #wrapper ist auf 100% Höhe eingestellt (ich hab das hier quasi versucht nachzubauen -> Link) und hat auch einen Hintergrund, dieser wird aber jetzt oberhalb des Headers auch angezeigt. Was er nicht soll. Der Hintergrund des Wrappers soll quasi erst nach dem Header anfangen, gibt es dafür irgendeine Möglichkeit ? Ich habe es mit diesem background position versucht aber irgendwie klappts da nicht so wie ich das gerne hätte. Hab auch schon den Header über den Wrapper gesetzt, dann ging es zwar aber ich hatte immer nen Scrollbalken da die Seitenhöhe dann wohl zu hoch war (und ich nicht weiß was ich da genau verändern muß ... ) Im Grunde hab ichs nur so gemacht weil ich den div für den Inhalt (#content) nicht so hinbekomme das er immer 100% Höhe hat. Hab also immer zwischen Header und Footer das Hintergrundbild vom body wenn der Content nicht die ganze Seite füllt. Meine Frage könnte also auch lauten wie ich das hinbekomme, dann müßt ich nicht mit dem wrapper Hintergrund rumeiern und könnte den Footer ganz normal einbauen. Mein html code schaut so aus 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="css/header4.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script> <script type="text/javascript"> $(document).ready(function () { /* Horizontal Menu */ $('ul#headertopnavlinks li a,#footernav li a').hover( function () { //convert current height to negative value height = $(this).height() * (-1); $(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:160}); }, function () { //reset the top position $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:160}); } ); }); </script> </head> <body> <div class="skiplink"><a href="#content">Zum Inhalt</a></div><!-- Zum Inhalt springen --> <div id="sitetop"></div> <div id="wrapper"><!-- Aussenbox Anfang --> <div id="fullcontent"><!-- Fullcontent Anfang --> <div id="headerbg"><!-- Header Anfang --> .... </div><!-- Header Ende --> <div id="content"><!-- Content Anfang --> <div class="clear"></div> </div><!-- Content Ende --> </div><!-- Fullcontent Ende --> </div><!-- Aussenbox Ende --> <div id="footer"><!-- Footer Anfang --> ... </div><!-- Footer Ende --> </body> </html> HTML-Code:
/*############# Allgemeine Angaben Anfang ############*/ * { padding: 0; margin: 0; } html, body { height: 100%; } body { background-color: #406b23; background: url(../images/bg_green.png); background-attachment: fixed; background-repeat: repeat; font: 1em/16px Tahoma, Verdana, Helvetica, Arial; color: #fff; } body a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.75em; cursor: pointer; } body a:hover { color: #fff; letter-spacing: 2px; text-transform: uppercase; } #wrapper { width: 960px; /* Breite des Inhaltsbereichs */ min-height: 100%; margin: 0 auto 0 auto; } * html #wrapper { height: 100%; } #fullcontent { position: relative; min-height: 100%; } * html #fullcontent { height: 100%; } /*############# Allgemeine Angaben Ende ############*/ /*############# Allgemeine Klassen Anfang ############*/ .clear { clear: both; } .skiplink { position: absolute; top: -9999px; left: -9999px; width: 0; height: 0; font-size: 0; line-height: 0; } /*############# Allgemeine Klassen Ende ############*/ /*############# Header Anfang ############*/ #headerbg { width: 960px; height: 218px; background: url(../images/header.png) no-repeat; margin: 0; } #headertopnav { padding: 140px 0 0 269px; } #headersocial { margin-top: 30px; padding-left: 15px; } #headeruser { padding-top: 2px; padding-left: 815px; } #headertopnavlinks li { float: left; } #headertopnavlinks li li { float: none; font-family: 'GnuolaneFreeRegular', Tahoma, Verdana, Arial; width: 150px; } #headertopnavlinks li ul { position: absolute; left: -9999px; border-right: 1px solid #1b0303; border-left: 1px solid #1b0303; border-bottom: 1px solid #1b0303; } #headertopnavlinks li:hover ul, #headertopnavlinks li.sfhover ul { left: auto; } #headertopnavlinks a { display: block; cursor: pointer; outline: none; } #headertopnavlinks li li a { color: #1b0303; background: #e7e7e7; text-decoration: none; font-size: 0.875em; padding: 1px 0 1px 4px; outline: none; cursor: pointer; } #headertopnavlinks .title { background: url(../images/bg_headline.png) repeat; color: #fff; font-family: 'GnuolaneFreeRegular', Tahoma, Verdana, Arial; padding: 3px 0 0 4px; width: 146px; } #headertopnavlinks a:hover { color: #bd0d0a; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; } #headertopnav a.hhome { width: 39px; height: 19px; background: url(../images/home.png) no-repeat 0 0; padding-right: 10px; } #headertopnav a.hladder { width: 50px; height: 19px; background: url(../images/ladder.png) no-repeat 0 0; padding-right: 9px; } #headertopnav a.hrules { width: 74px; height: 19px; background: url(../images/rules.png) no-repeat 0 0; padding-right: 9px; } #headertopnav a.hteam { width: 79px; height: 19px; background: url(../images/team.png) no-repeat 0 0; padding-right: 9px; } #headertopnav a.hhelp { width: 36px; height: 19px; background: url(../images/help.png) no-repeat 0 0; padding-right: 9px; } #headertopnav a.hhof { width: 88px; height: 19px; background: url(../images/hof.png) no-repeat 0 0; padding-right: 9px; } #headertopnav a.hmembers { width: 74px; height: 19px; background: url(../images/members.png) no-repeat 0 0; padding-right: 9px; } #headertopnav a.hboard { width: 46px; height: 19px; background: url(../images/board.png) no-repeat 0 0; padding-right: 9px; } #headertopnav a.hgeneral { width: 69px; height: 19px; background: url(../images/general.png) no-repeat 0 0; } #headersocial a.hfacebook { width: 17px; height: 17px; background: url(../images/facebook.png) no-repeat 0 0; padding-right: 4px; } #headersocial a.hgoogleplus { width: 17px; height: 17px; background: url(../images/googleplus.png) no-repeat 0 0; padding-right: 4px; } #headersocial a.htwitter { width: 17px; height: 17px; background: url(../images/twitter.png) no-repeat 0 0; padding-right: 4px; } #headersocial a.hrss { width: 17px; height: 17px; background: url(../images/rss.png) no-repeat 0 0; } #headeruser a.husercp { width: 130px; height: 11px; background: url(../images/usercp.png) no-repeat 0 0; } /*############# Header Ende ############*/ /*############# Footer Anfang ############*/ #footer { position: relative; width: 960px; height: 150px; margin: -150px auto 0 auto; background: url(../images/footer.png) no-repeat; } * html #footer { margin-top: -148px; } #footernav { padding: 90px 0 0 303px; } #footernav a { cursor: pointer; outline: none; float: left; } #footernav a.farchive { width: 49px; height: 19px; background: url(../images/farchive.png) no-repeat 0 0; padding-right: 9px; } #footernav a.fcontact { width: 58px; height: 19px; background: url(../images/fcontact.png) no-repeat 0 0; padding-right: 9px; } #footernav a.fhome { width: 39px; height: 19px; background: url(../images/fhome.png) no-repeat 0 0; padding-right: 9px; } #footernav a.fimprint { width: 74px; height: 19px; background: url(../images/fimprint.png) no-repeat 0 0; padding-right: 9px; } #footernav a.fjobs { width: 36px; height: 19px; background: url(../images/fjobs.png) no-repeat 0 0; padding-right: 10px; } #footernav a.fsitemap { width: 56px; height: 19px; background: url(../images/fsitemap.png) no-repeat 0 0; } #footervalid { position: absolute; width: 180px; top: 97px; left: 33px; } #footervalid a { cursor: pointer; outline: none; float: left; } #footervalid a.fvalidxhtml { width: 88px; height: 31px; background: url(../images/validxhtml.png) no-repeat 0 0; padding-right: 4px; } #footervalid a.fvalidcss { width: 88px; height: 31px; background: url(../images/validcss.png) no-repeat 0 0; } #footersitecopy { position: absolute; width: 152px; height: 16px; top: 117px; left: 406px; } #footersitecopy a { display: block; width: 152px; height: 16px; cursor: pointer; outline: none; background: url(../images/fsitecopy.png) no-repeat; } #footerdesigncopy { position: absolute; width: 108px; height: 14px; top: 133px; left: 428px; } #footerdesigncopy a { display: block; width: 108px; height: 14px; cursor: pointer; outline: none; background: url(../images/fdesigncopy.png) no-repeat; } #footertop { position: absolute; width: 35px; height: 40px; top: 92px; right: 30px; } #footertop a { display: block; width: 35px; height: 40px; cursor: pointer; outline: none; background: url(../images/ftop.png) no-repeat; } #footertop a:hover { width: 35px; height: 40px; cursor: pointer; outline: none; background: url(../images/ftop_h.png) no-repeat; } /*############# Footer Ende ############*/ /*############# Linke Navigation Anfang ############*/ #green { padding: 0; border: none; margin: 0; width: 25%; float: right; overflow: auto; } #green-inside { background: #afd; padding: 0; border: none; margin: 0 10px 10px 10px; } /*############# Linke Navigation Ende ############*/ /*############# Content Anfang ############*/ #content { width: 100%; background: url(../images/bg_content.png) repeat; margin: 0; } #blue { padding: 0; border: none; margin: 0; width: 75%; float: right; clear: both; overflow: auto; } #blue-inside { background: #adf; padding: 0; border: none; margin: 0 20px 10px 10px; } /*############# Content Ende ############*/ /*############# Listenformatierung Anfang ############*/ li { list-style-type: none; } /*############# Listenformatierung Ende ############*/ /*############# Schrift Anfang ############*/ @font-face { font-family: 'GnuolaneFreeRegular'; src: url('../fonts/gnuolane_free-webfont.eot'); src: url('../fonts/gnuolane_free-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/gnuolane_free-webfont.woff') format('woff'), url('../fonts/gnuolane_free-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .gnufont { font-family: 'GnuolaneFreeRegular', Tahoma, Verdana, Arial; } .normalfont { font-size: 0.688em; font-family: Tahoma, Verdana, Helvetica, Arial; color: #fff; } .smallfont { font-size: 0.625em; font-family: Tahoma, Verdana, Helvetica, Arial; color: #fff; } .bigfont { font-size: 0.750em; font-family: Tahoma, Verdana, Helvetica, Arial; color: #fff; } h2 { font-size: 1.125em; font-weight: normal; } /*############# Schrift Ende ############*/ /*############# Grafiken allgemein ############*/ img.rounded { border-radius: 7px; } img { border: 0; } Vielleicht kann mir jemand helfen, gebe auch gerne nen Link per PN damit man sichs ansehen kann wies gemeint ist. Gruß Geändert von nightmind (13.07.2012 um 21:27 Uhr) |
Sponsored Links |
|
|||
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Hi threadi,
habe das probiert gehabt, wenn du sagst das geht, habe ichs vermutlich falsch gemacht. Habs zwar hinbekommen die horizontale Position einzustellen, aber der vertikale war wie festgenagelt. Habe mir jetzt mit der Methode geholfen. So gehts auch erstmal und so auch besser als mit meiner Methode. Edit: Opera/IE/Chrome machen jetzt nen Abstand zwischen Footer und Content indem wieder das Hintergrundbild vom Body zu sehen ist - ich bekomm ne Meise. Nur habe ich das Problem das im Content 2 Spalten sind (Navigation und Inhalt) und die der Navigation immer abgeschnitten wird sofern der Inhalt nicht nach unten hin länger als die Navispalte geht. Muss ich noch mal kucken ob es da eine Lösung zu gibt. Geändert von nightmind (14.07.2012 um 10:56 Uhr) |
|
|||
Zitat:
nightmind, ich sehe an dem verlinkten Beispiel nicht, was dein Problem ist. Allen Sticky-Footer-Methoden ist gemein, dass es ein Element gibt, das 100% Mindesthöhe hat (ja, nur eines). Dieses kann ein Hintergrundbild aufnehmen, das einen durchgehenden Inhaltsbereich simuliert. Weiterhin kann ein Hintergrund(bild) den gesamten Canvas ausfüllen. Meist ist dieser/s für body angegeben. Damit musst du arbeiten. Wenn du oben irgendwas nicht sehen willst, dann muss es abgedeckt werden. Stell bitte ein Beispiel online mit Bildern, die wirklich zeigen, was du willst. Und v.a.: Aktualisier dein Beispiel, wenn du nach Änderungen weiter darüber reden willst. Worte alleine bringen nichts.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Du akzeptiersts ja nicht das ich nicht will das hier jeder sehen kann wie die Seite aussieht. Es ist zwar nur ne kleine Seite aber ich hab keine Lust das vorab schon jemand sieht wie die Seite mal aussehen soll, man weiß ja nie wer in so nem großen Forum wie hier alles angemeldet ist den man dann doch kennt. Verständlich oder ?
Wenns nicht genügt den Link per PN zu verschicken dann muß ich eben woanders fragen. |
|
|||
Zitat:
Zitat:
Wenn du Privatsupport willst, kannst du ein Jobangebot weiter unten einstellen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Ich versteh den Sinn schon und möcht hier jetzt auch keine Diskussion führen an nem Samstag ham wir beide sicher wichtigers zu tun. So verständlich was ich erreichen möchte bzw. wo mein Problem liegt ?
|
Sponsored Links |
|
|||
Besser.
Es ist aber nach wie vor nicht zu sehen, was du in deinem Eingangsposting beschreibst, nämlich ein unerwünschter Hintergrund über dem Header. Ich habe dir oben doch schon etliches dazu hingeschrieben. Nochmal: Das Bild, das den durchgehenden Content simulieren soll, muss in das 100%-mindesthohe Element. Was oben nicht sichtbar sein soll, muss abgedeckt werden. Du musst unter den Spalten ausreichend Platz für den Footer freihalten. Dann wird auch nichts verdeckt.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrundbild passt sich nicht variabler td höhe an | Jordan | CSS | 2 | 26.06.2012 14:40 |
Inline Listenelement wird nicht richtig im background befüllt | SteveB | CSS | 3 | 28.04.2011 20:41 |
Divv 100% Höhe mit Hintergrundbild | Gsicht | CSS | 0 | 24.03.2009 08:30 |
IE7 verliert ab bestimmter Div Höhe den Alpha Opacity | In4matiker | CSS | 7 | 21.01.2009 17:04 |
Darstellungsfehler - FF & IE7 vs. IE6 | mk-gfx | CSS | 2 | 29.10.2008 09:58 |