galerie ohne frames?

#1 (**permalink**) 24.01.2005, 11:20

hallo,

habe noch keinen plan wie ich das realisieren kann.

links thumbnails und auf klick soll sich das bild in der rechten hälfte öffnen.
wie kann ich das mit css machen?

Code:

<style type="text/css">
body
{
background-color: #A0A0A0;
}

#thumbs
{
position: absolut;
float: left;
margin: 0;
padding: 10px;
border: 8px solid #000;
background-color: #D1D1D1;
}
.images a
{
border: 1px solid #000;
padding: 4px;
}
.images a:hover
{
border-color: #fff;
border-style: dashed;
}

</style>
<body>
<div id="thumbs">
  <div class="images">[img]thumbs/Bild-008.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-009.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-010.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-011.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-012.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-013.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-014.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-015.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-016.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-017.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-018.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-019.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-020.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-022.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-023.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-025.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-026.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-027.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-029.jpg[/img]</div>
  <div class="images">[img]thumbs/Bild-031.jpg[/img]</div>
</div>
</body>
</html>

ein anderes problem: ich möchte gerne das sich die border-color bei hover ändert.
funktioniert mit dem code nur im ie.
hast du eine idee? dann klick schnell auf antwort! es warten tolle preise auf dich! also, worauf wartest du noch! klick auf antworten.....

magick · #2 (**permalink**) 24.01.2005, 11:38

Etwas Lesestoff: http://www.xhtmlforum.de/viewtopic.php?t=1562

#3 (**permalink**) 24.01.2005, 13:10

Zitat:

Zitat von magick

Etwas Lesestoff: http://www.xhtmlforum.de/viewtopic.php?t=1562

hat wenig mit dem zu tun was ich vorhabe.
ich will auf klick und nicht auf mouseover die bilder anzeigen lassen.

mazzo · #4 (**permalink**) 24.01.2005, 13:20

dann setz doch zusätzlich die entsprechnden Werte bei a:active (zusätzlich zu a:hover) oder wo ist das Problem?

#5 (**permalink**) 24.01.2005, 13:29

ich habe ja 2 fragen gestellt. auf welche du antwortest ist mir noch nicht klar?

mazzo · #6 (**permalink**) 24.01.2005, 13:34

meine Antwort bezog sich auf den Wunsch, dass Du nur bei klick das grosse Bild ins andere DIV laden willst.

Wenn Du zusätzlich bei hover noch den Rahmen hervorheben möchtest, guck doch mal bei http://www.stunicholls.myby.co.uk/menus/menufour.html (und dann statt border-right eben nur border benutzen)

#7 (**permalink**) 24.01.2005, 14:00

ok danke!

folgendes problem:

Code:

.images a
{
border: 1px solid #000;
padding: 4px;
}
.images a:hover
{
border: 1px dashed #fff;
}

hier ist der gewünschte effekt perfekt, nur der border legt sich nicht über die thumbs. border liegt dann im unteren drittel des thumbs und auch hinter dem thumb???

Code:

.images
{
border: 1px solid #000;
padding: 4px;
}
.images a:hover
{
border: 1px dashed #fff;
}

bei dieser version ist der erste border #000; vorhanden und der hover-border so wie beim ersten beispiel, hinter den thumbs und im unteren drittel.
tüftel, tüftel...

mazzo · #8 (**permalink**) 24.01.2005, 14:21

hab grad gestern an sowas gebastelt, wo der Border auch um Icons sein sollte und z.T. dahinter stand. Den fertigen Quellcode mit "richtiger" Ansicht kann ich erst heute abend posten.

Es waren aber borderstyles für ein DIV definiert, in dem dann nicht weiter definierte

Tags umrahmt werden. Mit paddings für das betreffende DIV ging es dann, glaub ich. Mehr heute abend.

Dieter · #9 (**permalink**) 24.01.2005, 19:02

Warum erledigst Du es nicht mit HTML? Eine Lösung, die immer und überall funktioniert!

Du legst einfach für jedes Foto eine eigene Datei an und verlinkst diese.

mazzo · #10 (**permalink**) 24.01.2005, 19:46

hier was ich gestern gebastelt hatte:

Code:

<style type="text/css"> 
<!-- 
#gal{
	width: 100px;
	
}

#gal a:link, #gal a:visited {
	border: 1px solid #000000;
	padding-top: 3px;
	margin-top: 3px;
}
#gal a:hover {
	border: 1px solid #FFFFFF;
	padding-top: 3px;
	margin-top: 3px;
} 

--></style>

<div id="gal">


[img]name.gif[/img]</p>


[img]name2.gif[/img]</p>
</div>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS - Galerie funktioniert in Chrome nicht richtig	adipics.de	CSS	1	11.05.2011 00:38
HTML Galerie	Legedenda	CSS	5	12.11.2010 15:47
Frames ohne Frames?	kochi_rulez	CSS	8	11.10.2008 23:08
CSS statt Frames	highlander	CSS	6	08.04.2008 07:01
CSS statt Frames	SPMan	CSS	6	14.06.2007 17:18