• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Im Absatz <p> will ein Bild nicht rein

Status
Für weitere Antworten geschlossen.
H

htmlE46

Neues Mitglied
Hallo, ich versuche gerade ein Bild, quasi als Link zu benutzen. Jedoch wird mir das Bild immer wenn ich es folgendermaßen mache nicht angezeigt :(

HTML
Code: 
<p>1. Link <a class="first" href="../Projekt/LINKS/first.html"></a></p>

CSS

Code: 
a.first {background:url('../PICTURES/firstWithoutHover.jpg') 0 0 no-repeat; width:139px; height: 22px;}
a.first:hover{background-image:url('../PICTURES/firstWithHover.jpg');}
 
Werbung:
a.first braucht noch display:block; ...
Du kannst nur Block Elementen eine feste Breite und Höhe zuweisen.
 
Aso, alles klar das funktioniert ;)
Jedoch habe ich nun das Problem, dass die 1. und das Bild nicht in einer Zeile sind, sondern das Bild immer darunter anfängt. Woran liegt das? Sie sind doch beide in einem <p>
 
Werbung:
Das liegt nun wieder am display:block;... Ich sehe aber auch keine notwendigkeit, eine Zahl vor einen Bildlink zu schreiben... Wenn du das unbedingt willst, arbeite mit float, ich allerdings würde die Zahl einfach weglassen (oder, je nach aufbau der restlichen navigation, eine Liste verwenden)
 
Es ist semantisch nicht korrekt, ein Bild, das als Link dient, als background-image einzubinden. In dem Fall ist das Bild doch Content, oder nicht? Also muss es mit dem <img>-Tag eingebunden werden, denn Bilder per CSS sind nur verzierendes, unwichtiges Beiwerk.
Denn wenn Du an die Trennung von Inhalt und Layout denkst: HTML ist für den Inhalt, für das Wichtige, und CSS für Layout und Design. Eine Website muss auch ohne CSS voll funktionstüschtig sein, und das ist sie bei Dir nicht, weil Du einen leeren Link hast. Wenn keine Bilder angezeigt werden, ist der Link auch nicht nutzbar.

Gruß,
-Efchen
 
Wie macht mein ein Button bzw Link denn als Grafik sonst? Ich habe ja alt drin, d.h. wenn das bild nicht angezeigt werden kann geht der link doch trotzdem?
 
Werbung:
htmlE46 schrieb:
Wie macht mein ein Button bzw Link denn als Grafik sonst?
Zum Vergrößern anklicken....
Code: 
<a href="xxx"><img src="xxx" alt="xxx" /></a>

Ich habe ja alt drin, d.h. wenn das bild nicht angezeigt werden kann geht der link doch trotzdem?
Zum Vergrößern anklicken....
Nein hast Du nicht. Du hast ja auch kein <img>, also kannst Du auch kein alt-Attribut angeben. Du bindest es als Hintergrundgrafik ein. Und handelst Dir damit überhaupt erst die Probleme ein, die Du mit korrekter Semantik nicht hättest.

Zumindest ist das so in Deinem Code-Beispiel ganz oben.

Gruß,
-Efchen
 
Nur wie bekomme ich bei deinem Vorschlag folgendes hin:
Wenn ich mit der Maus über dieses Bild gehe, soll es wie ein Hovereffekt sein. Dann soll das vorhandene Bild verschwinden und ein neues hinein geladen werden.
 
hmm

Ja das wär dann mouseover.
schau: alle grafiken die in das Mouse over sollen in den Headbereich muss das:
(geht LEIDER nur mit Javascript)
HTML: 
  <script language="JavaScript">
<!--
button1= new Image();
button1.src = "bild1.png"
button2= new Image();
button2.src = "bild2.png"
</script>
in den body bereich das natürlich da, wo der mouseover sein soll.
HTML: 
<a href="Linkwodiegrafikhinführensoll" onmouseover="namedesmouseovers1.src='grafik, die beim drüberfahrn dort steht.png';" onmouseout="namedesmouseovers2.src='grafik die normal da steht.png';"> <img src="grafik die normal da steht.png" name="namedesmouseovers" border="0" height="13" width="20"> </a>
das problem ist, das du das als bg iner css datei einfügst.
ich glaube in css geht kein mouseover(?).
 
Zuletzt bearbeitet:
Werbung:
htmlE46 schrieb:
Hallo, ich versuche gerade ein Bild, quasi als Link zu benutzen. Jedoch wird mir das Bild immer wenn ich es folgendermaßen mache nicht angezeigt :(
Zum Vergrößern anklicken....

Auf jeden Fall sollte ein Inhalt zwischen <a> und </a> stehen. Suchmaschinen folgen den Links ohne Verweistext nicht.

Es gibt mehrer Methoden das Bild neben dem Verweistext darzustellen.
Soll <p> eine bestimmte Breite haben?
hat <p> noch weiteren Inhalt?
Soll der Text auch ein hover bekommen?
Soll das Bild einen Abstand zum Text haben?
Vielleicht machst du uns mal ein Bildchen wie es aussehen soll.

img+javascript ist selten die beste Lösung.
 
Furien schrieb:
(geht LEIDER nur mit Javascript)
Zum Vergrößern anklicken....
Falsch, den selben Effekt kann man auch mit CSS erreichen. Du erstellst ein Bild mit beiden Zuständen: normal und wenn mit der Maus drübergefahren wird. Beispiel: http://assmaje.as.funpic.de/section/demo.png.

Code: 
<a id="beispiel" href="beispiel.html">...</a>
Code: 
#beispiel {
     width:64px; /* Breite des Bildes */
     height:64px; /* Höhe des Bilder */
     display:block; /* Wichtig! */
     padding:0px;
     border:0px;
     font-size:0px;
     background:url(beispiel.png) 0 0 no-repeat;
}

