XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Css Bildergalerie Problem mit Ul Li und <br> (http://xhtmlforum.de/showthread.php?t=64440)

newbie88 26.04.2011 17:00

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;
}

Schon mal danke für Hilfe im vorraus.

gabischatz 27.04.2011 00:44

Geh mal auf dynamicdrive.com da gibt es jede Menge funktionierender Scripte
Mfg gabischatz

Borsti 27.04.2011 21:46

Du kannst das Problem lösen, indem du in Zeile 11 deines CSS folgendes schreibst:

Code:

li {
    height: 100px;
    list-style-type: none;
}

Entscheidend ist dabei die Höhe height.
Funktionieren tut es, ob es aber noch andere Lösungen gibt, die ohne height auskommen, weiß ich nicht ;)

K.Roland 28.04.2011 01:53

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;
}

Gruß Roland

K.Roland 28.04.2011 02:02

Das erste br brauchst du auch nicht, ul Padding 20px mitgeben.


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023