|
|||
Css Bildergalerie Problem mit Ul Li und <br>
Hallo, bin noch relativ neu hier trotzdem hoffe ich das ihr mir helfen könnt...
Ich benötige für eine Internetseite eine kleine Bildergalerie. Da ich kein JS kann und das mit PHP zimelich umständlich sein soll wollte ich dies mit CSS umsetzen. Habe dazu auch schon was gefunden. Hier mal der Link zur veranschaulichung des Problems... http://sea-louce.cwsurf.de/css2.html So wie man vllt sieht möchte ich zu den Bildern noch text eifügen doch das <br> hat auch auswirklungen auf die Auswahlbilder. Gibts eine möglichkeit das zu verhindern. Hier mal der Code. HTML-Code:
<link href="galerie.css" rel="stylesheet" type="text/css"/> <div> <ul> <br> <li> <img src="1.jpg" alt="pic1"> <span> <img src="1.jpg" alt="pic1"> <br> <p class = "galerie">Hallo</p> </span> </li> <li> <img src="2.jpg" alt="pic1"> <span> <img src="2.jpg" alt="pic1"> <br> <p class = "galerie">du</p> <br><br> <br> <p class = "galerie">Hallo</p> </span> </li> <li> <img src="3.jpg" alt="pic1"> <span> <img src="3.jpg" alt="pic1"> </span> </li> <li> <img src="4.jpg" alt="pic1"> <span> <img src="4.jpg" alt="pic1"> </span> </li> </ul </div> HTML-Code:
p.galerie { font-family: Verdana; color: white; font-size: 14; } li { list-style-type:none; } ul { position: relative; width: 600; margin: auto; height: 500; background-color: black; } img { width:100px; height: auto; } span img { display: none; } span p { display:none; } ul li:hover span { position: absolute; top: 20; right: 20; } ul li:hover span img { display:inline; height: 312px; width: auto; } ul li:hover span p { display:inline; } |
Sponsored Links |
|
|||
Geh mal auf dynamicdrive.com da gibt es jede Menge funktionierender Scripte
Mfg gabischatz Geändert von gabischatz (27.04.2011 um 00:49 Uhr) |
Sponsored Links |
|
|||
Du kannst das Problem lösen, indem du in Zeile 11 deines CSS folgendes schreibst:
Code:
li { height: 100px; list-style-type: none; } Funktionieren tut es, ob es aber noch andere Lösungen gibt, die ohne height auskommen, weiß ich nicht |
|
|||
Hallo,
das <br /> brauchst du nicht sätze (display block) ein: Code:
} ul li:hover span img { display: block; height: 300px; width: auto; } ul li:hover span p { display: block; } |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript | chrisol_76 | CSS | 2 | 21.07.2008 18:37 |
Css und Steam Problem | justinlenz | Offtopic | 3 | 27.03.2008 22:58 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |
Dringend: CSS Problem! | zero | CSS | 19 | 31.12.2005 19:34 |