1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Dieses Thema im Forum "Design" wurde erstellt von der_pe, 18. November 2012.

Schlagworte:
  1. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    Hallo,

    ich habe folgendes Problem:

    Ich habe für das Umsetzen einer Firmenpage ein vorgegebenes Design bzw. einen Hintergrund den ich da mit einbringen muss.
    Die integrierte Funktion von Wordpress lässt da für meine Bedürfnisse sehr zu wünschen übrig und ich bin mittlerweile schon so weit, dass ich das Bild in 3 teile gestückelt habe und diese nun versuche per Header, Body, Footer einzubinden und den Body-teil quasi zu wiederholen ( je nach Textlänge der Seite ) und diese quasi mit Header und Footer wie ein Deckeln abzuschließen :D
    Ich hoffe man versteht ungefähr was ich meine.
    Der Hintergrund ist ein 4-Eck mit runden Ecken und soll den ganzen Content "einschließen".

    Den Header-teil habe ich soweit eingebunden und "gecentert". Sieht auch ca. so aus wie ich mir das vorstelle.
    Nun stehe ich vor dem Problem, dass ich einfach nicht weiß wie ich den Mittel und Schlussteil eingebunden bekomme. Habe da schon echt lange rumgewerkelt aber nichts so hinbekommen wie ich das gerne möchte.

    Hier mal die Adresse zum Testsystem:

    http://patrickschweichler.com/im-systeme/wordpress/

    Der Hintergrund ist als .jpg vorhanden.

    Habe auch etwas über "Backstretch" per jquery gefunden...aber nicht wirklich verstanden.
    Wäre echt super wenn mir jemand ein bisschen dabei helfen könnte, da ich mir im Moment versuche ein 2. Standbein neben der Systemadministration aufzubauen :)

    Vielen Dank

    der_pe
     
  2. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    poste doch bitte mal ein bild mit dem gewünschten layout damit man sich vorstellen kann wie es aussehen soll.

    lg, pixselig
     
  3. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    Logo.jpg

    Der Hintergrund ist im Anhang bzw. im Post :)

    der_pe
     
  4. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    AW: Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

    Und dieser Rahmen soll rund um die gesamte Website gehen?

    Wieviel px breite hat er denn?

    Die erste Variante wäre so wie du oben beschrieben hast -> bei entsprechender Ausrichtung sollte das funktionieren (stichwort : padding erhöhen damit das Hintergrundbild richtig sichtbar wird). Zusätzlich würde ich den mittleren teil nicht in den body einbauen sondern in das div "main". (Geht prinzipiell auch mit dem body, dann dürfen der header und footer allerdings auch keine vertikale margin besitzen. Auch bei grossen viewports und kurzem content können so "fehler " auftreten -> body ragt dann über den footer hinaus.)

    Eine weitere Möglichkeit wäre es, den Rahmen mittels CSS einzubauen. Mittels border-(radius). Allerdings ist das Resultat der rahmenabrundung bei dickeren Rahmen nicht ganz ident mit deiner Vorlage. Dies ließe sich aber mittels zwei ineinander verschachtelten divs beheben. Meiner Meinung nach ist diese Lösung die sauberere -> allerdings habe ich auch einen Fabel dafür möglichst wenig Grafiken zu verwenden.

    Wenn du zweiter Variante verwenden willst, dann schreibe mir bitte welch breite, welche Farbe und welchen Radius die Kanten bzw. der Rahmen hat/haben. Dann schaue ich mir das morgen am PC an und poste dir die codes.

    LG, pixselig

    PS: die drei Punkte gehören auch dazu?
    Diese würde ich allerdings wirklich als Grafik einbinden. Wobei, mhmm... auch diese liessen sich via CSS erzeugen. Aber das wäre dann wahrscheinlich schon etwas übertrieben.
     
    #4 pixselig, 18. November 2012
    Zuletzt bearbeitet: 18. November 2012
  5. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    Genau! Sollte möglichst alles einrahmen.

    Das Bild hat 1260 x 810px. Also 1260px Breite.

    Farbe Rahmen: #E0E8EB

    Den Radius der Kanten weiß ich ehrlich gesagt gar nicht...wie kann ich den denn herausfinden?

    Und ja, die 3 Punkte gehören auch dazu :)

    Vielen Dank
     
  6. Narcanti

    Narcanti Well-Known Member

    Registriert seit:
    17. Mai 2007
    Beiträge:
    1.872
    Zustimmungen:
    0
    ... sieht dann sicher gut aus, wenn der Monitor nur 1024px breit ist...
     
  7. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    <3 danke für deinen Kommentar!
     
  8. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    hallo der_pe

    nimm doch bitte mal das jetzige (obere) hintergrundbild heraus. das ist nämlich fehlerhaft implementiert -> es wird in ein div integriert welches sich zwischen head- und bodybereich befindet - also falsch platziert ist.

    das das design etwas unter einer fixen breite leiden kann stimmt schon - wenn das allerdings die vorgaben sind, ja dann...
    das es sich aber sicher negativ auf die mobile ansicht der webseite auswirkt ist leider klar - es sei denn du optimierst dannach auch die mobile ansicht.

    so, der rest folgt bald...
     
  9. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    Hab ich :)
    Über mobile Ansicht haben wir gar nicht geredet und ist auch nicht Teil meines Arbeitsauftrages.
    Kommt vllt. später mal...

    Vielen Dank
     
  10. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    sodala

    1. Schritt:

    style.css zeile 194
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    ändern in
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    zur sicherheit auch noch -> style.css zeile 74
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    ändern in
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    2. Schritt:

    öffne deine header.php und umschliesse hier das header-tag mit einem weiteren div -> diesem gebe zBsp die id "header_background"
    -> das schliessen des divs am ende des header's nicht vergessen!

    3. Schritt:

    füge an das ende deiner style.css folgende zeilen
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    4. Schritt:

    -schneide vom logo.jpg die obersten 190px ab
    -speichere sie unter dem namen "header_background.jpg" (ohne "" ;) )
    -und lade sie in den ordner images deines themes hoch

    5. Schritt:

    öffne die footer.php und umschliesse hier das footer-tag mit einem weiteren div -> diesem gebe die id "footer_background"
    -> auch hier das schliessen des divs am ende des footers nicht vergessen!

    6. Schritt:

    füge an das ende deiner style.css folgende zeilen
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    7. Schritt:

    -schneide vom logo.jpg die untersten 110px ab
    -speichere sie unter dem namen "footer_background.jpg"
    -und lade sie in den ordner images deines themes hoch

    8. Schritt:

    style.css zeile 2138
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    ändern in
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    wichtig: sollte dein footer höher werden (oder auch niedriger) so passe die mase aus Schritt 7 und 8 einfach dementsprechend an.

    9. Schritt:

    öffne wieder deine header.php und öffne dort, direkt nach dem header aber noch vor dem div"main", ein neues div mit der id "main_background"

    10. Schritt:

    öffne wieder deine footer.php und schliesse dort, direk nach "</div><!-- #main -->" aber noch vor dem footer, wieder das oben geöffnete div.

    11. Schritt:

    füge an das ende deiner style.css folgende zeilen
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    12. Schritt:

    -schneide vom (verbleibenden! ohne oberteil) logo.jpg die oberste 1px hohe reihe ab (über die gesamte breite)
    -speichere sie unter dem namen "main_background.jpg"
    -und lade sie in den ordner images deines themes hoch

    so, fertig - ich hoffe ich habe nichts vergessen!

    lg, pixselig

    ps: die masse kannst du natürlich nach belieben anpassen
     
  11. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    Hey,

    ich sag erstmal 10000000 dank.
    Probiere das jetzt gleich aus und gebe nochmal Feedback :)

    der_pe
     
  12. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    So...ich habe alles nach deinen Anweisungen befolgt aber mir wird der Hintergrund einfach nicht angezeigt.
    Habe eben alles nochmal doppel überprüft... auch auf Anführungszeichen und ähnliches.
    Wurde alles schön zurechtgerückt aber die Bilder fehlen irgendwie.

    Bin ich einfach zu doof? :D

    Der code von Header.php müsste doch so aussehen, oder?

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und das selbe quasi bei footer.php.

    der_pe
     
  13. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    du baust die divs falsch ein.

    so sollte die header.php nach allen änderungen aussehen:
    (die ergänzungen/änderungen habe ich rot markiert)

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  14. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    im footer sollte es so aussehen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  15. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    ups... :D
    Vielen dank für deine schnelle Antwort!
    Ich probier´s direkt aus.
     
  16. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    leider hat sich auch bei meinen verlinkungen ein kleiner fehler eingeschlichen -> ändere bitte das ende deiner style.css von

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    in
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  17. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    das mit den verlinkten bildern habe ich eben auch gemerkt. Aber irgendwie wiederholt sich jetzt der "footer_background" unendlich.
     
  18. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    so und noch eine kleine änderung:

    style.css zeile 84
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    die rote zeile entfernen
     
  19. der_pe

    der_pe Member

    Registriert seit:
    28. Mai 2009
    Beiträge:
    19
    Zustimmungen:
    0
    fantastisch! fast perfekt :)
    Jetzt habe ich nur eine kleine Lücke zwischen main und footer
     
  20. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.298
    Zustimmungen:
    6
    habe es gerade gesehen (schaue live mit ;) )
    habe aber noch nicht herausgefunden welches element daran die schuld trägt - moment...
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden