Markup (HTML, XML, etc.) und CSS - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

In diesem Forum sollen begleitend zu unserem CSS Portal und HTML-Bereich konkrete Fragen zu HTML und CSS diskutiert werden. Bitte immer die Suchfunktion nutzen bevor du eine Frage stellst.


Benutzer gelöscht
Beiträge: 15

PN schreiben
Profil ansehen
User ist offline

Bilder nebeneinander im Internet Explorer mit CSS

Link zur Antwort auf "Bilder nebeneinander im Internet Explorer mit CSS" von Benutzer gelöscht Benutzer gelöscht, am Donnerstag den 17.04.2008 um 01:13:27

Hallo Leute,

ich komme schon seit ein paar Stunden nicht mehr weiter.

Ich möchte mit CSS gern drei Bilder horizontal nebeneinander, ohne Abstand (!), auf meiner Homepage anzeigen lassen. Im Opera und Mozilla (aktuelle Versionen) funktioniert es einwandfrei, nur nicht im Internet Explorer 7. Mit google fand ich auch heraus, dass man das Problem durch hinzufügen von "display: block;" beheben kann. Leider hab ich damit immernoch keinen Erfolg. Vielleicht kann mir einer von euch helfen? Wäre super, ich komme hier nämlich überhaupt nicht weiter.

Beispiel Screenshot im Internet Explorer:

http://jelsch.com/sonstiges/Internet%20Explorer.jpg

Es geht hierbei um die sich links, rosa eingerahmt, befindlichen kleinen Bilder. Wie bekommt man im Internet Explorer den kleinen Abstand zwischen den Bildern weg?

Hier etwas Code:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <img class="img150" src="pictures/menuLine.jpg" alt="" height="29" width="78">
      <img class="img150" src="pictures/menuHome.jpg" alt="" height="29" width="84">
      <img src="pictures/menuLineRight.jpg" alt="" height="29" width="65">
    
    <img src="pictures/menuLineMiddle.jpg" alt="" height="15" width="227">
    
    <img class="img150" src="pictures/menuLine.jpg" alt="" height="29" width="78">
      <img src="pictures/menuNews.jpg" alt="" height="29" width="84">
    
    <img src="pictures/menuLineMiddle.jpg" alt="" height="15" width="227">  
    
    <img class="img150" src="pictures/menuLine.jpg" alt="" height="29" width="78">
      <img src="pictures/menuKuenstler.jpg" alt="" height="29" width="84">

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.img150 {
  float: left;
  /*display: block;*/
  border: 1px solid #FF00FF;
}

img {
  border: 0px;
  margin: 0px;
  display:block;
} 

Falls ihr mehr braucht, findet ihr hier den kompletten Quellcode:

http://sinnersandsaints.eu/showdown/home.php

Benutzer: jamjam

Passwort: leckerli

Gruß

Mustangore

Insgesamt 1 mal bearbeitet, zuletzt am 17.04.2008 um 01:15:04

podthepunk
Beiträge: 76

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Bilder nebeneinander im Internet Explorer mit CSS" von podthepunk podthepunk, am Donnerstag den 17.04.2008 um 01:29:32

Willkommen im Forum,

ich würde dir empfehlen, das Menü mit einer Liste zu realisieren und die Grafiken als Hintergrund über css zu definieren. Das hat den Vorteil, das die Linktexte auch von Suchmaschienen gelesen werden können.

Werde gleich mal was passendes schreiben, wenn du möchtest.

So dumm es klingt, aber das Problem mit dem Abstand im IE, könnte daran liegen, das die Bilder im Quelltext nicht direkt hintereinander stehen (IE fügt dann eine Leerstelle ein).
Definiere die Bilder mal in einer Zeile ohne Leerstelle o.Ä. dazwischen.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<img class="img150" src="pictures/menuLine.jpg" alt="" height="29"
width="78">
<img class="img150" src="pictures/menuHome.jpg" alt="" height="29"
width="84"><img src="pictures/menuLineRight.jpg" alt=""
height="29" width="65"><img src="pictures/menuLineMiddle.jpg"
alt="" height="15" width="227">
<img class="img150" src="pictures/menuLine.jpg" alt="" height="29"
width="78"><img src="pictures/menuNews.jpg" alt="" height="29"
width="84"><img src="pictures/menuLineMiddle.jpg" alt=""
height="15" width="227"> <img class="img150"
src="pictures/menuLine.jpg" alt="" height="29" width="78"><img
src="pictures/menuKuenstler.jpg" alt="" height="29" width="84">

mfg
pod

EDIT:

Ich bin mir nicht sicher, ob es 100%ig passt, aber hiermit ist schonmal ein Anfang getan:

 
HTML
1
2
3
4
5
6
7
8
<ul id="navi">
    <li><a class="home" href="">Home</a></li>
    <li><a clasS="news" href="">News</a></li>
    <li><a clasS="kuns" href="">K&uuml;nstler</a></li>
    <li><a clasS="medi" href="">Media</a></li>
    <li><a clasS="shop" href="">Shop</a></li>
    <li class="last"><a clasS="kont" href="">Kontakt</a></li>
</ul>
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#navi
{
    list-style; none;
    margin: 0;
    padding: 0;
}

#navi li
{
    margin: 0;
    padding: 0 0 0 79px;
    background: #000 url(pictures/menuLine.jpg) no-repeat left top;
}

#navi li.last
{
    background-image: url(pictures/menuLinebottom.jpg) no-repeat left top;
}

#navi li a
{
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: -9999px;
}

#navi .home { background-image: url(pictures/menuHome.jpg) }
#navi .news { background-image: url(pictures/menuNews.jpg) }
#navi .kuns { background-image: url(pictures/menuKuenstler.jpg) }
#navi .medi { background-image: url(pictures/menuMedia.jpg) }
#navi .shop { background-image: url(pictures/menuShop.jpg) }
#navi .medi { background-image: url(pictures/menuKontakt.jpg) }

#navi .home:hover { background-image: url(pictures/menuHome_hover.jpg) }
#navi .news:hover { background-image: url(pictures/menuNews_hover.jpg) }
#navi .kuns:hover { background-image: url(pictures/menuKuenstler_hover.jpg) }
#navi .medi:hover { background-image: url(pictures/menuMedia_hover.jpg) }
#navi .shop:hover { background-image: url(pictures/menuShop_hover.jpg) }
#navi .medi:hover { background-image: url(pictures/menuKontakt_hover.jpg) }

Ein weiterer Vorteil ist die einfache Möglichkeit einen Hovereffekt für die Links einzubauen.

...ja, ich hatte gerade etwas langeweile ;)

Insgesamt 2 mal bearbeitet, zuletzt am 17.04.2008 um 01:43:21

Benutzer gelöscht
Beiträge: 15

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Bilder nebeneinander im Internet Explorer mit CSS" von Benutzer gelöscht Benutzer gelöscht, am Donnerstag den 17.04.2008 um 18:58:15

Hallo Sven,

vielen, vielen Dank für deine Hilfe.

Deine erste Lösung (alles hintereinander schreiben) hatte ich schon versucht, nur leider vergessen dies in meinem Beitrag zu erwähnen.

Deinen ausführlichen Quellcode musste ich mir erst genauer anschauen. Dies hat mich auf eine tolle Idee gebracht. Ich musste nur eine kleine Änderung an den für das Design benötigten Bilder machen und dein Quellcode anpassen und schon sieht es im Internet Explorer fast perfekt aus =)

Vielen Dank,

Gruß Mustangore