#beispiel:hover { 
     background-position:-64px 0; /* Verschiebt das Bild um 64px nach rechts */
}
 
Die Aussage bezog sich auf onMouseOver, und das ist JavaScript. Das Austauschen von Bildern im img-Tag geht in der Tat nur mit JavaScript. Die Variante mit dem Hintergrundbild wurde ja schon ganz am Anfang des Thread behandelt.
 
Werbung:
Welche CSS-Eigenschaft ist das denn, die die Image-Quelle des img-Tags definiert?

Das interessiert mich jetzt. Wenn Du es nicht als veröffentlichungswürdig empfindest, schicks mir bitte als PN.
 
Zuletzt bearbeitet von einem Moderator:
Efchen schrieb:
Welche CSS-Eigenschaft ist das denn, die die Image-Quelle des img-Tags definiert?
Zum Vergrößern anklicken....
Die src vom img-Tag kann man mit css nicht verändern.
Mann kann aber das ganze img-Tag beim Hover durch ein anderes img-Tag überlagern.
Wirklich nicht zu empfehlen:
html
Code: 
<p id="imghover">
<span class="text">1 ein Link </span>
<a href="#">
<span>
<img src="bild1jpg" alt="bild1" width="100" height="139" class="norm_img" />
<img src="bild2jpg" alt="" width="100" height="139" class="hover_img" />
</span>
</a>
<br style="clear: both;" />
</p>
css
Code: 
#imghover .text {
float: left;
display: block;
height: 139px;
}

#imghover a  span {
display: block;
float: left;
height: 139px;
position: relative;
}

#imghover .text {
float: left;
display: block;
height: 139px;
}

#imghover a .norm_img {
position: relative;
}

#imghover a .hover_img {
position: absolute;
top: -1000px;
left: -1000px;
}

#imghover a:hover .hover_img {
position: absolute;
top: 0px;
left: 0px;
}

/*Ein Filter für IE6. */
* html #imghover a:hover .norm_img {
filter:XRay();
}

/*hasLayout IE7*/
* +html #imghover a:hover .norm_img {
height: 1%; 
}
So hat man allerdings zwei img-Tags im html.

Eine andere Variante mit nur einem img könnte so aussehen.
html
Code: 
<p id="imgbg">
<a href="#">
<img src="bild1" alt="bild1" width="100" height="139" />
</a>
</p>
css
Code: 
#imgbg  {
width: 100px;
background-image: url(bild2.jpg);
}

#imgbg a {
display: block;
position: relative;
width: 100px;
height: 139px;
}

#imgbg a:hover img {
display: none;
}

/* unausgegorenes für den IE6: */
* html #imgbg {
width: 100px;
height: 139px;
}

* html #imgbg a:hover {
visibility: hidden;
display: none;
width: 100px;
height: 139px;
}

* html #imgbg a  {
width: 100px;
height: 139px;
}

* html #imgbg a:hover {
visibility: hidden;
display: none;
width: 100px;
height: 139px;
}
Das img bekommt im :hover-Zustand display: none;. Das background-image von <p> wird sichtbar.
Der Fix für den IE6 flackert beim hover.
Der IE7 bräuchte für #imgbg vielleicht noch eine passendes height.

Wer unbedingt ein img mit hover im Content haben möchte, könnte an der zweiten Variante rumprobieren.

Ansonsten für andere Browser als IE bis Vers. 7 noch :after { content: url ("bild.jpg");.

Ich verwende für grafische hover background-image.
 
Zuletzt bearbeitet:
Werbung:
Habe es so gemacht wie in deinem 2. Vorschlag, jedoch konnte ich es nicht in einem <p> sondern weil es ja eine Liste ist ein einer <li> machen.
Beim rübergehen kommt zwar das andere Bild zum vorschein, jedoch habe ich noch kleine Fehler.
Das originalBild ist irgendwie ein bisschen nach rechts/unten verrückt und somit sieht man das Background-Image schon bevor man rübergeht. Das original wird jedoch korrekt unsichtbar wenn man rüberscrollt und es ist nur das 2. Bild zu sehen.
Wie bekomme ich das mit der Positionierung denn nun hin?
Und komischwerweise ist ein blauer Rahmen um mein originalBild was ich sonst nie hatte?
 
htmlE46 schrieb:
..
Das originalBild ist irgendwie ein bisschen nach rechts/unten verrückt und somit sieht man das Background-Image schon bevor man rübergeht. Das original wird jedoch korrekt unsichtbar wenn man rüberscrollt und es ist nur das 2. Bild zu sehen.....
Zum Vergrößern anklicken....
Kannst du dein Beispiel mal irgendwo hochladen?
Vielleicht hat <li> ein padding?
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben