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

vertikaler Abstand zwischen Bildern in einer Spalte

Skibbie

Neues Mitglied
Hallo,

ja, sorry, typisches anfänger problem, aber Suche konnte auch nicht helfen :oops:...

Ich will so eine Art Galerie bauen, dass wenn man auf einen kleinen Notebook (notebook1-11) zeigt, dass dieser dann in groß angezeigt wird.
Das habe ich auch alles schon mit Java(Code noch nicht implementiert) gelöst.

Mein letztes Problem tritt nun in der ersten Zeile auf.
Ich möchte in der zweiten Spalte gerne 3 Bilder nebeneinander platzieren. Da soll jedoch kein Abstand sein, da das Ganze sozusagen ein großes, interaktives Bild darstellt.
Wie bekomm ich die vertikalen Abstände zwischen den Bildern weg?

Könnte man alternativ auch eine Imagemap auf ein Bild, welches dann 3 Notebooks enthält packen und definieren, in welchem Gebiet, welche java funktion greifen soll?
es wäre jedoch besser, wenn man schnell und einfach die abstände wegzaubern könnte.
Code:
<html>
<body>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
</head>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="122px" height="93px">
<img src="Bilder/Notebook1.jpg">
</td>
<td border=0px" width="366px" height="93px">
<img src="Bilder/Notebook2.jpg" border=0px">
<img src="Bilder/Notebook3.jpg" border=0px">
<img src="Bilder/Notebook4.jpg" border=0px">
</td>
<td width="122px" height="93px">
<img src="Bilder/Notebook5.jpg">
</td>
</tr>
<tr>
<td width="122" height="279">
<img src="Bilder/Notebook6.jpg">
<img src="Bilder/Notebook7.jpg">
<img src="Bilder/Notebook8.jpg">
</td>
<td width="366" height="279">
<img src="Bilder/Notebook1_gr.jpg">
</td>
<td width="122" height="279">
<img src="Bilder/Notebook9.jpg">
<img src="Bilder/Notebook10.jpg">
<img src="Bilder/Notebook11.jpg">
</td>
</tr>
<tr>
<td width="122" height="58">
<img border="0" src="Bilder/footer1.jpg">
</td>
<td width="366" height="58">
<img border="0" src="Bilder/footer2.jpg">
</td>
<td width="122" height="58">
<img border="0" src="Bilder/footer3.jpg">
</td>
</tr>
</table>
</html>
</body>
 
Also was als erstes auffällt, dein body fängt vor dem head an, das ist falsch, ausserdem fehlt ein Doctype, der die Browser in den Standardmode versetzt.

PHP:
<!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="en">
  <head>
    <title>Index</title>
  </head>
  <body>
  </body>
</html>
Des weiteren sind Tabellen für tabellarische Daten, nicht fürs Layout. Wenn du mehrere Bilder nebeneinander darstellen willst, zeichne sie als Liste (<ul>) aus.

Layout wird per CSS gemacht, die Listenelemente bekommst du mit
Code:
li {
  float: left;
}
oder
Code:
li {
  display: inline;
}
nebeneinander.

Zu deinem Problem, Abstände regelt man mit margin(Aussenabstand) und padding(Innenabstand)
 
Ich schließe mich zum Ersten meinen vorredner an ^^

und dann muss ich sagen.. Java ist was anderes wie JavaScript. Du meinst hoffentlich JavaScript...denn eine Bildergalerie mit Java zu bauen wäre schon...ja....mit dem Schlaghammer Erdnüsse knacken *g*

Hm...Bilder ein einer Tabelle. Eine Tabelle wird für tabellarische Daten gebraucht. Denkst du es ist richtig ausgezeichnet worden?

Schau dir das mal an:

Bildergalerie

Gruß
Loon3y
 
Vielen Dank erstmal für die Tipps. Bin halt n Noob ;ugl hab mir das alles mehr oder weniger selbst beigebracht...

Ich hab die Seite übrigens jetzt soweit fertig...Im Firefox ist auch alles super, aber im IE sind immer noch irgendwelche unerklärlichen Abstände :?:

Habe jetzt Listen und Tabellen verknüpft, evtl auch überflüssig, aber im Firefox funzt es ja...

Jemand ne Idee, wie ich das im IE wie im Firefox angezeigt bekomme?

Code:
<html>
<!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="en">

<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>

<SCRIPT LANGUAGE="JavaScript"><!--
function over(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook1_gr.jpg"
}
function over1(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook2_gr.jpg"
}
function over2(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook3_gr.jpg"
}
function over3(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook4_gr.jpg"
}
function over4(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook5_gr.jpg"
}
function over5(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook6_gr.jpg"
}
function over6(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook7_gr.jpg"
}
function over7(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook8_gr.jpg"
}
function over8(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook9_gr.jpg"
}
function over9(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook10_gr.jpg"
}
function over10(){
   if (document.images)
      document.Grafik.src = "http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook11_gr.jpg"
}

//--></SCRIPT>

</head>

<body>

