Mit CSS Bilder ausrichten

FeliX_22 · 20. Februar 2008, 04:32

Hallo zusammen!

Ich habe auf einer HP eine Reihe von Bildern, die ich genau untereinander ohne Rand anzeigen möchte. In Dreamweaver und Firefox wird mir das korrekt angezeigt, aber im IE entstehen hässliche Abstände. Kann mir bitte jemand schreiben, wie ich mit CSS Bilder untereinander darstelle?

Die Bilder haben unterschiedliche Breite, das ganze soll zentriert sein. Da ich mit Dreamweaver arbeite, habe ich hier eine Ebene erstellt und ein Bild eingefügt, aber egal welche Eigenschaft ich auswähle, es wird nicht das gewünschte Ergebnis angezeigt, z. B. wird mal ein Bild so fixiert, dass es sich nicht mal beim Scrollen verschiebt.

Wenn das geschafft ist, dann würde ich gerne ein kleines Bild über ein anderes, großes legen, also teilweise verdecken.

Ihr braucht jetzt nicht den kompletten Code reinzutippen, ein Hinweis welche CSS-Eigenschaften ich brauche, hilft mir auch weiter. Hab mich bei SelfHTML erfolglos umgesehen. Ich bin mir aber sicher, dass ich das irgendwie mit dem div-Tag machen muss. Könnte jemand bitte das Grundgerüst (also minimal) für Bilder in Ebenen posten?

Vielen Dank schon Mal für eure Bemühungen!

FeliX_22

Linux-Daemon · 20. Februar 2008, 12:24

Was genau verstehst du unter "das ganze soll zentriert sein"?
So etwa wie unten mit dem Code?

Ich hab jedes Bild in eine Tabelle

Quellcode

<table border="10px">
<tr>
<td>
<img src="../images/layout/****.png" alt="" height="70" width="114" >
</td>
</tr>
<tr>
<td>
<img src="../images/layout/****.png" alt="" height="170" width="214" >
</td>
</tr>
<tr>
<td>
<img src="../images/layout/****.png" alt="" height="70" width="114" >
</td>
</tr>
</table>

Alles anzeigen

Quellcode

<style type="text/css" media="all">
img {margin-left: 50px; margin-top: 20px; }
td {text-align: center; }
table {width: 400px; height: 300px}
</style>

Edit:
Andernfalls per div:

Quellcode

<style type="text/css" media="all">
img {margin-left: 50px; margin-top: 20px; }
div {text-align: center; width: 300px; height: 300px}
</style>

Quellcode

<div>
<img src="images/layout/****.png" alt="" height="70" width="114" ><p>
<img src="images/layout/****.png" alt="" height="170" width="214" ><p>
<img src="images/layout/****.png" alt="" height="70" width="114" ><p>
</div>

Bitte um Rückmeldung!

FeliX_22 · 20. Februar 2008, 13:48

Hallo Linux-Daemon!

Erstmal ein riesengroßes Dankeschön, dass du mir helfen möchtest. :danke:

So, nun zum Inhalt. Um das Ganze zu beschleunigen poste ich einfach ein Bild wie ich es mir vorstelle. Jede Farbfläche steht für eine png. Die graue Fläche ist aber nur der body mit bgcolor. Achte darauf, dass die gelbe Fläche nicht die Rote berührt, sagen wir 20px Abstand. Aber ein anderes Mal brauche ich das auch mit 0px Abstand. Wenn ich nur wüsste wo ich das einstelle... Sagte ich schon, dass ich mich erst seit kurzem mit CSS beschäftige?

Ich hab das alles mit margin, border, padding oder so probiert, ich weiß nicht weiter. Auch mit position:static|absolut|fixed|relative. Kein Erfolg.

Also auf Tabellen würde ich gerne verzichten. Das ist doch längst kein Standard mehr.

Ich weiß, es müsste eigentlich ganz einfach sein. In DW und FF gehts ja super, aber der :flag:IE kommt wieder mal mit dem CSS-Box-Modell nicht klar. Brauche ich Browser-Hacks? Das muss doch nicht sein?

Deinen Code habe ich ausprobiert. Du hast zwischen den <img>-Tags <p>-Tags, also einen Absatz, aber ich möchte ja KEINEN Abstand. Jetzt hast du ja das Bild gesehen und weißt was ich meine. Und trotzdem fügt mir der IE Riesenlücken da rein.

Dass alles in der Mitte ist, erreiche ich mit <div id="content" align="center">. Die id content habe ich übrigens von einer Dreamweaver-Vorlage übrig. Die sorgt nur dafür:

Quellcode

#content{
float:left;
width: 90%;
margin: 0;
padding: 0 3% 0 0;
}

Aber das können wir ignorieren, weil der content erst am Seitenende aufhört, also die all umschließende Box ist. Nur der Vollständigkeit halber. Wir brauchen eine img id, die einfach alle Ränder weglässt und die Bilder aneinander klebt. Da kam mir auch schon der Gedanke, warum ich nicht gleich alle Bilder zu einem Bild zusammenfasse, aber einige Elemente wiederholen sich und so finde ich es besser, wenn man wirklich die einzelnen Bilder lädt. Oder was meint ihr?

