zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild rechts & links an mittig positioniertem DIV anbringen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.01.2013, 02:25
Photoshop-Designer-Crack
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2012
Beiträge: 19
skrippi befindet sich auf einem aufstrebenden Ast
Standard Bild rechts & links an mittig positioniertem DIV anbringen

Jo Leutz,

muss gerade eine Website für nen Kumpel machen und bin ein bisschen ratlos.
Mein wrapper soll links und rechts so "ausfaden"; sprich das Hintergrundbild des wrappers soll an den Seiten verblassen. Das war bis jetzt nicht schwierig, nur weiß ich gerade leider nicht, wie ich das nun an den wrapper (#main) rankleben soll.

Welche Lösung ich nicht machen möchte ist, ein 1100x8px großes Bild mit repeat-y nach unten hin zu wiederholen, das ist mir zu unprofessionell.
Ist es nicht auch anders möglich, mein #contentBGleft (rechts ist vorerst egal) an #main zu "kleben"?
Ich bin auch gerne für andere Möglichkeiten als meinen Ansatz offen. Leider habe ich z.B. wenig Erfahrung mit :before und :after und weiß nicht, ob das in meinem Fall hinhaun würde...

Code:
http://tinyurl.com/ajzmsms
(kein href, damit Google meine Seite nicht mit dieser verbindet)
MfG, skrippi

Geändert von skrippi (21.01.2013 um 02:29 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.01.2013, 15:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von skrippi Beitrag anzeigen
Welche Lösung ich nicht machen möchte ist, ein 1100x8px großes Bild mit repeat-y nach unten hin zu wiederholen, das ist mir zu unprofessionell.
Was findest du daran "unprofessionell"? (Unprofessionell ist es eher, leere Elemente nebeneinanderzukleben ...)
Zeig bitte, wie du das machen würdest -- dann können wir uns vorstellen, was du überhaupt meinst. Vielleicht kann man dir dann auch einen Vorschlag machen, wie du das anders umsetzen könntest.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.01.2013, 17:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Was findest du daran "unprofessionell"? (Unprofessionell ist es eher, leere Elemente nebeneinanderzukleben ...)
Zeig bitte, wie du das machen würdest

Hallo,

Die URL war in den Code-tags nicht anklickbar:

Antipasteria Garbatella

@ skrippi

Wie wäre es mir 'box-shadow`?
Mit Zitat antworten
  #4 (permalink)  
Alt 21.01.2013, 17:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Gaby, ich will wissen, wie der OP das, was er "unprofessionell" nennt, machen würde. Denn das zeigt die Seite, die unter der URL erreichbar ist, nicht.

Offensichtlich möchte der OP nicht, dass seine URL hier von Suchmaschinen erfasst wird. Deshalb nimm deinen Link doch lieber raus.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.01.2013, 17:21
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
Die URL war in den Code-tags nicht anklickbar:
Da steht aber auch warum das so sein soll.
__________________
MfG
Jens
Mit Zitat antworten
  #6 (permalink)  
Alt 23.01.2013, 01:06
Photoshop-Designer-Crack
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2012
Beiträge: 19
skrippi befindet sich auf einem aufstrebenden Ast
Standard

Hey fricca,

dass mein Lösungsansatz mit den leeren Div's nicht professionell ist, habe ich auch nie gesagt. Ich suche ja mit euch eben nach professionelleren Lösungen.

Im Endeffekt soll das Ganze dann so aussehen:
http://www.abload.de/img/seitenentwurf1mezrx.jpg
(Eigene Photoshopkreation, Nachahmung oder Diebstahl strafbar!)

Ich finde das nicht sehr schön, den Hintergrund inklusive der ausblendenden Seiten in ein Bild á 1000x8px zu klatschen und dann zu repeaten. Das ist wieder so eine riesen Bilddatei.

Was habt ihr noch für Lösungen parat? Ist da was mit :before und :after zu machen?

MfG, skrippi

PS: Gaby, bitte nimm den Link wieder aus deinem Beitrag und lies meinen erneut und GENAUER durch
Außerdem wird durch Boxshadow nicht mein Problem gelöst. Es soll ja auch das Muster zu den Seiten hin ausgeblendet werden.

Geändert von skrippi (23.01.2013 um 01:11 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 23.01.2013, 01:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von skrippi Beitrag anzeigen
Ich finde das nicht sehr schön, den Hintergrund inklusive der ausblendenden Seiten in ein Bild á 1000x8px zu klatschen und dann zu repeaten.
Das ist die sinnvollste Lösung. Je weniger Ressourcen der Browser zu laden hat desto besser.
Zwei (in Summe wahrscheinlich nicht einmal kleinere) Bilder sind der deutlich schlechtere Ansatz.

Zitat:
Ist da was mit :before und :after zu machen?
Was willst du damit machen? Zwei generierte Elemente außen ankleben? Wenn du das unbedingt willst, dann mach es doch. Wenn du damit Probleme hast musst du schon herzeigen, was du versucht hast -- sonst kann dir niemand sagen, was du falsch machst.
Mit Zitat antworten
  #8 (permalink)  
Alt 23.01.2013, 01:27
Photoshop-Designer-Crack
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2012
Beiträge: 19
skrippi befindet sich auf einem aufstrebenden Ast
Standard

Ja ich sehe momentan auch keine andere Lösungen als deine Idee.
Problem ist nur: ich kann im Nachhinein nur schwerlich die Breite ändern :S
Mit Zitat antworten
  #9 (permalink)  
Alt 23.01.2013, 01:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Soll das wohl ein flexibles Layout werden?

Die aktuellen Browser unterstützen inzwischen gradients und einiges an neuen background-Eigenschaften. Damit kann man viel machen, sogar kleinteilige Muster und natürlich "Ausläufe". Mach dich doch mal schlau dazu, dann brauchst du in modernen Browsern noch nicht einmal Photoshop dazu.

Nebenbei:
Deutsch: "Galerie"
Englisch: "Gallery"
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.01.2013, 03:35
Photoshop-Designer-Crack
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2012
Beiträge: 19
skrippi befindet sich auf einem aufstrebenden Ast
Standard

Danke fricca.
Ich habe das jetzt doch nochmal so gelöst.
Möchte zwar immer gerne new sein und die neuesten CSS Tricks kennen, jedoch ist mir Barrierefreiheit und vor Allem Kompatibilität mit alten Browsern wichtig.
Auch wenn man nicht auf alles Rücksicht nehmen kann (transitions würde ich nie wieder mit JS machen ) versuche ich hier und da immernoch etwas zu vereinfachen.

Flexibel soll es nicht werden. Es ging mir nur darum, dass ich nicht genau wusste, was eine angemessene Breite ist und das Bild kann ich im nachhinein nicht einfach verkleinern, da dann
das Muster verzerrt wird.

Wie findest du es? Irgendwelche Code-Bereinigungen deinerseits oder etwas unsauber gecoded?

MfG, skrippi
PS: Danke für den Rechtschreibtipp

Geändert von skrippi (23.01.2013 um 03:40 Uhr)
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
Ein Bild in einem Div oben Links und Text der das Bild umfließt yonthebeach CSS 2 19.07.2009 09:02
komische Verschiebung - wo liegt das Problem? Muckel (X)HTML 5 03.01.2009 18:26
Div Container von rechts nach links Steakfred CSS 5 20.11.2007 17:34
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 19:20
Elemente in einem Div Container links & rechts ausrichte oliwa CSS 8 16.07.2004 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:38 Uhr.