<ul>
<li style="list-style-type:none; margin:0px; height:200px; border:0; cellspacing:0; cellpadding:0;">
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/head1.jpg" height="200" width="1000">
</li>
<li style="list-style-type:none;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200px" height="430px">
<img src="Bilder/left.jpg">
</td>
<td>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="122px" height="93px">
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook1.jpg" onmouseover="over()">
</td>
<td border=0px" width="366px" height="93px">

<ul style="list-style-type:none; float:left; width:366px; heigth:93px;">
<li><a href="http://stores.shop.ebay.de/Aufkleber-Skibbe"><img style="float:left;" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook2.jpg" border=0px" onmouseover="over1()"></a>
<li><img style="float:left;" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook3.jpg" border=0px" onmouseover="over2()">
<li><a href="http://stores.shop.ebay.de/Aufkleber-Skibbe"><img style="float:left;" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook4.jpg" border=0px" onmouseover="over3()"></a>
</ul>

</td>
<td width="122px" height="93px">
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook5.jpg" onmouseover="over4()">
</td>
</tr>
<tr>
<td width="122" height="279">
<a href="http://stores.shop.ebay.de/Aufkleber-Skibbe"><img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook6.jpg"  border="0" onmouseover="over5()"></a>
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook7.jpg" onmouseover="over6()">
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook8.jpg" onmouseover="over7()">
</td>
<td width="366" height="279">
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook8_gr.jpg" name="Grafik">
</td>
<td width="122" height="279">
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook9.jpg" onmouseover="over8()">
<a href="http://stores.shop.ebay.de/Aufkleber-Skibbe"><img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook10.jpg" border="0" onmouseover="over9()"></a>
<img src="Bilder/Notebook11.jpg" onmouseover="over10()">
</td>
</tr>
<tr>
<td width="122" height="58">
<img border="0" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/footer1.jpg">
</td>
<td width="366" height="58">
<img border="0" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/footer2.jpg">
</td>
<td width="122" height="58">
<img border="0" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/footer3.jpg">
</td>
</tr>
</table>
</td>
<td width="190px" height="430px">
<img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/right.jpg">
</td>
</tr>
</table>
</li>

<li style="list-style-type:none;">
<img border="0" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Beschreibung3.jpg" height=870 width=1000  alt="Beschreibung" usemap="#eBay">
  <map name="eBay">
    <area shape="rect" coords="730,75,785,95"
          href="http://stores.ebay.de/Aufkleber-Skibbe" alt="Style 'n Fun Shop" title="Style 'n Fun">
   </map>
</li>
</ul>

</body>
</html>
 
Tabellen sind nur für tabellarische Daten gedacht und nichts anderes.

Benutze CSS-Layout um deine Seite zu "gestalten".

So wie dein jetzt Code ist, ist er falsch und zudem noch schwer zu warten. Also schwer für uns einzusehen was du erreichen willst ohne daran mehr zeit zu verwenden...(jetz thätt ich fast verschwenden gesagt..)

Bzgl deiner Aussage, dass sie im Firefox gut aussieht, leg ich idr mal diesen Link ans Herz..

Best Viewed with / Optimiert für ... Webdesign und Usability

Gruß
Loon3y
 
Hi,
hab das Ganze jetzt mal neu aufgezogen.
Mit CSS und ohne Tabellen.
Mein Problem besteht aber nach wie vor. Zwischen den Bildern entsteht ein Abstand, obwohl eigentlich alles auf 0px gesetzt ist - bin einfach ratlos.
Hier mal eine Positionsskizze.

Der Code sollte jetzt auch um ein vielfaches übersichtlicher sein.

Hab das Ganze in 5 "Spalten" bzw Listen aufgezogen: " left; 1 bis footer1; 2,3,4 bis footer2; 5 bis footer3; right ".
Aufgrund der Abstände springt die 4 in die nächste Zeile und macht alles kaputt. Wobei die Abstände selbst eigentlich auch alles kaputt machen.

Vielen Dank für eure Hilfe. Die Links haben auch schon ein Stück weiter geholfen.

layout.jpg


Code:
<html>

<!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="en">

<head>

<style type="text/css">
*{
margin:0px;
padding:0px;
}
#main{
    margin:0px;
    padding:0px;
    spacing:0px;
    border:0px;
}
#main li{
    float:left;
}
#main img{
    margin:0px;
    padding:0px;
    spacing:0px;
    border:0px;
}
#liste{
    list-style-type:none;
}

#listing{
    width:122px;
}
#middle{
    width:366px;
}
#Notebook{
    border:0px;
    margin:0px;
    padding:0px;
    height:93px;
    width:122px;
}
</style>

</head>

<body>

<div id="main">

<ul id="liste">

<li><img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/left.jpg" height="430px" width="200px">
</li>

<li id="listing"><img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook1.jpg">
         <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook6.jpg">
             <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook7.jpg">
             <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook8.jpg">
         <img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/footer1.jpg">
</li>

<li id="middle"><img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook2.jpg">
            <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook3.jpg">
            <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook4.jpg">
        <img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook8_gr.jpg">
        <img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/footer2.jpg">                   