Ich denke, jetzt ist eher klar, was ich meine. Was sagst du dazu? Brauchst du noch Angaben?

Danke nochmal für deine Hilfe

Gruß

FeliX_22

Broken Sword · 20. Februar 2008, 14:31

Öhhh... ich muss zugeben, dass der viele Text mich verwirrt.
Ich zeig dir erstmal, wie du es zu dem Bild schaffst.

Quellcode

<style type="text/css"><!--
img {border:0px;}
.wrapper {
margin:0px auto; /*align="center" ist nicht valides xhtml*/
width: 600px; /*Weite der Bilder*/
}
.blau {
background-image:url('blau.png');
padding-top:5px; /* Abstand zum roten Bild */
height:150px; /*Höhe des blauen Bildes */
width: 600px; /*Weite wie bei wrapper */
}
-->
<div class="wrapper">
<img src="rot.png" alt="rot" />
<div class="blau">
<img src="gelb.png" alt="gelb" />
</div>
<img src="gruen.png" alt="gruen" />
</div>

Alles anzeigen

Das dürfte es eigentlich gewesen sein.

Hoffe das hilft dir weiter.

Gruß
Broken Sword

FeliX_22 · 20. Februar 2008, 18:26

Hallo Broken Sword!

Auch dir vielen Dank für deine Hilfestellung. Wollen wir mal schauen. Wundert euch nicht, dass meine Antwort so spät kommt, ich sitze die ganze Zeit vor diesem Problem.

Ich habe die Weite der Bilder auf die Breite des breitesten Bildes gesetzt. Schön! Alles ist jetzt zentriert

Das ist mir jetzt zu blöd nochmal ein Bild zu uppen, daher seht bitte selbst mal das vorläufige Ergebnis an.

*** // ERLEDIGT

(Ähnlichkeiten mit Namen von FSB-Usern sind rein zufällig)

Achtet mal darauf welche Unterschiede der Internet Explorer und Firefox hier machen. Dreamweaver zeigt es wie Firefox an. Ein Tipp am Rande: Wenn ihr mit Firefox surft, könnt ihr mit dem Addon IE Tab einfach das kranke IE-Verhalten simulieren.

Zum einen finde ich es in Firefox richtig, dass GELB direkt zwischen ROT und BLAU ist. Andererseits möchte ich ein anderes Bild - VIOLETT - auf der blauen Fläche haben. Etwa so, wie GELB im Internet Explorer. Aber hier kann ich keine Abstände definieren.

Ich poste hier trotzdem nochmal den aktuellen Quelltext, da man es sonst nicht versteht.

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FeliX_22 - Mit CSS Bilder ausrichten</title>
<style type="text/css">
<!--
body{
color: #ff00ff;
background-color: #cccccc;
}
img {
border:0px;
margin: 0px;}
.wrapper {
margin:0px auto; /*align="center" ist nicht valides xhtml*/
width: 1024px; /*Weite der Bilder*/
}
.blau {
background-image:url('blau.png');
padding-top:0px; /* Abstand zum roten Bild */
height:125px; /*Höhe des blauen Bildes */
width: 1024px; /*Weite wie bei wrapper */
}
.wrapper2 {
padding-top:2px; /* Abstand zum blauen Bild */
padding-left:24px; /* Abstand von links zum blauen Bild */
height:125px; /*Höhe des blauen Bildes */
width: 1024px; /*Weite wie bei wrapper */
}
-->
</style>
</head>
<body>
<div class="wrapper">
<img src="rot.png" alt="rot" width="1024" height="289" />
<div class="blau">
<img src="gelb.png" alt="gelb" width="1024" height="5" />
<div class="wrapper2">
<img src="violett.png" alt="violett" width="111" height="18" /><br />
<img src="space.gif" alt="" width="118" height="5" /><br />
<img src="lila.png" alt="lila" width="111" height="18">
</div>
</div>
<img src="gruen.png" alt="gruen" width="1024" height="5" />
<img src="rot.png" alt="rot" width="1024" height="289" />
</div>
</body>
</html>

Alles anzeigen

Ich habe sicherheitshalber beim img Tag margin: 0px hinzugefügt.

Mit wrapper2 innerhalb von "blau" habe ich eine neue Box definiert, die die imgs violett und lila beinhaltet. Den Abstand zwischen den beiden habe ich jetzt mit einer unsichtbaren space.gif erzeugt. Das muss besser gehen! Ohne <br />.

Falls dieser ganze Text wieder verwirrend war: Jetzt hat Firefox praktisch schon meine Lösung !!! Aber wie mach ich das in IE?

Für weitere Hilfestellung bin ich euch sehr dankbar.

Gruß

FeliX_22

Broken Sword · 20. Februar 2008, 18:54

