zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Css Bildergalerie Problem mit Ul Li und <br>

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.04.2011, 17:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.04.2011
Ort: Bad Salzuflen
Beiträge: 28
newbie88 befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.04.2011, 00:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.04.2011, 21:46
ofHouse
XHTMLforum-Mitglied
 
Registriert seit: 20.04.2011
Beiträge: 128
Borsti befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
LG f

@ofhouse
Mit Zitat antworten
  #4 (permalink)  
Alt 28.04.2011, 01:53
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Lächeln

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
Mit Zitat antworten
  #5 (permalink)  
Alt 28.04.2011, 02:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Das erste br brauchst du auch nicht, ul Padding 20px mitgeben.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:49 Uhr.