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

Bild über und unter ul

Dieses Thema im Forum "Design" wurde erstellt von Kurt, 27. November 2012.

  1. Kurt

    Kurt Well-Known Member

    Registriert seit:
    3. Dezember 2006
    Beiträge:
    331
    Zustimmungen:
    0
    Hallo!

    Ich hab folgendes Problem: Ich möchte ein kleines Termin Blatt machen und das Blatt soll je nach Inhalt größer oder kleiner werden. Also um so mehr Inhalt drin ist um so höher muss es werden. Was ja erst einmal nicht das problem ist. Aber jetzt möchte ich das das Blatt so aussieht wie im Anhang zusehen. Hat jemand ne Ahnung wie ich das in CSS umsetzen kann? Ich hab jetzt mal die oberen Klebestreifen und die unteren abgeschnitten so das ich dem <ul> die Farbe vom Blatt gebe. Jetzt passen die beiden Bilder aber nicht zum <ul> da mein ul ja gerade ist und mein Bild etwas schräg. Wenn ich dem ul jetzt ein Transform gebe. Stimmt es immer noch nicht =/. Wie kann man sowas umsetzen?
    Je nach größe verschieben sich ja die Bilder.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Termine.png tmoben.png tmunten.png
     
    #1 Kurt, 27. November 2012
  2. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    du brauchst 3 Grafiken.... den für oben, den gelben Hintergrund für den Mittelteil und den für unten als Abschluss
    Code für die Terminbox
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und der dazugehörige css-Code

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    im Anhang die angepassten Grafiken, sowie eine Testseite
     

    Anhänge:

    #2 Tutrix, 27. November 2012
  3. Kurt

    Kurt Well-Known Member

    Registriert seit:
    3. Dezember 2006
    Beiträge:
    331
    Zustimmungen:
    0
    Sehr cool danke! Ich wusste nicht das das mit dem wiederholen so geht.
    Nur jetzt hab ich das problem das ichs in mein projekt übernommen habe und zwischen dem ersten Bild und dem <ul> platz ist also nicht direkt dran. Das muss irgendwie vererbt sein aber ich finds nich =/ hab schon *padding margin auf null gesetzt hilft aber nicht.
    Aufjedenfall Danke!
     
    #3 Kurt, 27. November 2012
  4. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    gibts einen Link zur Seite?

    dann kann man sich das ansehen
     
    #4 Tutrix, 27. November 2012
  5. Kurt

    Kurt Well-Known Member

    Registriert seit:
    3. Dezember 2006
    Beiträge:
    331
    Zustimmungen:
    0
    #5 Kurt, 27. November 2012
  6. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    hmm... finde gerade auch nicht woran das liegt

    eigentlich sollte
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    das Problem beheben, hilft aber nichts


    kannst mal bei .termine ein

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    hinzufügen, dann ist der Spalt weg
     
    #6 Tutrix, 27. November 2012
  7. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Gib dem ersten img
    <img src="tmoben.png">

    eine class und schreib dann

    .class {display:block;}

    dann sollte der auch margin: 0 übernehmen.

    Am Besten vergibst die auch fürs untere Bild die gleiche Class, somit greift dann da auch das margin: 0.
     
    #7 SirEctor, 27. November 2012
  8. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    oder nimm das Bild raus und füge es bei #terminbox als background ein

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #8 Tutrix, 27. November 2012
  9. Kurt

    Kurt Well-Known Member

    Registriert seit:
    3. Dezember 2006
    Beiträge:
    331
    Zustimmungen:
    0
    Jup, hab ich gemacht. Danke das funktioniert! Kann mir noch jemand sagen warum Chrome meine Columns nicht bis unten machen will? 100%? Bei dem einen Container macht er es und bei den restlichen nicht.
     
    #9 Kurt, 27. November 2012
  10. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Das wird etwas schwierig. Es gilt auf jeden Fall folgendes zu beachten:
    ein Element kann immer nur so groß sein, wie das Elternelement.

    Du musst also von oben nach unten vererben bzw. anpassen. So aus dem Stehgreif kann ich Dir jetzt leider nicht den passenden Code schreiben.
     
    #10 SirEctor, 27. November 2012
  11. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    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!
    danach wird 100% übernommen, also bei sidebar, content, rightbar, page oder wo immer du 100% haben willst

    der fehlende DOCTYPE war auch der Grund für den Abstand beim Bild ;)
     
    #11 Tutrix, 27. November 2012
  12. Kurt

    Kurt Well-Known Member

    Registriert seit:
    3. Dezember 2006
    Beiträge:
    331
    Zustimmungen:
    0
    DANKE! jetzt funktioniert es in allen gängigen Browsern =) Danke! DANKE vielmals.
    Jetzt kanns weiter gehen mit der schönen Website!
     
    #12 Kurt, 27. November 2012
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  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.
    Akzeptieren Weitere Informationen...
    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.
    Akzeptieren Weitere Informationen...
    Information ausblenden