FeliX_22 schrieb:

Mit wrapper2 innerhalb von "blau" habe ich eine neue Box definiert, die die imgs violett und lila beinhaltet. Den Abstand zwischen den beiden habe ich jetzt mit einer unsichtbaren space.gif erzeugt. Das muss besser gehen! Ohne <br />.

Einfach

Quellcode

<img src="lila.png" alt="lila" width="111" style="margin-top:15px"; height="18">

sollte das Problem lösen.

Das Problem mit dem IE ist eigentlich nur reine Form-Sache. Der IE scheint wenn etwas über den Rand geht ein Absatz (<p>) und kein Zeilenumbrauch (<br />) zusetzen. Darum sollte man das mit hin schreiben:

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FeliX_22 - Mit CSS Bilder ausrichten</title>
<style type="text/css">
<!--
body{
color: #ff00ff;
background-color: #cccccc;
}
img {
border:0px;
margin: 0px;}
.wrapper {
margin:0px auto; /*align="center" ist nicht valides xhtml*/
width: 1024px; /*Weite der Bilder*/
}
.blau {
background-image:url('blau.png');
padding-top:0px; /* Abstand zum roten Bild */
height:125px; /*Höhe des blauen Bildes */
width: 1024px; /*Weite wie bei wrapper */
margin:0px;
}
.wrapper2 {
margin:0px;
padding-top:2px; /* Abstand zum blauen Bild */
padding-left:24px; /* Abstand von links zum blauen Bild */
height:125px; /*Höhe des blauen Bildes */
width: 1024px; /*Weite wie bei wrapper */
}
-->
</style>
</head>
<body>
<div class="wrapper">
<img src="rot.png" alt="rot" width="1024" height="289" /><br >
<div class="blau">
<img src="gelb.png" alt="gelb" width="1024" height="5" /><br />
<div class="wrapper2">
<img src="violett.png" alt="violett" width="111" height="18" /><br />
<img src="lila.png" alt="lila" width="111" style="margin-top:15px"; height="18">
</div>
</div>
<img src="gruen.png" alt="gruen" width="1024" height="5" /><br />
<img src="rot.png" alt="rot" width="1024" height="289" />
</div>
</html>

Alles anzeigen

So funktioniert es bei mir mit FF, IE und Opera

Gruß
Broken Sword

FeliX_22 · 20. Februar 2008, 19:52

Oh Mann!!! Im Internet Explorer und Firefox sieht die Seite gleich aus! :knu:

Vielen Dank!

Was? Nur ein <br /> Tag am Ende? :depp:

Hast du eine Ahnung wieviele Stunden ich schon damit verbracht habe?

Solche Momente sind es, wenn ich stolz drauf bin Mitglied dieser Community zu sein.

Zum Schluss Broken Sword noch eine letzte Frage: Ist es rein theoretisch möglich einen Rollover zu erstellen, wobei Bilder unterschiedliche Breite haben? Es handelt sich hier um den violetten und lilafarbenen Button, die über 900px breit werden. Einen normalen Rollover kriege ich selbst mit Dreamweaver hin. Die Buttons dürfen aber normal nicht von vornherein so breit und transparent sein, da sie sonst aufs Klicken reagieren würden.

Broken Sword · 20. Februar 2008, 20:35

FeliX_22 schrieb:

Zum Schluss Broken Sword noch eine letzte Frage: Ist es rein theoretisch möglich einen Rollover zu erstellen, wobei Bilder unterschiedliche Breite haben? Es handelt sich hier um den violetten und lilafarbenen Button, die über 900px breit werden. Einen normalen Rollover kriege ich selbst mit Dreamweaver hin. Die Buttons dürfen aber normal nicht von vornherein so breit und transparent sein, da sie sonst aufs Klicken reagieren würden.

Klar, wie wäre es mit JS:

Quellcode

<img src="bild.jpg" alt="lalala" onmouseover="this.src='bild_over.jpg';" onmouseout="this.src='bild.jpg'" />

Solange du nicht die Breite festsetzte passt sich diese automatisch an.

Hoffe das ist sowas, was du gesucht hast

Gruß
Broken Sword

FeliX_22 · 21. Februar 2008, 03:04

Ojeoje, ich hab (fast) die ganze Zeit versucht deine letzte Zeile einzubinden, hatte aber was so schlecht rauskopiert, dass ich Fehler mit den einfachen und doppelten Anführungszeichen hatte. Ich habe dann wie angekündigt, über Dreamweaver ein Rollover-Bild eingefügt und dann nur noch wie du sagtest die Breite entfernt. Und dann hab ich noch einiges an der HP weitergemacht, ohne css.

Alles perfekt! Ich danke dir vielmals für deine Hilfe!

Schönen Gruß

FeliX_22

MeX · 20. März 2008, 13:33

na denn...

~ C L O S E D ~

ceeyaa.mex

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

HTML-Quellcode

Quellcode

HTML-Quellcode

Quellcode

Teilen