1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Bildergalerie ausrichten

Discussion in 'Web-Know-how für die Homepage' started by homerjay76, Feb 2, 2007.

Thread Status:
Not open for further replies.
  1. homerjay76

    homerjay76 Byte

    Schönen guten Abend!

    Ich möchte in einem div eine Bildergalerie haben.
    Soweit so gut. Nur bei der Ausrichtung klappt es nicht.

    Wie kann ich den Abstand zu den Bildern verändern?

    Schon mal Danke im voraus
    Homerjay76

    Hier ein Auszug vom Quelltext:
    Code:
    
<div id="inhalt">

<p><span style="font-weight:bold">Bilder anklicken zum Vergr&ouml;&szlig;ern:</span></p>
<p>
<a href="fotos/foto1.jpg" ><img src="thumbnails/foto1_t.bmp" width="130" height="100" border="1" alt="Foto 1 - bitte anklicken!"></a> 
<a href="fotos/foto2.jpg" ><img src="thumbnails/foto2_t.bmp" width="130" height="100" border="1" alt="Foto 2 - bitte anklicken!"></a> 
<a href="fotos/foto3.jpg" ><img src="thumbnails/foto3_t.bmp" width="130" height="100" border="1" alt="Foto 3 - bitte anklicken!"></a> 
<a href="fotos/foto4.jpg" ><img src="thumbnails/foto4_t.bmp" width="80"  height="100" border="1" alt="Foto 4 - bitte anklicken!"></a>
<a href="fotos/foto5.jpg" ><img src="thumbnails/foto5_t.bmp" width="130" height="100" border="1" alt="Foto 5 - bitte anklicken!"></a> 
<a href="fotos/foto6.jpg" ><img src="thumbnails/foto6_t.bmp" width="130" height="100" border="1" alt="Foto 6 - bitte anklicken!"></a> 
<a href="fotos/foto7.jpg" ><img src="thumbnails/foto7_t.bmp" width="130" height="100" border="1" alt="Foto 7 - bitte anklicken!"></a> 
<a href="fotos/foto8.jpg" ><img src="thumbnails/foto8_t.bmp" width="130" height="100" border="1" alt="Foto 8 - bitte anklicken!"></a>
<a href="fotos/foto9.jpg" ><img src="thumbnails/foto9_t.bmp" width="130" height="100" border="1" alt="Foto 9 - bitte anklicken!"></a> 
<a href="fotos/foto10.jpg" ><img src="thumbnails/foto10_t.bmp" width="130" height="100" border="1" alt="Foto 10 - bitte anklicken!"></a> 
<a href="fotos/foto11.jpg" ><img src="thumbnails/foto11_t.bmp" width="130" height="100" border="1" alt="Foto 11 - bitte anklicken!"></a> 
<a href="fotos/foto12.jpg" ><img src="thumbnails/foto12_t.bmp" width="130" height="100" border="1" alt="Foto 12 - bitte anklicken!"></a>
<a href="fotos/foto13.jpg" ><img src="thumbnails/foto13_t.bmp" width="130" height="100" border="1" alt="Foto 13 - bitte anklicken!"></a> 
<a href="fotos/foto14.jpg" ><img src="thumbnails/foto14_t.bmp" width="130" height="100" border="1" alt="Foto 14 - bitte anklicken!"></a> 
<a href="fotos/foto15.jpg" ><img src="thumbnails/foto15_t.bmp" width="130" height="100" border="1" alt="Foto 15 - bitte anklicken!"></a> 
<a href="fotos/foto16.jpg" ><img src="thumbnails/foto16_t.bmp" width="130" height="100" border="1" alt="Foto 16 - bitte anklicken!"></a>
<a href="fotos/foto17.jpg" ><img src="thumbnails/foto17_t.bmp" width="100" height="130" border="1" alt="Foto 17 - bitte anklicken!"></a> 
<a href="fotos/foto18.jpg" ><img src="thumbnails/foto18_t.bmp" width="100" height="130" border="1" alt="Foto 18 - bitte anklicken!"></a> 
<a href="fotos/foto19.jpg" ><img src="thumbnails/foto19_t.bmp" width="100" height="130" border="1" alt="Foto 19 - bitte anklicken!"></a> 
<a href="fotos/foto20.jpg" ><img src="thumbnails/foto20_t.bmp" width="100" height="130" border="1" alt="Foto 20 - bitte anklicken!"></a> 
<a href="fotos/foto21.jpg" ><img src="thumbnails/foto21_t.bmp" width="100" height="130" border="1" alt="Foto 21 - bitte anklicken!"></a>
<a href="fotos/foto22.jpg" ><img src="thumbnails/foto22_t.bmp" width="100" height="130" border="1" alt="Foto 22 - bitte anklicken!"></a>
<a href="fotos/foto23.jpg" ><img src="thumbnails/foto23_t.bmp" width="100" height="130" border="1" alt="Foto 23 - bitte anklicken!"></a> 
<a href="fotos/foto24.jpg" ><img src="thumbnails/foto24_t.bmp" width="100" height="130" border="1" alt="Foto 24 - bitte anklicken!"></a> 
<a href="fotos/foto25.jpg" ><img src="thumbnails/foto25_t.bmp" width="100" height="130" border="1" alt="Foto 25 - bitte anklicken!"></a> 
<a href="fotos/foto26.jpg" ><img src="thumbnails/foto26_t.bmp" width="100" height="130" border="1" alt="Foto 26 - bitte anklicken!"></a>
<a href="fotos/foto27.jpg" ><img src="thumbnails/foto27_t.bmp" width="130" height="100" border="1" alt="Foto 27 - bitte anklicken!"></a> 
<a href="fotos/foto28.jpg" ><img src="thumbnails/foto28_t.bmp" width="130" height="100" border="1" alt="Foto 28 - bitte anklicken!"></a> 
<a href="fotos/foto29.jpg" ><img src="thumbnails/foto29_t.bmp" width="130" height="100" border="1" alt="Foto 29 - bitte anklicken!"></a> 
<!--<a href="fotos/foto30.jpg" ><img src="thumbnails/foto30_t.bmp" width="130" height="100" border="1" alt="Foto 30 - bitte anklicken!"></a> -->
</p>

</div>
     
    homerjay76, Feb 2, 2007
    #1
  2. binauchhier

    binauchhier Kbyte

    img {margin: 50px;}
     
    binauchhier, Feb 2, 2007
    #2
  3. homerjay76

    homerjay76 Byte

    Hi binauchhier!

    Danke, aber das funzt nur, wenn ich es in den Headbereich setzte. Dann verschiebt es mir auch die Navigationsleiste und
    Banner etc.

    Wenn ich es in dem #inhalt - Bereich platziere, hat es keine
    Wirkung.

    Mache ich da was falsch?

    mfg
     
    homerjay76, Feb 2, 2007
    #3
  4. binauchhier

    binauchhier Kbyte

    Das ganze muss in den head-Bereich der Seite mit
    <style type="text/css" media="screen"><!--
    #inhalt img {margin: 5px; }
    --></style>
    Dann gilt es nur für den Inhalt.

    Schau mal bei selfhtml nach, wie css funktioniert.
     
    binauchhier, Feb 3, 2007
    #4
  5. homerjay76

    homerjay76 Byte

    Bei Selfhtml finde ich nichts über mehrere Grafiken im div
    ausrichten! Suche schon seit einer Woche nach der Lösung.
    Google ergab auch keinen Erfolg.

    Hier mal der #inhalt-Bereich:
    Code:
    #inhalt {
  width:auto;
  min-width:300px;
  padding:5px;
  margin:20px 180px;
  img margin: 50px;
}
    mfg
    Homerjay76
     
    homerjay76, Feb 3, 2007
    #5
  6. binauchhier

    binauchhier Kbyte

    Nein, nicht so. Lies dir mal bei Selfhtml diese Seite durch: http://de.selfhtml.org/css/formate/zentrale.htm und besonders den Abschnitt "verschachtelte Elemente". Dann kommst du auch von alleine drauf, dass es nur so geht:
    HTML:
    #inhalt {
  width:auto;
  min-width:300px;
  padding:5px;
  margin:20px 180px;
}
#inhalt img {
  margin: 50px;
}
    Wenn nur eines der Bilder eine bestimmte Eigenschaft bekommen soll, musst du diesem halt eine Klasse zuweisen.

    Gruß
     
    binauchhier, Feb 3, 2007
    #6
  7. kalweit

    kalweit Hüter der Glaskugel

    "Muss" überhaupt nicht - schließlich gibt es "style".

    @homerjay76

    Poste mal den Quelltext komplett, dann kommt vielleicht Licht ins Kino - btw. ist es bei CSS besser mit Klassen statt ID's zu arbeiten.
     
    kalweit, Feb 3, 2007
    #7
  8. homerjay76

    homerjay76 Byte

    @ binauchhier:

    Ja so klappt das ganze! Danke!

    Falls ich noch was verbessern kann,
    hier trotzdem noch der komplette Quelltext:

    Code:
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>James Maiwald - Bilder</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.3)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.3)">

<meta name="robots" content="follow">

<meta name="description" content="Herstellung und Verkauf von Stirlingmotoren und Zubeh&ouml;r.">
<meta name="author" content="">
<meta name="keywords" content="www.kellergeist71.de, Dampfmaschine, Stirling, Stirlingmotor, Schwungrad, Heissluftmotor, Flammenfresser, Modellbau, Maiwald James, Maiwald, Kellergeist, Kellergeist71, Friesenried, Kaufbeuren, Bl&ouml;cktach">
<meta name="date" content="So, 28 Jan 2007 12:00:00 GMT">

<link rel="shortcut icon" href="favicon.ico" type="image/ico">

<style type="text/css">


body {
  padding:0px;
  margin:0px;
  
  font-family:Verdana,Arial,Helvetica,sans-serif;
  color:#000000;
  
}
#banner {
  height:115px;
  margin:10px;
  
}
#inhalt {
  width:auto;
  min-width:300px;
  padding:5px;
  margin:20px 180px;
  img margin: 50px;
}
  

#navi {
  position:absolute;
  top:145px;
  left:10px;
  width:160px;
  height:300px;
  
}

#rechts {
  position: absolute;
  top: 10px;
  left: 810px;
  width: 160px;
  height: 560px;
  
}  

p {
  font-size:1.4em;
  padding:0px 10px;
}
pre {
  font-size:1.2em;
  padding:0px 10px;
}

body, #inhalt, #rechts, #navi { background-color:#ffe4b5; }

</style>
</head>

<body>

<div id="banner">
<img id="topbanner" height="114" width="755" src="grafik/bilderbanner.gif"  border="0"  alt=" Bilder " >
</div>


<div id="inhalt">

<p><span style="font-weight:bold">Bilder anklicken zum Vergr&ouml;&szlig;ern:</span></p>
<p>
<a href="fotos/foto1.jpg" ><img src="thumbnails/foto1_t.bmp" width="130" height="100" border="1" alt="Foto 1 - bitte anklicken!"></a> 
<a href="fotos/foto2.jpg" ><img src="thumbnails/foto2_t.bmp" width="130" height="100" border="1" alt="Foto 2 - bitte anklicken!"></a> 
<a href="fotos/foto3.jpg" ><img src="thumbnails/foto3_t.bmp" width="130" height="100" border="1" alt="Foto 3 - bitte anklicken!"></a> 
<a href="fotos/foto4.jpg" ><img src="thumbnails/foto4_t.bmp" width="80"  height="100" border="1" alt="Foto 4 - bitte anklicken!"></a>
<a href="fotos/foto5.jpg" ><img src="thumbnails/foto5_t.bmp" width="130" height="100" border="1" alt="Foto 5 - bitte anklicken!"></a> 
<a href="fotos/foto6.jpg" ><img src="thumbnails/foto6_t.bmp" width="130" height="100" border="1" alt="Foto 6 - bitte anklicken!"></a> 
<a href="fotos/foto7.jpg" ><img src="thumbnails/foto7_t.bmp" width="130" height="100" border="1" alt="Foto 7 - bitte anklicken!"></a> 
<a href="fotos/foto8.jpg" ><img src="thumbnails/foto8_t.bmp" width="130" height="100" border="1" alt="Foto 8 - bitte anklicken!"></a>
<a href="fotos/foto9.jpg" ><img src="thumbnails/foto9_t.bmp" width="130" height="100" border="1" alt="Foto 9 - bitte anklicken!"></a> 
<a href="fotos/foto10.jpg" ><img src="thumbnails/foto10_t.bmp" width="130" height="100" border="1" alt="Foto 10 - bitte anklicken!"></a> 
<a href="fotos/foto11.jpg" ><img src="thumbnails/foto11_t.bmp" width="130" height="100" border="1" alt="Foto 11 - bitte anklicken!"></a> 
<a href="fotos/foto12.jpg" ><img src="thumbnails/foto12_t.bmp" width="130" height="100" border="1" alt="Foto 12 - bitte anklicken!"></a>
<a href="fotos/foto13.jpg" ><img src="thumbnails/foto13_t.bmp" width="130" height="100" border="1" alt="Foto 13 - bitte anklicken!"></a> 
<a href="fotos/foto14.jpg" ><img src="thumbnails/foto14_t.bmp" width="130" height="100" border="1" alt="Foto 14 - bitte anklicken!"></a> 
<a href="fotos/foto15.jpg" ><img src="thumbnails/foto15_t.bmp" width="130" height="100" border="1" alt="Foto 15 - bitte anklicken!"></a> 
<a href="fotos/foto16.jpg" ><img src="thumbnails/foto16_t.bmp" width="130" height="100" border="1" alt="Foto 16 - bitte anklicken!"></a>
<a href="fotos/foto17.jpg" ><img src="thumbnails/foto17_t.bmp" width="100" height="130" border="1" alt="Foto 17 - bitte anklicken!"></a> 
<a href="fotos/foto18.jpg" ><img src="thumbnails/foto18_t.bmp" width="100" height="130" border="1" alt="Foto 18 - bitte anklicken!"></a> 
<a href="fotos/foto19.jpg" ><img src="thumbnails/foto19_t.bmp" width="100" height="130" border="1" alt="Foto 19 - bitte anklicken!"></a> 
<a href="fotos/foto20.jpg" ><img src="thumbnails/foto20_t.bmp" width="100" height="130" border="1" alt="Foto 20 - bitte anklicken!"></a> 
<a href="fotos/foto21.jpg" ><img src="thumbnails/foto21_t.bmp" width="100" height="130" border="1" alt="Foto 21 - bitte anklicken!"></a>
<a href="fotos/foto22.jpg" ><img src="thumbnails/foto22_t.bmp" width="100" height="130" border="1" alt="Foto 22 - bitte anklicken!"></a>
<a href="fotos/foto23.jpg" ><img src="thumbnails/foto23_t.bmp" width="100" height="130" border="1" alt="Foto 23 - bitte anklicken!"></a> 
<a href="fotos/foto24.jpg" ><img src="thumbnails/foto24_t.bmp" width="100" height="130" border="1" alt="Foto 24 - bitte anklicken!"></a> 
<a href="fotos/foto25.jpg" ><img src="thumbnails/foto25_t.bmp" width="100" height="130" border="1" alt="Foto 25 - bitte anklicken!"></a> 
<a href="fotos/foto26.jpg" ><img src="thumbnails/foto26_t.bmp" width="100" height="130" border="1" alt="Foto 26 - bitte anklicken!"></a>
<a href="fotos/foto27.jpg" ><img src="thumbnails/foto27_t.bmp" width="130" height="100" border="1" alt="Foto 27 - bitte anklicken!"></a> 
<a href="fotos/foto28.jpg" ><img src="thumbnails/foto28_t.bmp" width="130" height="100" border="1" alt="Foto 28 - bitte anklicken!"></a> 
<a href="fotos/foto29.jpg" ><img src="thumbnails/foto29_t.bmp" width="130" height="100" border="1" alt="Foto 29 - bitte anklicken!"></a> 
<!--<a href="fotos/foto30.jpg" ><img src="thumbnails/foto30_t.bmp" width="130" height="100" border="1" alt="Foto 30 - bitte anklicken!"></a> -->
</p>

</div>


<div id="navi">
<a href="index.html"><img id="Navi1" height="60" width="160" src="grafik/startoff.gif"  border="0"  alt=" Startseite " ></a><br>
<a href="bilder.html"><img id="Navi2" height="60" width="160" src="grafik/bilderon.gif"  border="0"  alt=" Bilder " ></a><br>
<a href="kontakt.html"><img id="Navi3" height="60" width="160" src="grafik/kontaktoff.gif"  border="0"  alt=" Kontakt / Impressum " ></a><br>
<a href="downloads.html"><img id="Navi4" height="60" width="160" src="grafik/downloadsoff.gif"  border="0"  alt=" Downloads " ></a><br>
<a href="links.html"><img id="Navi5" height="60" width="160" src="grafik/linksoff.gif"  border="0"  alt=" Links " ></a>
</div>


<div id="rechts">
<img id="Bild1" height="213" width="160" src="bild1.jpg"  border="0"  alt="Bild1" >
<img id="Bild2" height="213" width="160" src="bild2.jpg"  border="0"  alt="Bild2" >
<img id="Bild3" height="213" width="160" src="bild3.jpg"  border="0"  alt="Bild3" >
<img id="Bild4" height="213" width="160" src="bild4.jpg"  border="0"  alt="Bild4" >
<img id="Bild5" height="213" width="160" src="bild5.jpg"  border="0"  alt="Bild5" >
</div> 

</body>
</html>
     
    homerjay76, Feb 3, 2007
    #8
  9. kalweit

    kalweit Hüter der Glaskugel

    zu #3)

    Da verschiebt sich bei mir nichts. Zudem liegt hier

    ein Fehler. Vergleiche das bitte mit dem Code in #6. Ansosnten sieht das aus, wie erwartet - wenn man die unterschiedlichen Bilddimensionen bedenkt. Da macht es sicher Sinn, für jede Größe eine eigene CSS-Klasse zu nutzen, damit die Bilder zeilen- und spaltenmäßig passend zueinander angeordnet sind.
     
    kalweit, Feb 4, 2007
    #9
Thread Status:
Not open for further replies.

Share This Page