Rahmen überträgt sich auf Galerie
0 0 
Felix Riesterer
0 0 Felix Riesterer
Rahmen überträgt sich auf Galerie
Hallo!
Frohes Neues! :)
Erstmal: ich bin noch völliger Anfänger in CSS, deshalb sorry, falls meine Fragestellung konfus oder unklar wird.
Ich bastle grad an einer neuen HP. Diesmal mit CSS.
Ich habe mir eine CSS-Galerie (Baustein) eingefügt. Die Bilder sieht man als
kleine Icons in einer Tabelle. Klickt man sie an, öffnen sich die großen nach vorne...
Nun wollte ich gern einen Rahmen um meine Galerie-Tabellen und den Menü-Leiste (befindet sich horizontal über der Galerie).
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #604c24; }
#a3 { position:absolute; top:50px; left:250px; width:900px; height:1200px;
z-index:3; background-color:#ffffff; }
</style>
Habe es so eingefügt.
Nun habe ich einen Rahmen, alles wunderbar. Bloß ... er überträgt sich auf die geöffneten Galerie-Bilder. Wenn ich eins anklicke, sind das Bild und der weiße Rahmen etc. mit braunen Linien umgeben.
Wie kann ich verhindern, dass sich die Rahmen-Eigenschaft auf die Galerie vererbt??
Die Galerie war ein fertiger Baustein. Im Head-Bereich gibt es einen Verweis auf die gesonderte Seite.
<link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
Wäre dankbar für Tipps.
VG Abby
-
div { border:1px solid #604c24; }
Du gibst damit jedem div einen Rand. Wahrscheinlich ist auch alles in einem div, was jetzt einen ungewollten Rand hat.
Gib deinen divs mit gewünschtem Rand eine "class" und definieren den Rand dann nur in dieser Klasse:
.divmitrand div { border:1px solid #604c24; }-
Hallo!
Ja, die Galerie steckt wohl in diesem ersten div.
Wie aber kann ich für die Galerie ein eigenes div erstellen, wenn sie nur verlinkt ist? Der Code steht ja nicht in meinem Dokument ... muss ich dann an dem Galerie-Baustein herumschreiben? ...Tausend Fragezeichen.
Aber danke schonmal.
Ich könnte auch eine Beispiel-Link schicken, wie ich es gerne hätte. Das aber dann nur per Mail. Danke.
-
-
Liebe(r) AbbyHH,
Erstmal: ich bin noch völliger Anfänger in CSS
dann wäre es meiner Meinung nach noch viel wichiger, wie das dazu passende (X)HTML aussieht. Meiner Erfahrung nach basteln "Anfänger" das tollste div-Gesuppe, was nicht immer sinnvoll ist. Als Vergleich einfach einmal eine Galerie von mir, in der eine "sinnvolle" Dokumentstruktur genutzt wird:
Beispiel-GalerieOft handeln sich "Anfänger" wegen einer nicht besonders sinnvollen Dokumentstruktur ungewollte Probleme ein. Also zeig doch etwas HTML-Code von Dir oder - noch besser - verlinke eine Beispielseite!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
so sieht mein Dokument momentan aus (keinen Schock bekommen :)):
<html>
<head><script type="text/javascript" src="lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox2/js/lightbox.js"></script><style type="text/css">
<!--
body {
background-color: #ffffff;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
body,td,th {
color: #604c24;
}
a:link {
color: #604c24;
}
a:visited {
color: #571042;
}
a:hover {
color: #604c24;
}
a:active {
color: #571042;
}
-->
</style><style>
#rundrum {
border-width:1px;
border-style:solid;
border-color:#604c24;
padding-top:2.5em;
padding-left:1px;
padding-bottom:30px;
text-align:justify;
</style><style>
a.menu { margin-bottom:650px; text-align:center; width:30px;
border-style:ridge; border-width:1; padding:30px; text-decoration:none; }
a.menu:link { color:#604c24; background-color:transparent; }
a.menu:visited { color:#571042; background-color:transparent; }
a.menu:hover { color:#604c24; background-color:#e0cfdb; }
a.menu:active { color:#571042; background-color:#e0cfdb; }
</style><style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid }#a3 { border:2px border-style:solid; border-color:#604c24; position:absolute; top:50px; left:250px; width:900px; height:1200px;
z-index:3; background-color:#ffffff; }</style>
<style>
a.menu2 { margin-bottom:650px; text-align:center; width:650px;
border-style:ridge; border-width:1; padding:10px; text-decoration:none; }
a.menu2:link { color:#604c24; background-color:transparent; }
a.menu2:visited { color:#571042; background-color:transparent; }
a.menu2:hover { color:#604c24; background-color:#e0cfdb; }
a.menu2:active { color:#571042; background-color:#e0cfdb; }
</style><link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
<title>Anne Bernhardi - Illustration, Grafik & Malerei</title>
</head><body><br>
<br>
<div id="a3"><br><br><br>
<table align=center width="650">
<tr>
<td><a class="menu" href="index.html">Home</a></td>
<td><a class="menu" href="illustration.htm">Illustration</a></td>
<td><a class="menu" href="links/index.htm">Malerei</a></td>
<td><a class="menu" href="links/index.htm">Biografie</a></td>
<td><a class="menu" href="mailto:name@domain.de">Kontakt</a></td>
<td><a class="menu" href="links/index.htm">Impressum</a></td>
</tr>
</table>
<br><br>
<table>
</table><table align=center width="650">
<tr>
<td width="219"><a class="menu2" href="index.htm">Buchcover</a></td>
<td width="219"><a class="menu2" href="index.htm">Einzelprojekte</a></td>
<td width="219"><a class="menu2" href="index.htm"><font color="#9e7548">Bücher</font></a></td>
</tr>
</table><br>
<br><br>
<br>
<br>
<table>
</table><br>
<br>
<br><table align=center border=0>
<tr>
<td><font color=#604c24>Die Kelten - 2009</font></td>
</tr>
<tr>
<td>
<a href="images2/angriff.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/angriff.jpg" /></a>
<a href="images2/barden.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/barden.jpg" /></a>
<a href="images2/boud.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/boud.jpg" /></a>
<a href="images2/charaganz.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/charaganz.jpg" /></a>
<a href="images2/dorf.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/dorf.jpg" /></a>
<a href="images2/waffen.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/waffen.jpg" /></a>
<a href="images2/keltboss.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/keltboss.jpg" /></a>
</td></tr>
<tr>
<td>
<a href="images2/opfer.jpg" rel="lightbox[roadtrip]" title="Opfer"><img src="thumbnails/opfer.jpg" /></a>
<a href="images2/frauzusammen.jpg" rel="lightbox[roadtrip]" title="Frauenkleider" ><img src="thumbnails/frauzusammen.jpg" /></a>
<a href="images2/pferde.jpg" rel="lightbox[roadtrip]" title="Pferde"><img src="thumbnails/pferde.jpg" /></a>
<a href="images2/halle.jpg" rel="lightbox[roadtrip]" title="Festhalle"><img src="thumbnails/halle.jpg" /></a>
<a href="images2/tiere.jpg" rel="lightbox[roadtrip]" title="Tiere" ><img src="thumbnails/tiere.jpg" /></a>
<a href="images2/mannzusammen.jpg" rel="lightbox[roadtrip]" title="Mannskleider"><img src="thumbnails/mannzusammen.jpg" /></a>
<a href="images2/goetter.jpg" rel="lightbox[roadtrip]" title="Goetter" ><img src="thumbnails/goetter.jpg" /></a>
</td>
</tr>
</table><br><br><br>
<table align=center>
<tr>
<td><font color=#604c24>Liontu - 2009-2010</font></td>
</tr>
<tr>
<td>
<a href="images2/liontu.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/liontu.jpg" /></a>
<a href="images2/buch3-12.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-12.jpg" /></a>
<a href="images2/buch3-22.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-22.jpg" /></a>
<a href="images2/buch3-32.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-32.jpg" /></a>
<a href="images2/buch3-42.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-42.jpg" /></a>
<a href="images2/buch3-52.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-52.jpg" /></a>
<a href="images2/buch3-62.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-62.jpg" /></a>
</td>
</tr>
<tr>
<td>
<a href="images2/buch3-72.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-72.jpg" /></a>
<a href="images2/buch3-82.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/buch3-82.jpg" /></a>
<a href="images2/ianthewein.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/ianthewein.jpg" /></a>
<a href="images2/johannes.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/johannes.jpg" /></a>
<a href="images2/jacobi5.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/jacobi5.jpg" /></a>
<a href="images2/graalfs.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/graalfs.jpg" /></a>
<a href="images2/georgsitzend.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/georgsitzend.jpg" /></a>
</td>
</tr>
<tr>
</table><br><br><br><br><br><br>
</div>
</body>
</html>Vieles durcheinander, da ich momentan noch viel probiere.
Die Galerie habe ich nicht selbst erstellt. Das war ein fertige Baustein, den man sich im Netz kopieren konnte. Deshalb weiß ich auch nicht, wie ich da noch was verändern kann.Danke!
Viele Grüße
Anne-
Liebe Anne,
so sieht mein Dokument momentan aus (keinen Schock bekommen :)):
nö, damit hatte ich gerechnet. Schauen wir uns die Dinge etwas genauer an.
<script type="text/javascript" src="lightbox2/js/prototype.js"></script> <script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="lightbox2/js/lightbox.js"></script>
Dagegen sage ich nichts. Du wirst wissen, was Du alles brauchst - und was das lightbox-Script braucht.
<style type="text/css"> <!-- body { background-color: #ffffff; }
Du möchtest CSS-Code lieber in eine externe Datei [ref:self812;css/formate/einbinden.htm#separat@title=auslagern]. Dadurch kannst Du alle Deine <style>-Elemente in einer externen Datei abhandeln und Dein HTML-Dokument seeeehr viel übersichtlicher werden lassen.
.style1 {
Es hat sich gezeigt, dass solche nichtssagenden Klassennamen auch nicht wirklich nützlich sind.
#rundrum { [...] a.menu {
Das sieht viel sinnvoller aus.
<link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
Bindet das Lightbox2-Script diese CSS-Datei nicht selbständig ein? Naja, hier siehst Du jedenfalls, wie Du Dein eigenes Stylesheet (Deine externe CSS-Datei) in Dein Dokument einbinden kannst.
<body>
<br> <br> <div id="a3">
Aua. Wozu diese <br />-Elemente? Willst Du einen Abstand? Das löst man mit CSS! Dazu treibst Du doch diesen ganzen Aufwand!
<table align=center width="650">
Wie eine Tabelle aussieht ist auch eine Frage des CSS, nicht aber von veralteten Attributen! Hier ist das aber völlig unerheblich, da Du diese Tabelle eh komplett entsorgen wirst.
<td><a class="menu" href="index.html">Home</a></td>
Wie man eine Navigation sinnvoll erstellt siehst Du hier: [ref:self812;css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten]
<td><a class="menu" href="mailto:name@domain.de">Kontakt</a></td>
Mitten in der Navi einen mailto-Link? Das ist böse! Da passiert bei mir nämlich nix! Und wenn doch, dann öffnet sich Outlook Express, welches bei mir nie benutzt wird und dessen Öffnen für mich nur störend und keinesfalls zielführend ist.
<td><a class="menu" href="links/index.htm">Impressum</a></td>
Verpacke Deinen Kontakt-Link hier ins Impressum. Da gehört er auch hin! Du darfst diesen Navi-Punkt auch "Kontakt/Impressum" nennen.
</table> <br><br> <table> </table>
??? (Schmeiß das raus!)
<table align=center width="650"> <tr> <td width="219"><a class="menu2" href="index.htm">Buchcover</a></td>
Auch das ist ein Fall wie oben. Arbeite das Kapitel einmal durch! Du wirst viel dabei lernen!
<table align=center border=0> <tr> <td><font color=#604c24>Die Kelten - 2009</font></td> </tr>
Oho! War das eben eine Überschrift? Die sieht aber normalerweise so aus:
<h1>Die Kelten - 2009</h1>Die Tabelle entsorgst Du prompt. Sie hat hier layout-technische Funktion und wird im Grunde missbraucht. Tabellen sind ein Werkzeug zur Darstellung tabellarischer Daten. Zum Layouten benutzen wir ja CSS, da braucht es keine Tabelle (mehr).
<td> <a href="images2/angriff.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/angriff.jpg" /></a> <a href="images2/barden.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/barden.jpg" /></a>
Aha, hier kommt nun also die eigentliche Galerie. Da empfehle ich Dir, dass Du Dir den Quelltext meines Beispiels anschaust. Damit sollte Dein Code dann sinnvoller werden.
<table align=center> <tr> <td><font color=#604c24>Liontu - 2009-2010</font></td> </tr>
Ist das ein Copyright-Hinweis? Das sollte dann ein simpler Textabsatz sein:
<p>Liontu - 2009-2010</p>Oder meintest Du schon wieder eine Überschrift...?Vieles durcheinander, da ich momentan noch viel probiere.
Klar. Denke in Dokumentstruktur. Dann wird Dein Dokument wesentlich übersichtlicher.
Die Galerie habe ich nicht selbst erstellt. Das war ein fertige Baustein, den man sich im Netz kopieren konnte. Deshalb weiß ich auch nicht, wie ich da noch was verändern kann.
Also fangen wir an:
<!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" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Die Kelten - Anne Bernhardi - Illustration, Grafik & Malerei</title> <script type="text/javascript" src="lightbox2/js/prototype.js"></script> <script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="lightbox2/js/lightbox.js"></script> <link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="layout.css" type="text/css" media="screen" /> </head> <body> <div id="inhalt"> <h1>Die Kelten - 2009</h1> <div class="galerie"> <p> <a href="images2/angriff.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/angriff.jpg" alt="Angriff der Kelten" /></a> ein Angriff der Kelten </p> <p> <a href="images2/barden.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/barden.jpg" alt="keltische Barden" /></a> keltische Barden </p> <p> <a href="images2/boud.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/boud.jpg" alt="" /></a> Boud </p> <p> <a href="images2/charaganz.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/charaganz.jpg" alt="" /></a> Chara ganz </p> <p> <a href="images2/dorf.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/dorf.jpg" alt="keltisches Dorf" /></a> ein keltisches Dorf </p> <p> <a href="images2/waffen.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/waffen.jpg" alt="keltische Waffen" /></a> keltische Waffen </p> <p> <a href="images2/keltboss.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/keltboss.jpg" alt="keltischer Anführer" /></a> ein keltischer Anführer </p> </div> <h2>Liontu - 2009-2010</h2> <div class="galerie"> <p><a href="images2/liontu.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/liontu.jpg" alt="" /></a></p> <p><a href="images2/buch3-12.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-12.jpg" alt="" /></a></p> <p><a href="images2/buch3-22.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-22.jpg" alt="" /></a></p> <p><a href="images2/buch3-32.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-32.jpg" alt="" /></a></p> <p><a href="images2/buch3-42.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-42.jpg" alt="" /></a></p> <p><a href="images2/buch3-52.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-52.jpg" alt="" /></a></p> <p><a href="images2/buch3-62.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-62.jpg" alt="" /></a></p> <p><a href="images2/buch3-72.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-72.jpg" alt="" /></a></p> <p><a href="images2/buch3-82.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-82.jpg" alt="" /></a></p> <p><a href="images2/ianthewein.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/ianthewein.jpg" alt="" /></a></p> <p><a href="images2/johannes.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/johannes.jpg" alt="" /></a></p> <p><a href="images2/jacobi5.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/jacobi5.jpg" alt="" /></a></p> <p><a href="images2/graalfs.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/graalfs.jpg" alt="" /></a></p> <p><a href="images2/georgsitzend.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/georgsitzend.jpg" alt="" /></a></p> </div> </div> <div id="navi"> <h2>Navigation</h2> <ul id="hauptmenue"> <li><a href="index.html">Home</a></li> <li><a href="illustration.htm">Illustration</a></li> <li><a href="links/index.htm">Malerei</a></li> <li><a href="links/index.htm">Biografie</a></li> <li><a href="links/index.htm">Kontakt/Impressum</a></li> </ul> <h2>weitere Seiten</h2> <ul id="untermenue"> <li><a href="index.htm">Buchcover</a></li> <li><a href="index.htm">Einzelprojekte</a></li> <li><a href="index.htm" class="ausgewaehlt">Bücher</a></li> </ul> </div> </body> </htmlDas passende CSS können wir hier auch gemeinsam erarbeiten, wenn Du Dich dazu überreden kannst Deine Dokumentstruktur auf meinen Vorschlag hin umzurüsten.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
[latex]Mae govannen![/latex]
<div class="galerie">
<p>
<a href="images2/angriff.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/angriff.jpg" alt="Angriff der Kelten" /></a>
ein Angriff der Kelten
</p>
<p>
<a href="images2/barden.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/barden.jpg" alt="keltische Barden" /></a>
keltische Barden
</p>[...]
</div>
*Idee weiterspinn'*
Hier könnte man sogar soweit gehen, die Galerie ebenfalls als Liste anzusehen (Eine Auflistung von Bildern [und deren Beschreibung])
<ul class="galerie"> <li> <a href="images2/angriff.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/angriff.jpg" alt="Angriff der Kelten" /></a> ein Angriff der Kelten </li> <li> <a href="images2/barden.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/barden.jpg" alt="keltische Barden" /></a> keltische Barden </li> </ul>Ist aber letztlich eine Sache, über die man streiten kann. Ich bevorzuge hier Listen, an der Struktur ändert sich ja sonst nichts (div wird zu ul und p wird zu li).
Cü,
Kai
--
Even if you are a master of jQuery, you can only create mediocre (at best)
scripts. The problem is that the authors you rely on have not mastered the
DOM themselves. It's like one blind guy leading another off a cliff (D.Mark/clj)
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?-
Danke schonmal! :) Da muss ich mich erst mal durcharbeiten.
Das kann dauern. ;)Ich melde mich dann in 2 Monaten noch mal.Ich hätte die Bilder nur gern nebeneinander, und nicht bloß
untereinander (quasi 7 in einer Reihe nebeneinander, darunter wieder 7 in einer Reihe, dann etwas Abstand, dann neue Gruppe Bilder (2x7)... oder würde das CSS-Dokument die weitere Formatierung übernehmen??-
[latex]Mae govannen![/latex]
Danke schonmal! :) Da muss ich mich erst mal durcharbeiten.
Das kann dauern. ;)Ich melde mich dann in 2 Monaten noch mal.Ich hätte die Bilder nur gern nebeneinander, und nicht bloß
untereinander (quasi 7 in einer Reihe nebeneinander, darunter wieder 7 in einer Reihe, dann etwas Abstand, dann neue Gruppe Bilder (2x7)... oder würde das CSS-Dokument die weitere Formatierung übernehmen??Das könntest du mit CSS machen (nth-child), das funktioniert aber in älteren und unfähigen Browsern nicht. Oder alternativ jedem 7. Bild eine spezielle Klasse geben (was aber dann Probleme macht, wenn du neue Bilder irgendwo einfügst statt nur hinten anzuhängen).
Ich würde dir allerdings dazu raten, auf eine feste Anzahl Bilder pro Reihe zu verzichten, weil du nie weißt, wie die Anzeigebreite beim Betrachter deiner Seite ist. Der müßte dann eventuell immer scrollen, um die rechtsliegenden Bilder ansehen zu können.
Falls du trotzdem eine feste Anzahl Bilder willst, kann man das mit entsprechendem CSS erreichen. Frag dann nochmal nach.
Wenn du die li- (oder in Felix' Beispiel die p-Elemente mit
display: inline-blockoder mitfloat: leftversiehst, passt sich die Anzahl der Bilder automatisch an die Viewport-Breite an, um es immer gleich aussehen zu lassen gegebenenfalls dem li-/p-Element eine feste Breite geben (wobei es meiner Meinung nach besser aussieht, wenn den Vorschaubildern grundsätzlich die gleiche Breite gegeben wird, es gibt Programme, die diese aus beliebigen Formaten erzeugen und gegebenenfalls passend Rand hinzufügen).Cü,
Kai
--
Even if you are a master of jQuery, you can only create mediocre (at best)
scripts. The problem is that the authors you rely on have not mastered the
DOM themselves. It's like one blind guy leading another off a cliff (D.Mark/clj)
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?-
Lieber Kai345,
Ich hätte die Bilder nur gern nebeneinander[...]
Wenn du die li- (oder in Felix' Beispiel die p-Elemente mit
display: inline-blockoder mitfloat: leftversiehst, passt sich die Anzahl der Bilder automatisch an die Viewport-Breite anaufgrund ebengenau dieser Idee hatte ich ja meine Beispiel-Galerie verlinkt.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Ich denke, ich fang lieber erst noch mal bei 0 an. Verstehe nämlich leider nichts von alle dem. Und Zeit mich groß reinzuarbeiten, fehlt mir momentan leider. :(
Trotzdem danke!
Leider entspricht auch die gezeigte Galerie nicht dem, was ich gerne hätte.
Nichts für ungut.-
Liebe Anne,
Ich denke, ich fang lieber erst noch mal bei 0 an.
hmm, das klingt nach "ich gebe auf, weil ihr nicht so tanzt, wie ich spiele"... Was passt Dir an meinem Vorschlag nicht?
Verstehe nämlich leider nichts von alle dem.
Von was? Von CSS? Das braucht das Übliche: Zeit, Geduld und Lernbereitschaft.
Und Zeit mich groß reinzuarbeiten, fehlt mir momentan leider. :(
Das überlasse ich Dir.
Leider entspricht auch die gezeigte Galerie nicht dem, was ich gerne hätte.
Nichts für ungut.Wie es aussehen soll, ist nur eine Frage des Gestaltens mittels CSS. Die Dokumentstruktur ist dabei weniger wesentlich. Mit der von mir vorgeschlagenen Struktur solltest Du gestalterisch alle Möglichkeiten haben - vorausgesetzt, Du bist Willens.
Wenn Du aber nicht dazulernen willst, dann hast Du hier an der falschen Adresse gefragt, das gebe ich gerne zu.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
-
-
-
-