|
|||
Misst die Breite des Viewports und läd entsprechende das richtige img. habe sozusagen 8 verschiedene bot Bilder. von klein - groß.
Werde dem aber auch abschwören und eins laden und es mit css auf 100% breite skalieren. Ja, so meinte ich es ja also ich habe das nav-img 100 x 400 px. das hat zu top 100px abstand. jetzt möchte ich aber nur den stamm nach unten zu mit repeaten. also bis viewport ende. Nur ist alles was ich versuche für die katz. soll ich #navi eine min-height geben und das stamm - bild unter das eigentliche bild hängen oder...?Nur funktioniert das auch nicht. Die Footer Grafik soll ja auch nicht den Stamm überdecken sondern umgekehrt... Gucke dir bitte noch einmal meine angehängtes Miniaturbild an. Habe keinen Plan wie ich das lösen/kann soll Geändert von Muamicus (17.11.2010 um 20:38 Uhr) |
Sponsored Links |
|
||||
Zitat:
Zitat:
Nach dem Screen: 2 als Grafik auf Navi anwenden + beige Hintergrund, 1 (der Stamm) auf body anweden (mit repeat-y & background-position) und 3 als Grafik auf den Footer anwenden. Footer und Navi überdecken dann den Baumstamm der von oben bis unten der Seite repeatet wird. Die Hintergrundfarbe "Beige" nur auf Navi und body anwenden.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe Geändert von ArcVieh (17.11.2010 um 21:01 Uhr) |
Sponsored Links |
|
|||
Zitat:
Das mit der Navi ist ne super idee Also gebe ich dem body sozusagen ein Bild mit: 150 x 150 px positioniere es mit margin am linken Bildrand und lasse es y-repeaten? also body { background-position:url("pfad.jpg") ; repeat:y; width:150px; height:150px; margin:0 0 0 250px; z.B. } #navi würde ich dann sozusagen über float oder z-index "darüberhiefen"... oder meinst du es anders? Vielen Dank. |
|
||||
Doch so in etwa meine ich es, nur dass die Angaben etwas anders aussehen:
Code:
body { background:#ece9d8 url(pfad-zum.jpg) repeat-y x-pos y-pos; } Zitat:
Siehe meine Grafik (schwarze Strich makiert das "rangeklebte gespiegelte"): bg_bot_5.jpg Hab's jetzt nur im kleinem Beispiel gezeigt. Nachtrag: NEIN, kein width & height auf den body.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe Geändert von ArcVieh (17.11.2010 um 21:25 Uhr) |
|
|||
Habe soetwas in der Art noch nicht gemacht.
Was meinst du mit: x-pos y-pos background:#ece9d8 url(pfad-zum.jpg) repeat-y top:0px left:50px ; z.B. ? Das Bild unten wird einmal in Original (is klar) und das Gespiegelte rechts "rangekleben" und x-repeaten ?!? Hoffe ich habs so richtig kapiert Wie bekomme ich es dann hin, dass am rechten rand "abgeschnitten" wird. Das mit overflow ist ja nicht gerade die Krönung der Schöpfung Geändert von Muamicus (17.11.2010 um 21:34 Uhr) |
|
||||
Okay, da fehlen Grundlagen bei dir.
Bitte durchlesen: Hintergrundbilder: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets Du lädst deine Grafik in ein Bildbearbeitungsprogramm, kopierst zB die Bildebene und hängst die Kopie gespiegelt rechts ran. Wenn Du diese Grafik mit repeat-x wiederholst, ergänzt sie sich so immer wieder selber und es entstehen keine Bruchstellen. Du benutzt einfach einen #wrapper auf den Du unten die Footer-Grafik dann anwendest: HTML-Code:
<body> <!-- dein Stab drauf anwenden--> <div id="wrapper"> <!-- Footer Grafik mit background-position:bottom left; --> <div id="navigation">...</div> <!-- Das Schild und beige-Hintergrund --> </div> <div id="footer">...</div> </body> Code:
html, body { height:100%; } #wrapper { min-height:100%; } #footer { height:100px; margin-top:-100px; }
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
|
|||
OK, vielen Dank schon mal.
Würdest du die Grafik nicht bei #footer einbinden? also die footer Grafik. Weil du geschrieben hattest bei #wrapper einbinden? Das verunsichert mich jetzt ein wenig Trotzdem vielen Dank |
|
||||
Beim #wrapper ist es deutlich einfacher.
Wenn Du es auf den Footer anwendest, musst Du dem Footer eine ziemlich krasse Höhe zuweisen und hast dann Probleme mit den anderen Elementen. So musst Du nur die schamle Footer-Navi ein bisschen hochziehen.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
|
||||
Ach ja: Der margin von deinem h1 kollidiert mit dem von body (bevor die Frage kommt, wieso immer so ein kleiner Abstand existiert).
Google: Collapsing Margins Außerdem hat dein h1 zwar "keinen Text" mehr, aber immer noch eine Höhe. HTML-Code:
<a href="http://unger-holzcreation.de/index.html"> <img src="img/head.jpg" width="625" height="107" alt="Holzcreation Unger" title="Holzcreation Unger"/> </a>
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
Sponsored Links |
|
|||
Werde mich Morgen ransetzen.
Mit der footer Grafik im Wrapper müsste ich dann genauso verfahren wie mit der body grafik oder? also PHP-Code:
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Liste wird trotz float:left im li nicht horizontal | img | CSS | 27 | 23.08.2013 13:43 |
Inline Listenelement wird nicht richtig im background befüllt | SteveB | CSS | 3 | 28.04.2011 21:41 |
background repeat in der css | brooom | CSS | 3 | 06.11.2009 08:53 |
Darstellungsfehler - FF & IE7 vs. IE6 | mk-gfx | CSS | 2 | 29.10.2008 10:58 |
[IE]: CSS Background-image PNG & repeat | matott | CSS | 2 | 08.05.2005 16:59 |