</li>

<li id="listing"><img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook5.jpg">
          <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook9.jpg">
             <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook10.jpg">
             <img id="Notebook" src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/Notebook11.jpg">
         <img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/footer3.jpg">
</li>

<li><img src="http://www.fahrzeugbeschriftung-skibbe.de/eBay/right.jpg" height="430px" width="190px">
</li>

</ul>

<div style="clear: both;"></div>

</div>

</body>
</html>
 
Hab ich irgendwo gelesen, dass die Probleme nur der IE macht? Dann entferne mal die Leerzeichen bzw, Zeilenumbrüche zwischen den <img>-Tags, die stellt der IE gerne als ein Leerzeichen dar.
 
es ist zum mäuse melken.
ihr könnt davon ausgehen, dass ihr nicht die einzigen angenervten seid :lol:

jetzt habe ich doch tatsachlich noch in Firefox und Netscape einen Horizontalen Abstand...allerdings nur zwischen 1 und 6; 2,3,4 und notebook8_gr und 5 und 9.

Das ist mir jetzt aber gänzlich unerklärlich, da jeder Zeilenumbruch und jedes Leerzeichen weg und alles auf 0 gesetzt ist.

:(
 
Ein Fehler ist auf jeden Fall schonmal, dass Du ein und die selbe ID mehrfach vergibst. Und das sogar über mehrere IDs. Eine ID ist immer etwas eindeutiges, nur ein Element darf diesen Namen erhalten. Verwende stattdessen eine Klasse.

Ich finde an der Stelle ehrlich gesagt auch die Auszeichnung etwas seltsam...sieht mehr so aus, als würdest Du mit aller Macht auf Tabellen verzichten wollen...was ja prinzipiell auch richtig ist, zu Layoutzwecken. Aber ich versteh nicht, warum, wenn das schon alles pixelgenau ist, das nicht ein einziges Image ist.
 
Also jetzt kommt es noch deutlicher raus, dass Listen völlig fehl am Platze sind. Jetzt missbrauchst Du Listen zu Layoutzwecken (wie kommt man nur auf sowas?).
Und mit abgeschalteten Grafiken sieht man irgendwie gar nichts mehr, nichtmal den Text ;-)
 
hm...

naja, aber womit soll ich es dann machen, wenn nicht mit tabellen und nicht mit listen ?

Die Seite ist auch so aufgebaut, dass der Text als Bild vorhanden ist. Ist insofern praktisch, wenn ich den Text ändern möchte, diesen aber in mehreren Angeboten stehen habe, brauch ich ihn nur einmal zu ändern. ;)

Also, solange es funktioniert ist mir jedes mittel recht :lol:

gruß
 
So... hier dann die Endfassung.

Es funktioniert in allen o.g. Browsern.

Aber anscheinend ist dies nicht die Methode, die man üblicherweise wählt!?
Wie hättet ihr es denn (besser) gelöst?

Vielen Dank

Gruß Skibbie
 
naja, aber womit soll ich es dann machen, wenn nicht mit tabellen und nicht mit listen ?
Mit HTML. Die Überschrift als Überschrift ausgezeichnet (<h1>), den Zusatz zur Überschrift wahrscheinlich mit <h2>, Textabsätze mit <p>, die Aufzählung mit den Häkchen mit <ul>

Die Seite ist auch so aufgebaut, dass der Text als Bild vorhanden ist. Ist insofern praktisch, wenn ich den Text ändern möchte, diesen aber in mehreren Angeboten stehen habe, brauch ich ihn nur einmal zu ändern.
Das ist mit Sicherheit alles, nur nicht Dienst am Kunden. Dienst am Kunden wäre, selbst mehr Arbeit auf sich zu nehmen, um damit dem Kunden keine Probleme zu bereiten. Jemand, der z.B. mit Lynx auf die Seite geht, sieht gar nichts und kann demnach auch nichts kaufen.
Ich meine, dass das nicht in Deinem Interesse sein kann.

Grüße,
-Efchen
 
Die Seite ist auch so aufgebaut, dass der Text als Bild vorhanden ist. Ist insofern praktisch, wenn ich den Text ändern möchte, diesen aber in mehreren Angeboten stehen habe, brauch ich ihn nur einmal zu ändern.
Das ist mit Sicherheit alles, nur nicht Dienst am Kunden. Dienst am Kunden wäre, selbst mehr Arbeit auf sich zu nehmen, um damit dem Kunden keine Probleme zu bereiten. Jemand, der z.B. mit Lynx auf die Seite geht, sieht gar nichts und kann demnach auch nichts kaufen.
Ich meine, dass das nicht in Deinem Interesse sein kann.

Grüße,
-Efchen

Da kommt noch etwas viel fataleres hinzu: Skibbie möchte mit der Seite etwas verkaufen!
Derjenige, der kaufen möchte, sucht u.U. danach und findet nichts, weil die Suchmaschine
keinen Text sieht...

Grüße
Bernhard
 
Zurück
Oben