nicht angemeldet
Text mittig neben Bild
Hallo,
ich habe ein Bild der Höhe 60px und möchte rechts daneben eine Textzeile setzen, die genau mittig ist zu dem Bild.
Dem Bild habe ich verpasst "float:left;".
Damit kommt der Text auch rechts neben dem Bild, allerdings am oberen Rand.
Ich habe dann den Text in ein span gesetzt mit vertical-align:middle;
was aber leider nichts verändert hat.
Wie muss ich da vorgehen?
Vielen Dank
Benni
-
Hallo,
ich habe ein Bild der Höhe 60px und möchte rechts daneben eine Textzeile setzen, die genau mittig ist zu dem Bild.
Dem Bild habe ich verpasst "float:left;".
Damit kommt der Text auch rechts neben dem Bild, allerdings am oberen Rand.
Ich habe dann den Text in ein span gesetzt mit vertical-align:middle;
was aber leider nichts verändert hat.
Wie muss ich da vorgehen?zum Beispiel
<style type="text/css">
<!--
.bild_mit_legende p,
.bild_mit_legende img
{zoom:1; display:inline; display:inline-block; vertical-align:middle; border:1px solid red; width:40%;}
#msie7 .bild_mit_legende p,
#msie7 .bild_mit_legende img
{zoom:1; display:inline; }-->
</style></head>
<body><div class="bild_mit_legende">
<img src="x" alt="not" width="200" height="200"><p>Legende</p>
</div>mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
Danke für das Beispiel!in der vorliegenden Form hat es auch bei mir funktioniert.
Ich habe aber dazu zwei Fragen.
1. Was bedeutet:
#msie7 .bild_mit_legende p, #msie7 .bild_mit_legende img
{zoom:1; display:inline; }
2.Ich habe jetzt folgenden Text angegeben:
<h3>Überschrift</h3><p>Text</p>
Da wird der Text unter das Bild gestellt. Kannst Du mir da noch einen Tipp geben?
DankeBenni
-
in der vorliegenden Form hat es auch bei mir funktioniert.
Ich habe aber dazu zwei Fragen.- Was bedeutet:
#msie7 .bild_mit_legende p, #msie7 .bild_mit_legende img
{zoom:1; display:inline; }
Das ist eine Korrektur für MSIE.
Mein Quellcode verwendet Conditional Comments für msie
<body>
<!--[if IE 7]><div id="msie"><![endif]--><!--[if IE 7]></div><![endif]--></body>
MSIE7 sieht also eine eigene ID.
Du kannst natürlich eine andere Methode verwenden, um den MSIE zu hacken.
2.Ich habe jetzt folgenden Text angegeben:
<h3>Überschrift</h3><p>Text</p>
Da wird der Text unter das Bild gestellt. Kannst Du mir da noch einen Tipp geben?Ach bitte, das lernst du aber selber.
Stichwort Nachfahren Selektoren
http://de.selfhtml.org/css/formate/kaskade.htmmfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
Ach bitte, das lernst du aber selber.
würde ich ja gerne, aber in dem zitierten Dokument
Stichwort Nachfahren Selektoren
http://de.selfhtml.org/css/formate/kaskade.htmfinde ich nichts über Nachfahren.
Und falls das etwas mit Vererbung zu tun hat, dann muss ich passen, denn objektorientiertes Programmieren habe ich noch nicht gelernt.
Gruß
Benni-
Ach bitte, das lernst du aber selber.
würde ich ja gerne, aber in dem zitierten DokumentStichwort Nachfahren Selektoren
http://de.selfhtml.org/css/formate/kaskade.htmfinde ich nichts über Nachfahren.
Und falls das etwas mit Vererbung zu tun hat, dann muss ich passen, denn objektorientiertes Programmieren habe ich noch nicht gelernt.CSS ist nicht objektorientiert. sondern merkmalsorientiert
Aufgabe
<a><b></b><a>Nenne mir den Selektor der b matcht, wenn es in a vorkommt.
<a class="somename"><b></b><a>
Nenne mir den Selektor der b matcht, wenn es in einem Element mit Klasse "somename" vorkommt.
<a id="someid"><b></b><a>
Nenne mir den Selektor der b matcht, wenn es in einem Element mit ID "someid" vorkommt.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo,
Du kannst natürlich eine andere Methode verwenden, um den MSIE zu hacken.
Muss man in Deinem Beispiel MSIE hacken?
Aufgabe
<a><b></b><a>Nenne mir den Selektor der b matcht, wenn es in a vorkommt.
a b
<a class="somename"><b></b><a>
Nenne mir den Selektor der b matcht, wenn es in einem Element mit Klasse "somename" vorkommt.
a.somename b
<a id="someid"><b></b><a>
Nenne mir den Selektor der b matcht, wenn es in einem Element mit ID "someid" vorkommt.
a#someid b
Korrekt?
Messerscharf habe ich geschlossen
.bild_mit_legende h3, <* <------ *>
.bild_mit_legende p,
.bild_mit_legende imgDer Text im p-tag verschwindet trotzdem unter das Bild!
Benni
-
Messerscharf habe ich geschlossen
.bild_mit_legende h3, <* <------ *>
.bild_mit_legende p,
.bild_mit_legende imgDer Text im p-tag verschwindet trotzdem unter das Bild!
klar weil 3 mal 40% > 100% ist.
Wende deine eigene Arithmetik an.
Und rechne bitte mit whitespace zwischen den inline-block Elementen.Aber vielleicht willst du ja gar nicht:
<div class=bild_mit_legende>
<img>
<h3 />
<p />
</div>sondern:
<div class=bild_mit_legende>
<img>
<div class=legend>
<h3 />
<p />
</div>
</div>mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
Hi,
Und rechne bitte mit whitespace zwischen den inline-block Elementen.
das sind so Dinge, die ich noch nicht weiß.
Machmal ist kein Abstand zwischen Elementen, manchmal doch.
Und wenn da Whitespaces vorhanden sind, die kann man doch sicher nicht in Prozent umrechnen?
inline-block(30%) + whitespace + inline-block(30%) + whitespace +
inline-block(30%) = 100%Gruß
Benni
der Nervige (pardon)
-
-
Nenne mir den Selektor der b matcht, wenn es in einem Element mit Klasse "somename" vorkommt.
a.somename b
Fast richtig.
Richtig wäre
*.somename b , denn ich habe nicht gesagt, welcher Elementtyp vorliegen muss.
*.somename b
und
.somename b
sind gleichbedeutend<a id="someid"><b></b><a>
Nenne mir den Selektor der b matcht, wenn es in einem Element mit ID "someid" vorkommt.
a#someid b
Da eine ID pro dokument einmalig sein muss, ist das abhängig davion, ob das a Element vorkommt mit dieser ID.
#someid b
würde genügenAllerdings kann es vorkommen, dass
Seite A
a#someid b
und Seite B
b#someid b
verwendet.Auch hat
a#someid b
etwas höhere Gewichtung als
#someid b--
<o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
Muss man in Deinem Beispiel MSIE hacken?
MSIE 6 und 7 verstehen kein inline-block, sind aber in der Lage mit display:inline, sofern man zuvor hasLayout triggert, was zum beispiel mit zoom:1 geschehen kann
Profis wissen mehr als ich.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hi,
MSIE 6 und 7 verstehen kein inline-block, sind aber in der Lage mit display:inline, sofern man zuvor hasLayout triggert, was zum beispiel mit zoom:1 geschehen kann
Profis wissen mehr als ich.
Viel mehr wahrscheinlich nicht - oder?
(Soll Kompliment sein für Dein Wissen, damit du mir weiterhin hilfst - schleim)
Du hast in Deinem Beispiel
display: inline; display: inline-block;
Sind da wirklich beide nötig?
Ich habe mal das eine, und mal das andere weggelassen, ohne merkliche Änderung.
Gruß
Benni-
Du hast in Deinem Beispiel
display: inline; display: inline-block;
Sind da wirklich beide nötig?Nein, da ist etwas überflüssig (Schleim)
<style type="text/css">
<!--
.bild_mit_legende p,
.bild_mit_legende img
{display:inline-block; vertical-align:middle; border:1px solid red; width:40%;}
#msie7 .bild_mit_legende p,
#msie7 .bild_mit_legende img
{zoom:1; display:inline; }Opera hat jedoch seine Pseudo MSIE Vergangenheit noch nicht ganz abgeschüttelt, und ich habe ihn in einer aktuellen version dabei erwischt, dass ich vor einem inline-block ein inline notieren musste.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hi,
Fragen über Fragen,
wenn es Dich nervt, schreib es einfach, dann gebe ich auf!Im Beispiel ist der Hack:
#msie7 .bild_mit_legende p,
#msie7 .bild_mit_legende img
{zoom:1; display:inline; }Weiter oben hast Du geschrieben:
Mein Quellcode verwendet Conditional Comments für msie
<body>
<!--[if IE 7]><div id="msie"><![endif]--><!--[if IE 7]></div><![endif]-->
</body>
MSIE7 sieht also eine eigene ID.Eine derartige Code-Sequenz ist aber in Deinem Beispiel nicht enthalten, also ist doch auch das #msie7 ......
in diesem Beispiel überflüssig oder sehe ich das wieder falsch?
Gruß
Benni-
Eine derartige Code-Sequenz ist aber in Deinem Beispiel nicht enthalten, also ist doch auch das #msie7 ......
in diesem Beispiel überflüssig oder sehe ich das wieder falsch?Du darfst es richtiger sehen.
Debugging der ID ist deine Sache.mfg Beat
--
><o(((°> ><o(((°> <°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo beat,
Debugging der ID ist deine Sache.
Damit ich es richtig verstehe:
Die Statements <!--[if IE 7]><div id="msie"><![endif]--> ....
verwendest Du um den MSIE zu debuggen (also Fehler suchen)
oder heißt debuggen hier den IE-Fehler umgehen (also = hack)?Ich habe jetzt deinen Vorschlag
<div class=bild_mit_legende>
<img>
<div class=legend>
<h3 />
<p />
</div>
</div>umgesetzt.
Es funktioniert schön im Firefox und IE8 und Opera.
Es funktioniert nicht in IE7 und älter (weil da wohl dieser ominöse Hack fehlt).
Seltsamerweise funktioniert es aber auch nicht in Netscape 7.1, war der auch ein Klon vom IE?
Schönen Gruß
Benni-
Hallo beat,
Debugging der ID ist deine Sache.
Damit ich es richtig verstehe:
Die Statements <!--[if IE 7]><div id="msie"><![endif]--> ....
verwendest Du um den MSIE zu debuggen (also Fehler suchen)
oder heißt debuggen hier den IE-Fehler umgehen (also = hack)?Nein. Ich setze ein Element, das nur der MSIE 7 sieht.
Im CSS kann ich dan schreiben
#msie a b c {}und das geht keinen anderen Browser etwas an.
Seltsamerweise funktioniert es aber auch nicht in Netscape 7.1, war der auch ein Klon vom IE?
Keine Ahnung ob der inline-block versteht.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Yerf!
» Seltsamerweise funktioniert es aber auch nicht in Netscape 7.1, war der auch ein Klon vom IE?
Keine Ahnung ob der inline-block versteht.
Nein. Der basiert ja auf einer älteren Version der Gecko-Engine und erst seit der Version vom Firefox 3 versteht die inline-block.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Hallo beat,
Nein. Ich setze ein Element, das nur der MSIE 7 sieht.
Im CSS kann ich dan schreiben
#msie a b c {}Wenn ich Dein Original-Beispiel
<style type="text/css"> <!-- .bild_mit_legende p, .bild_mit_legende img {zoom:1; display:inline; display:inline-block; vertical-align:middle; border:1px solid red; width:40%;} #msie7 .bild_mit_legende p, #msie7 .bild_mit_legende img {zoom:1; display:inline; } --> </style> </head> <body> <div class="bild_mit_legende"> <img src="x" alt="not" width="200" height="200"><p>Legende</p> </div>hernehme, läuft es nicht unter IE7.
Wenn ich display:inline-block entferne, läuft es unter IE7.
Dies aber auch, wenn ich dann die #msie7-Zeilen entferne.
Daraus schließe ich, dass bei mir die #msie7-Zeilen nicht wirksam sind.
Hast Du hierfür eine Erklärung?
In der Hoffnung, dass dieser Beitrag Dir noch auffällt
Gruß
Benni-
Dies aber auch, wenn ich dann die #msie7-Zeilen entferne.
Daraus schließe ich, dass bei mir die #msie7-Zeilen nicht wirksam sind.
Hast Du hierfür eine Erklärung?Klar. Siehst du im HTML eine id msie7?
Wenn nein, dann bastle sie hinein, mittels Conditional Comment.mfg Beat
-
Klar. Siehst du im HTML eine id msie7?
Wenn nein, dann bastle sie hinein, mittels Conditional Comment.Da habe ich Deine Aussage
Nein. Ich setze ein Element, das nur der MSIE 7 sieht. Im CSS kann ich dan schreiben #msie a b c {} und das geht keinen anderen Browser etwas an.aber gründlich missverstanden.
Ich habe in meinem jugendlichen Leichtsinn angenommen,
dass#msie7 .bild_mit_legende p, #msie7 .bild_mit_legende img {zoom:1; display:inline; }für den IE7 und nur für den die davorliegenden Angaben ersetzt bzw. ergänzt und diese dann für das nachfolgende HTML gültig sind.
Wenn du aber jetzt schreibst, da müssen Conditional Comments rein,
so heißt das doch, dass dort auch andere HTML-Texte stehen müssen, aber welche?Gruß
Benni
aus dem Tal der Ahnungslosen auf dem Gebiet von Css-
Klar. Siehst du im HTML eine id msie7?
Wenn nein, dann bastle sie hinein, mittels Conditional Comment.Da habe ich Deine Aussage
Nein. Ich setze ein Element, das nur der MSIE 7 sieht.
Im CSS kann ich dan schreiben
#msie a b c {}und das geht keinen anderen Browser etwas an.
> aber gründlich missverstanden. > Ich habe in meinem jugendlichen Leichtsinn angenommen, > dass > ~~~html > #msie7 .bild_mit_legende p, > #msie7 .bild_mit_legende img > {zoom:1; display:inline; } >für den IE7 und nur für den die davorliegenden Angaben ersetzt bzw. ergänzt und diese dann für das nachfolgende HTML gültig sind.
Ja aber nur dann, wenn im HTML auch der MSIE und nur der MSIE der mittels CC anvisiert ist, eine entsprechende ID "sieht".
Andere Brauwser kennen CC nicht, da sie nur HTML Kommentare sehen.Wenn du aber jetzt schreibst, da müssen Conditional Comments rein,
so heißt das doch, dass dort auch andere HTML-Texte stehen müssen, aber welche?https://forum.selfhtml.org/?t=186683&m=1240051
Beachte, dass ich dort id=msie schreibe im CSS #msie7 schreibe.
Das willst du bitte mit deinem jugendlichen Scharfsinn korrigieren.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
»» Wenn du aber jetzt schreibst, da müssen Conditional Comments rein,
»» so heißt das doch, dass dort auch andere HTML-Texte stehen müssen, aber welche?https://forum.selfhtml.org/?t=186683&m=1240051
Das willst du bitte mit deinem jugendlichen Scharfsinn korrigieren.
Du wolltest sagen Leichtsinn, der Scharfsinn - zumindest für die Logik in CSS - geht mir noch ab.
Der in Deinem Beispiel leere if-Block soll also das komplette HTML im body umklammern - da muss man erst darauf kommen!
So nach dem Motto:
if internet explorer tue Aktion 1
else vergiss das umklammernde if und tue auch Aktion 1.Aber es scheint so hinzuhauen - im IE7 und IE8.
Aber da habe ich noch ein "lt IE 8" entdeckt.
Und jetzt funktioniert es auch im IE6!
Also vielen Dank für Deine Geduld - und bleibe mir "gewogen".Benni
-
Kann man eigentlich den Netscape wegen geringer Verbreitung vernachlässigen?
Dort klappt es nämlich nicht.
Gruß
Benni-
Yerf!
Kann man eigentlich den Netscape wegen geringer Verbreitung vernachlässigen?
Vermutlich. Der Browser wird auch nicht mehr weiter supported.
Dort klappt es nämlich nicht.
Evtl. könnte man mit einem display:-moz-inline-stack (oder -moz-inline-box) nachhelfen, das *vor* dem display:inline-block notiert wird. Das würde auch den Nutzern vom FF 2 helfen.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi,
Evtl. könnte man mit einem display:-moz-inline-stack (oder -moz-inline-box) nachhelfen, das *vor* dem display:inline-block notiert wird.
Wenn der Text einzeilig ist, klappt es mit -stack und -block.
Bei mehrzeiligem Text wird dieser allerdings übereinander in einer Zeile angezeigt.
Aber wenn der Browser ohnehin am Sterben ist, lohnt es sich nicht, da noch viel zu investieren (von Eurer und meiner Seite).
Danke
Benni
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Was bedeutet:
-
-
-
Hallo,
ich habe jetzt dank Eurer Hilfe das Beispiel fertig, erweitert um den Hover-Effekt.
Es funktioniert in den gängigen Browsern auch IE7, aber nicht in IE6 und älter. Dort funktioniert weder der link noch das Hover.
Meine Fragen:
1. Damit es in IE7 funktionierte, musste ich die Zeilen a.myIlinks .....
nochmals unter #msie .... angeben.
Warum erkennt der IE nicht die anderen CSS-Angaben?
2. Was für ein Hack ist jetzt noch nötig für IE6 und älter?Hier das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> <!-- a.myIlinks .invers { display: none; } a.myIlinks:hover .normal { display: none; } a.myIlinks:hover .invers { display: block; } .myIlinks img {display:inline-block; vertical-align:middle; width:48px; height:40px; border:none;} .myIlinks span {display:inline-block; vertical-align:middle;} .myIlinks .Legende h1 {margin:0;} .myIlinks .Legende p {margin-bottom:0;} #msie .myIlinks img {zoom:1; display:inline; vertical-align:middle; width:48px;height:40px; border:none;} #msie .myIlinks span {zoom:1; display:inline; vertical-align:middle;} #msie a.myIlinks .invers { display: none; } #msie a.myIlinks:hover .normal { display: none; } #msie a.myIlinks:hover .invers { display: block; } --> </style> </head> <body> <!--[if lt IE 8]><div id="msie"><![endif]--> <p> <a class="myIlinks" href="http://www.example.com"> <span class="normal"><img src="img1.gif" alt ="">Normalansicht</span> <span class="invers"><img src="img2.gif" alt ="">Hoveransicht</span> </a> </p> <!--[if lt IE 8]></div><![endif]--> </body> </html>-
Ergänzung:
Die Zeilen.myIlinks .Legende h1 {margin:0;} .myIlinks .Legende p {margin-bottom:0;}sind Überbleibsel (ohne Wirkung) und gehören natürlich raus.
-