Bild über und unter ul

Kurt

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

<div id="termine">
         <img src="tmoben.png">
               <ul>
                <li>Fr. 30.11.2012;</li>
                <li>Sa. 24.11.2012;</li>
                  <li>Sa. 17.11.2012;</li>
                  <li>Fr. 16.11.2012;</li>
                  <li>So. 11.11.2012;</li>
               </ul>
            <img src="tmunten.png">
        </div>
CSS:
#termine img{border:none;
    margin-left:-20px;}


#termine ul{width:246px;
         margin-top:-3px;
    -webkit-transform: rotate(-0.2deg);
    -moz-transform: rotate(-0.2deg);
            background:#f9e8a3;
    margin-left:20px;
           }

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

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

<div id="terminbox">
<img src="tmoben.png" width="333" height="98">
<div class="termine">         
               <ul>
                <li>Fr. 30.11.2012;</li>
                <li>Sa. 24.11.2012;</li>
                <li>Sa. 17.11.2012;</li>
                <li>Fr. 16.11.2012;</li>
                <li>So. 11.11.2012;</li>           
               </ul>           
</div>
<img src="tmunten.png" width="333" height="95">
</div>

Alles anzeigen

und der dazugehörige css-Code

Code

#terminbox {
    width: 333px;
    height: auto;
}
.termine {
    background: url("tmbg.png") repeat-y scroll center top transparent;
    padding-left: 80px;
}

im Anhang die angepassten Grafiken, sowie eine Testseite

Kurt

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!

Tutrix

gibts einen Link zur Seite?

dann kann man sich das ansehen

Kurt

Ja http://tinyurl.com/bsto5bh
Es ist momentan erst mal nur das Layout.

Tutrix

hmm... finde gerade auch nicht woran das liegt

eigentlich sollte

Code

* {
margin: 0;
padding:0;
}

das Problem beheben, hilft aber nichts

kannst mal bei .termine ein

Code

margin-top: -3px;

hinzufügen, dann ist der Spalt weg

SirEctor

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.

Tutrix

oder nimm das Bild raus und füge es bei #terminbox als background ein

Code

#terminbox {
    background: url("tmoben.png") no-repeat scroll center top transparent;
    height: auto;
    padding-top: 98px;
    width: 333px;
}

Kurt

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.

SirEctor

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.

Tutrix

HTML

<!DOCTYPE HTML>
<html>

ändern in

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">

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 ;)

Kurt

DANKE! jetzt funktioniert es in allen gängigen Browsern =) Danke! DANKE vielmals.
Jetzt kanns weiter gehen mit der schönen Website!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bild über und unter ul

Jetzt mitmachen!