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

Kein Abstand zwischen 2 Grafiken erwünscht...

M

Manuel_1304

Neues Mitglied
Hallo liebes Forum,

ich habe folgende Frage mit der ich mich seit gestern abend rumtrage:

Ich habe ein Menü aus Grafiken gebastelt und die einzelnen Menüpunkte entsprechend gesliced und als Grafik gespeichert.

Anschliessend wollte ich die Grafiken mit normalem HTML zusammenbasteln, jedoch ohne Abstand.

Meine Versuche mit border, margin und padding sind gescheitert.

Bei der Suche im Web bin ich dann auf folgende Möglichkeit gestossen, die funktioniert, ich aber zum Lesen alles andere als schön finde:

Und zwar müssen sämtliche <img>-Tags in einer Zeile direkt hintereinander
geschrieben werden. Dies hat zur Folge, dass kein Abstand mehr zwischen
den einzelnen Grafiken ist, aber der Quellcode sieht bei mehreren Bildern
nicht mehr wirklich lesbar aus.

Der Fehler tritt sowohl im Firefox als auch im Explorer auf.

Habt Ihr andere Lösungen, dieses Problem zu umgehen?

Eventuell eine Art Fortsetzungszeichen oder so was?

Für eine schnelle Antwort wäre ich euch sehr verbunden.

Vielen Dank bereits im voraus und einen schönen abend sendet

Manuel
 
Es wäre sehr nützlich, wenn du uns deinen aktuellen HTML- und CSS-Code zeigen könntest.
Ansonsten wird es schwierig, dir zu helfen.
 
Hallo,

anbei der Code (wobei der nicht wirklich aussagekräftig ist meines Erachtens).

Es geht lediglich darum zwei Images direkt nebeneinander zu platzieren:

So klappt es nicht:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    </head>

    <body>
        <div id="all">
            <div id="title">
                <img src="img/banner.png" width="900" height="150" />
            </div>
            
            <div id="menu">
                <img class="img_std" src="img/home_deakt.png" width="101" height="30"  />
                <img class="img_std" src="img/aboutMe_deakt.png" width="100" height="30" />
<img class="img_std" src="img/news_deakt.png" width="100" height="30" />
<img class="img_std" src="img/pictures_deakt.png" width="100" height="30" />
<img class="img_std" src="img/tutorials_deakt.png" width="135" height="30"  />
<img class="img_std" src="img/guestbook_deakt.png" width="135" height="30"  />         </div>
</div>
</body>
</html>

So klappt es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>www.ecke-rosbach.de</title>
</head>

<body>
<div id="all">
<div id="title">
<img src="img/banner.png" width="900" height="150" alt="www.ecke-rosbach.de" />
</div>

<div id="menu">
<img class="img_std" src="img/home_deakt.png" width="101" height="30" alt="Home" />
<img class="img_std" src="img/aboutMe_deakt.png" width="100" height="30" alt="Über mich" /><img class="img_std" src="img/news_deakt.png" width="100" height="30" alt="News" /><img class="img_std" src="img/pictures_deakt.png" width="100" height="30" alt="Bilder" /><img class="img_std" src="img/tutorials_deakt.png" width="135" height="30" alt="Tutorials" /><img class="img_std" src="img/guestbook_deakt.png" width="135" height="30" alt="Gästebuch" />
</div>

</div>

</body>

</html>

Der Unterschied ist schwierig darzustellen, weil er lediglich darin liegt, dass in dem oberen Beispiel Zeilenumbrüche zwischen den jeweiligen Images sind...im unteren Beispiel ist alles fortlaufend...womit die Zeile ewig lang wird und der Quellcode schlecht lesbar...

Fällt euch dazu was ein? Wäre echt super....
 
Hallo zusammen,

habe es soeben hinbekommen mit folgenden Anweisungen für die jeweiligen Images:

display:block; float:left;

Danke allen für die Hilfe.

Thread beendet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben