Hallo liebe User! :)
Ich versuche seit Stunden etwas zu basteln, bekomme es aber leider nicht hin. Ich habe mich schon dumm und dämlich gegoogelt aber immer wieder verschiedene Sachen gefunden mit Margin und Padding, mal in einem CSS Style und mal mit Style im HTML Image Tag....aber ich bekomme es einfach nicht hin.
Vorweg: Ich habe leider nicht wirklich viel Schimmer von dem HTML Zeug. :( Die letzten 15 Jahre hatte ich eine extrem einfach strukturierte kleine Homepage mit drei Frames, wo ich halt nur ein paar Bilder, ein paar Texte, Überschriften, Absätze und Linien "programmieren" musste. Das habe ich alles mit dem Phase5 HTML Editor erledigt. CSS und PHP waren für mich böhmische Dörfer.
Nun habe ich aber erstmals eine neue Variante des Designs probiert und mir ein Template geladen, das ich nun fülle.
Ich habe noch ein paar Codes für kleinere Bilddarstellungen gefunden, die ich genutzt habe, weil ich gerne meine Thumbnails mit diesen Rahmen versehen wollte.
Bei einer Übersichtsseite, bei der ich immer die gleiche Anzahl an Bildern pro Reihe habe, funktioniert das auch mit diesem CSS Code und Prozentangabe.
Jetzt habe ich aber noch eine andere Seite, bei der ich je Reihe mal mehr und mal weniger Bilder habe. Dementsprechend würde mir die Prozentualanagbe immer unterschiedliche Lücken schmeissen.
Daher habe ich jetzt "float" auf "Left" gesetzt. Allerdings bekomme ich es nicht hin, eine feste "px" Lücke zwischen die Bilder zu bekommen. Die Bilder liegen also nun etwas ineinander, bedingt durch den Rahmen.
Kann mir jemand sagen, wo ich welche EInstellung vornehmen muss um eine feste Lücke zwischen den Bildern zu definieren?
Nicht wundern, wie das alles ausscaut, das ist alles erstmal nur "hingeklatscht", weil ich immernoch am probieren bin. Auch im Code.
Hier kurz um was es geht:
Und hier, warum ich ursprünglich diesen Code genommen habe (für eine andere Unterseite, bei der die Bildermenge pro Reihe identisch ist):
Achso und nochwas. Bei der Seite hier mit den ganzen gleichen Mengen an Bildern....kann ich da den "prozentualen Abstand" rausnehmen und gegen einen festen Abstand austauschen? Denn es kann sein, das noch eine Reihe dazu kommt, die nicht 5, sondern nur 4 Bilder beinhaltet. Und dann wird der Abstand in der Reihe zu gross, weils ja prozentual angegeben ist.
Sonst habe ich ja das Problem hier, wenn ich unterschiedliche Mengen an Bilder pro Reihe habe:
Über Hilfe würde ich mich riesig freuen :)
Vielen Dank und Gruß
Ben
Hier ist der mal der Code von dem Kram:
Ich versuche seit Stunden etwas zu basteln, bekomme es aber leider nicht hin. Ich habe mich schon dumm und dämlich gegoogelt aber immer wieder verschiedene Sachen gefunden mit Margin und Padding, mal in einem CSS Style und mal mit Style im HTML Image Tag....aber ich bekomme es einfach nicht hin.
Vorweg: Ich habe leider nicht wirklich viel Schimmer von dem HTML Zeug. :( Die letzten 15 Jahre hatte ich eine extrem einfach strukturierte kleine Homepage mit drei Frames, wo ich halt nur ein paar Bilder, ein paar Texte, Überschriften, Absätze und Linien "programmieren" musste. Das habe ich alles mit dem Phase5 HTML Editor erledigt. CSS und PHP waren für mich böhmische Dörfer.
Nun habe ich aber erstmals eine neue Variante des Designs probiert und mir ein Template geladen, das ich nun fülle.
Ich habe noch ein paar Codes für kleinere Bilddarstellungen gefunden, die ich genutzt habe, weil ich gerne meine Thumbnails mit diesen Rahmen versehen wollte.
Bei einer Übersichtsseite, bei der ich immer die gleiche Anzahl an Bildern pro Reihe habe, funktioniert das auch mit diesem CSS Code und Prozentangabe.
Jetzt habe ich aber noch eine andere Seite, bei der ich je Reihe mal mehr und mal weniger Bilder habe. Dementsprechend würde mir die Prozentualanagbe immer unterschiedliche Lücken schmeissen.
Daher habe ich jetzt "float" auf "Left" gesetzt. Allerdings bekomme ich es nicht hin, eine feste "px" Lücke zwischen die Bilder zu bekommen. Die Bilder liegen also nun etwas ineinander, bedingt durch den Rahmen.
Kann mir jemand sagen, wo ich welche EInstellung vornehmen muss um eine feste Lücke zwischen den Bildern zu definieren?
Nicht wundern, wie das alles ausscaut, das ist alles erstmal nur "hingeklatscht", weil ich immernoch am probieren bin. Auch im Code.
Hier kurz um was es geht:
Und hier, warum ich ursprünglich diesen Code genommen habe (für eine andere Unterseite, bei der die Bildermenge pro Reihe identisch ist):
Achso und nochwas. Bei der Seite hier mit den ganzen gleichen Mengen an Bildern....kann ich da den "prozentualen Abstand" rausnehmen und gegen einen festen Abstand austauschen? Denn es kann sein, das noch eine Reihe dazu kommt, die nicht 5, sondern nur 4 Bilder beinhaltet. Und dann wird der Abstand in der Reihe zu gross, weils ja prozentual angegeben ist.
Sonst habe ich ja das Problem hier, wenn ich unterschiedliche Mengen an Bilder pro Reihe habe:
Über Hilfe würde ich mich riesig freuen :)
Vielen Dank und Gruß
Ben
Hier ist der mal der Code von dem Kram:
Code:
<!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>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Oswald' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<title>Bilder meines Celica</title>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/lightbox.min.css">
</head>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="#" id="logo">Bilder meines Celica</a>
</div>
<!-- Topnavigation -->
<div id="topnav">
<ul>
<li><a href="index.html">Hauptseite</a></li>
<li><a href="fotos.html">Bilder</a></li>
<li><a href="guides.html">Guides & Storys</a></li>
<li><a href="#">Ausstattung</a></li>
<li><a href="seite.html">Videos</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
<div id="content">
<style type="text/css">
<!--
.bild3 {
display: table;
width: 60%;
}
figure.bilder {
float: left;
border: none;
display: table-cell;
max-width: 160px;
text-align: center;
vertical-align: middle;
}
figure.bilder img {
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
-->
</style>
295mm Avensis Bremse VA
<br><br>
<div class="bild3">
<figure class="bilder">
<a href=""
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/t25tn.jpg">
</a>
</figure>
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/t25tn.jpg">
</a>
</figure>
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/t25tn.jpg">
</a>
</figure>
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/t25tn.jpg">
</a>
</figure>
</div>
<br>
<br>
<br>
Interior
<br><br>
<div class="bild3">
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/inter.jpg">
</a>
</figure>
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/inter.jpg">
</a>
</figure>
</div>
<br>
<br>
<br>
Katalysator Effizienz unter Schwellenwert
<br><br>
<div class="bild3">
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/p0420.jpg">
</a>
</figure>
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/p0420.jpg">
</a>
</figure>
<div class="bild3">
<figure class="bilder">
<a href="seite.html"
title=""><a href="http://s729700182.online.de/fotos/t25bremse.jpg" rel="lightbox">
<img src="http://s729700182.online.de/guidepics/p0420.jpg">
</a>
</figure>
</div>
<script src="js/lightbox-plus-jquery.min.js"></script>
</body>
</div>
<!-- footer -->
<div id="footer">
<!-- Dieser Backlink darf NICHT entfernt werden. DO NOT REMOVE-->
Webseite.de | Designed by <a href="http://freietemplates.de/">freietemplates.de</a>
</div>
</div>
</body>
</html>
