zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verschachtelung x -repeat

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 17.11.2010, 20:34
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 17.11.2010, 20:53
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von nils_1309 Beitrag anzeigen
Misst die Breite des Viewports und läd entsprechende das richtige img. habe sozusagen 8 verschiedene bot Bilder. von klein - groß.
Brauchst Du nicht. In einem Bildbearbeitungsprogramm einfach die Grafik verdoppeln, die Kopie rechts neben das Original packen und horizontal spiegeln - dann kannst Du die Grafik x-repeaten lassen ohne das ein Bruch auftritt.

Zitat:

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.
Das habe ich verstanden und auch erklärt.
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.
Angehängte Grafiken
Dateityp: png holzseite.png (851,9 KB, 3x aufgerufen)
__________________
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)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 17.11.2010, 21:09
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Zitat:
Brauchst Du nicht. In einem Bildbearbeitungsprogramm einfach die Grafik verdoppeln, die Kopie rechts neben das Original packen und horizontal spiegeln - dann kannst Du die Grafik x-repeaten lassen ohne das ein Bruch auftritt.
Also habe ich sozusagen bei extrem großen viewports 2 auf dem Bildschirm oder verstehe ich dich jetzt falsch? Also das Originale + Stamm und ein gespiegeltes was ich rechts "ranklebe" und x-repeaten lasse ?

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.
Mit Zitat antworten
  #14 (permalink)  
Alt 17.11.2010, 21:22
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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:
Also habe ich sozusagen bei extrem großen viewports 2 auf dem Bildschirm oder verstehe ich dich jetzt falsch? Also das Originale + Stamm und ein gespiegeltes was ich rechts "ranklebe" und x-repeaten lasse ?
Eine Grafik, nur gespiegelt dran geklebt.

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)
Mit Zitat antworten
  #15 (permalink)  
Alt 17.11.2010, 21:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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)
Mit Zitat antworten
  #16 (permalink)  
Alt 17.11.2010, 22:09
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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>
Damit body & #wrapper immer die volle Höhe einnehmen, musst Du das so machen:
Code:
html, body {
   height:100%;
}

#wrapper {
   min-height:100%;
}

#footer {
   height:100px;
   margin-top:-100px;
}
Kannst Du aber auch in den FAQ nachlesen.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #17 (permalink)  
Alt 18.11.2010, 08:48
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #18 (permalink)  
Alt 18.11.2010, 18:22
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
  #19 (permalink)  
Alt 18.11.2010, 19:39
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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>
Das könntest Du einfach in h1 packen - dann sparst Du dir auch das IR.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 18.11.2010, 20:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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:
#wrapper {
   
background:url(pfad-zum.jpgx-pos y-pos;

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:09 Uhr.