@ROWI: deine Frage im Chat
CirTap
- css
0 Thomas J.S.0 CirTap
0 Rouven Nagel0 CirTap
Moin rowi,
hättest du noch ein paar Minuten ausgehalten ... :-)
Der relevante Block (Umfrage) muss so aussehen:
...
<th class="menue"><a href="http://de.yahoo.com/">Impressum</a></th></tr>
</tbody></table>
<!-- UMFRAGE-BOX START -->
<div style="background-image:url(menue_02.jpg); background-repeat:repeat-y; width:175px; padding:0px;">
<img src="menue_01.jpg" width="175" height="16" alt="" />
<div style="padding:5px 10px;">
Hier soll später eine Umfrage rein ! Dies ist nur ein Test-Text welcher später durch
eine beliebige Umfrage ersetzt werden kann. Um einen genauen Eindruck zu vermitteln
zu können, hier ein längerer Text, da sich die Boxen dynamisch der länge hin anpassen.
</div><img src="menue_04.jpg" width="175" height="5" alt="" /></div>
<!-- ENDE UMFRAGE-BOX -->
<p>Wilkommen auf ....</p>
...
Getestet in Opera 6, 7, 8, MSIE 6, Firefox 1.07 unter WinXP, MSIE 5 Win98 -- passt.
Wie schon im Chat bemerkt, steht dein ganzer Inhalt fast ausschliesslich im BODY Element anstatt "ordentlich" in <P>s oder <DIV>s, weshalb dein CSS auch nicht (richtig) greift und somit irgendwelche Browserinternen Voreinstellungen für BODY aktiv werden.
Das äussere DIV kapselt beide IMG und den Umfragetext, der selbst in einem DIV steht zwecks flexibler Abstandhalterei.
WICHTIG: zwischen dem zweiten IMG ("menue_04.jpg) und dem äusseren, schliessenden DIV KEIN Leerzeichen oder Zeilenumbruch sonst hast du wieder das Loch im IE.
Was Tidy angeht: die Datei war zwar HTML-syntaktisch ok (abzgl. einiger fehlender Attribute, z.B. bei den Bildern), aber "semantisch" daneben, ergo: das CSS war praktisch für die Füße.
Ich tät dem Ding natürlich später eine id oder Klasse verpassen und es in die CSS-Datei nehmen. ID wenn es nur eine Box gibt, eine CSS-Klasse wenn's mehrere solcher Boxen geben sollte:
div.umfrage-box {
background-image:url(menue_02.jpg);
background-repeat:repeat-y;
width:175px;
padding:0px;
}
div.umfrage-box div {
margin:0px;
padding:5px 10px;
font: normal 10px/normal Arial,Helvetica,sans-serif;
color:rgb(255,255,255);
}
dann:
<!-- UMFRAGE-BOX START -->
<div class="umfrage-box"><img src="menue_01.jpg" width="175" height="16" alt="" />
<div>
....
Viel Spaß,
CirTap
Hallo CirTap,
Ich habe jetzt meinen Augen nicht getraut, dich gibts ja noch!? ;-)
Du könntest/solltest öfter mal hier sein!
Grüße
Thomas
Hallo Tom,
Ich habe jetzt meinen Augen nicht getraut, dich gibts ja noch!? ;-)
jupp, lange nicht gesehen, -lesen, -hört.
Hoffe, es ist noch alles frisch in AT?
Ruf doch mal an (s. URL), würd mich echt freuen. Hab leider keine Telnr. (mehr) von dir.
Du könntest/solltest öfter mal hier sein!
Danke für "Einladung" :)
Ein paar mal im Jahr guck ich ja auch vorbei und geb meinen Sermon ab, aber ich hab' schon lange andere "Spielwiesen" auf denen ich mich tummle.
Viel Spaß,
CirTap
Hallo CirTap,
Ich habe jetzt meinen Augen nicht getraut, dich gibts ja noch!? ;-)
jupp, lange nicht gesehen, -lesen, -hört.
Hoffe, es ist noch alles frisch in AT?
Ruf doch mal an (s. URL), würd mich echt freuen. Hab leider keine Telnr. (mehr) von dir.
Gute Idee, mal sehen wann du am Wochende aufstehst ;-)
Du könntest/solltest öfter mal hier sein!
Danke für "Einladung" :)
Ein paar mal im Jahr guck ich ja auch vorbei und geb meinen Sermon ab, aber ich hab' schon lange andere "Spielwiesen" auf denen ich mich tummle.
Tja ... hoffe trotzdem, dass du hier ab und zu noch vorbeikommst :)
Grüße
Thomas
erstmal nen ganz dickes danke für deine mühe :-)
funktioniert auf problemlos *froi
hab allerdings gleich noch ne frage *g* will das ganze schliesslich nicht einfach nur übernehmen^^ sondern auch verstehen :-)
also lag das problem mehr oder weniger in meiner "logik"...du hast jetzt ein "div" angelegt - mit dem hintergrund "menue_02"....hast das bild (menue_01) eingefügt (stellt sich mir die frage - warum greifft der background-befehl von menue_02 nicht auch auf den "img-befehl" zu?)
als nächstes definierst du ein weiteres "div", welches den textabstand (für den inhalt!) definiert....nach inhaltsende wird dieser "div" wieder geschlossen - zuletzt folgt die schlusszeile bzw. der "boden" per "img"....
seh ich o.g. richtig *g* ???
Hi,
erstmal nen ganz dickes danke für deine mühe :-)
gern geschehen, war nicht soo viel Mühe. Das Schreiben des Beitrags hat länger gedauert <g>
Bin froh, dass du das hier noch gefunden hast, bei dem Tempo wie hier manchmal die Beiträge verschwinden ...
funktioniert auch problemlos *froi
na "Da haben wir aber nochmal Glück gehabt" ;)
hab allerdings gleich noch ne frage *g* will das ganze schliesslich nicht einfach nur übernehmen^^ sondern auch verstehen :-)
löblich!
... (stellt sich mir die frage - warum greifft der background-befehl von menue_02 nicht auch auf den "img-befehl" zu?)
wie denn? Meinst du wegen "Vererbung"?
Nope.
Nur weniges vererbt sich CSS-technisch vom Elternelement auf dessen Kiddies. Guckstu in Self nach, was wann und warum welches nicht :-)
Ein IMG hat AFAIK offiziell keine background-image Eigenschaft, es ist ja selbst eins. background-color geht (immer?), aber noch ein Bild hab ich nie versucht. Falls du das gemeint hast.
Wenn das IMG aber Transparenz hat (GIF, PNG) würde die Hintergrundfarbe des Eltern-Elements (1. DIVs) "natürlich" durchlurken, sich aber nicht aufs IMG "vererben".
Ist sowieso alles schwarz, von daher auch egal :)
Man muß "physische" IMG und CSS-Farben/-Hintergründe sowieso aufeinander abstimmen.
seh ich o.g. richtig *g* ???
jupp.
Das 1. DIV um
a) die farbigen Linien li/re per background-image "endlos" zu machen. Border funzt hier optisch nicht.
b) IMG-oben + Text + IMG-unten beieinander zu halten, um sie als "Einheit" per CSS zu formatieren.
Das 2. DIV
ist eigentlich optional, sorgt aber ohne Tricksereien und <br /> dafür, dass Text und Bilder in neuen "Zeilen" beginnen. Ein DIV weil's im Gegensatz zu P in den handelsüblichen Browservorgaben keine störenden Werte für Absatz, margin, padding hat.
Tipppp: Wenn irgendwas verrutscht hilft meist ein DIV drumrum :-)
Der einzige der Stress macht ist MSIE, wenn NACH dem unteren Bild ein Leerzeichen oder eine Leerzeile folgt. Dann fügt er willenlos einen zusätzlichen Abstand ein, den man nicht wegbekommt.
ACHTUNG! Du hast keinen DOCTYPE angegeben, also den "QuirksMode" für alle aktuellen Browser (indirekt) aktiviert. Praktische ALLE reagieren anderes auf CSS, wenndu oben einen DOCTYPE einsetzt und nochmals anderes wenn es ein HTML 4.01 oder XHTML Transitinal/Strict ist.
Ebenso kann bei XHTML ein freundliches
<?xml version="1.0"?>
darüber für interessanten "Zeitvertreib" sorgen: beid er Suche nach "CSS-Fehlern" ...
Dessen solltest du dir immer bewusst sein.
Vielleicht guck ich die Tage nochmal rein, hier oder im Chat.
Ende des "Gastspiels" <tomzuwink> :)
Viel Spaß,
CirTap