Probleme mit einer CSS Bildergalerie (UL Formatierung)

mephisto2k

Hallo ich habe mal wieder ein kleines Problem.

Ich wollte mittels CSS eine Bildergalerie aus einer Unsortierten Liste machen.
Durch meine Google Suche bin ich auf diesen Tipp aufmerksam geworden.

Klingt gut und sieht einfach aus, dachte ich zumindest. Jedoch habe ich das Problem das die Bilder direkt untereinander angeordnet werden. Zwischen Bild und Rahmen habe ich zwar den 3px Abstand, jedoch liegen die Rahmen direkt untereinander an.

Im Gegensatz zum Beispielcode habe ich jedoch die Größenangaben der Bilder weggelassen und habe diese in den HTML-Code gepackt da sich die Bilder in der Größe Teilweise unterscheiden. Außerdem gibt es Bilder im Hoch- und Querformat.

Da ich nicht weiß ob ich mit anderen CSS-Definitionen die für die Galerie definierten aufhebe, poste ich folgend mal meinen CSS-Code. Mein Problemcode befindet sich im unteren drittel des Codes.

Code

/*importiert normalisierung.css*/
@import url("norm.css");


/*Seitenbreite fixieren und Seite zentrieren*/


/*html{
    cursor:crosshair;
}*/


body {
    position: relative;
    margin: 0 auto;            /*Aussenabstand oben & unten ist null*/
    text-align: center;
    width: 1024px;
    Border: 1px solid white;
    background: black;        /*schwarze Seitenfarbe*/
    font-size: 100.01%;
    font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    color: #e9e9e9;
}


/*-------------------- Layoutgrafiken werden plaziert --------------------*/


/*_+++ Kopf Grafik +++ */
div#oben {
    background:url(../images/layout/oben.gif) no-repeat center;
    width: 1024px;
    height: 129px;
}


/*_+++ Mittel Grafik +++ */
div#wrapper {
    background:url(../images/layout/xmitte.gif) repeat-y center;
    /* position: relative; */
    width: 1024px;
    text-align: left;
}


/*_+++ Fuß Grafik +++ */
div#footer {
    background:url(../images/layout/unten.gif) no-repeat bottom;
    height: 105px;
    width: 1024px;
}


h1.logo {
    background: url(../images/layout/logo.png) no-repeat; /*Hintergrundgrafik mit Logo*/
    text-indent: -9999px;    
    /*Der Text wird weit außerhalb des Browser Fensters angezeigt, 
    dafür wird die Hintergrundsgrafik plaziert*/
    width: 326px;
    height: 89px;
    position: relative;
    left: 700px;
    top: 20px;
    padding: 10px;
}


blockquote.info {
    text-indent: -9999px;
    height: 0;
}


/*-------------------- Navigation wird gestaltet --------------------*/
#navi {
    background: url(../images/layout/navi.png) no-repeat;
    position: relative;
    left: 60px;
    float: left;
    width: 151px;
    min-height: 384px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.2em;
}


#unter_navi {
    width: 450px;
    position: relative;
    left: 230px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    padding: 15px;
    text-align: left;
    background-color: white;
}


#unter_navi ul {
    list-style-type: none;
    display: inline;
}


#unter_navi li {
    display: inline;
}


#navi h2, #unter_navi h2{
    text-indent: -9999px;
    height: 0;
}


#navi ul  {
    padding: 40px 5px 20px 20px;
}


#navi ul ul {
    padding: 0px 10px 0px 20px;
}


#navi ul li a:link, 
#navi ul li a:visited,
#navi ul li a:active {
    display: block; /*Links sind ueber gesamte breite der Liste anklickbar*/
    color: #5a6267; /*Dunkelgraue Schriftfarbe*/
    text-decoration: none; /*Loescht Unterstreichung der Links*/
    padding-top: 7px; /*Setzt einen Abstand unter den Links*/
    padding-bottom: 7px; /*Setzt einen Abstand unter den Links*/
}


#unter_navi ul li a:link, 
#unter_navi ul li a:visited,
#unter_navi ul li a:active  {
    color: #5a6267; /*Dunkelgraue Schriftfarbe*/
    text-decoration: none; /*Loescht Unterstreichung der Links*/
}


#navi ul li a:hover, 
#navi ul li a:focus,
#unter_navi ul li a:hover, 
#unter_navi ul li a:focus {
    color: #fff; /*Setzt die Textfarbe der Links beim ueberfahren (hover), 
    bzw. Navigation mittes Tastatur (focus), auf einen anderen Farbwert*/
}


#navi ul li a#current {
    font-weight: bold;
    color: #fff;
}


/*------------------------------- Beginn von Inhalt ----------------------------------*/


/*----------------Anfang Überschriften Gestaltung im Inhaltsbereich ----------------*/
#content_main h2 {
    text-align: center;
    /*margin-right: 140px;*/    
    margin-bottom: 20px;
    font-family: Baskerville, Cambria, "Times New Roman", serif;
    font-weight: 120;
    font-size: 1.4em
}


#content_main h3 {
    text-indent: -9999px;    
}


#content_main h4 {
    text-align: center;
    /*margin-right: 140px;*/
    font-family: Baskerville, Cambria, "Times New Roman", serif;
    font-weight: 100;
    font-size: 1.2em
}
/*----------------Ende Überschriften Gestaltung im Inhaltsbereich ----------------*/


#content_main {
    margin: 0 20px 0 240px;
    min-height: 500px;
    width: 600px;
}


#content_main p {
    font-size: .9em; /*Schriftart ist bereits im body definiert*/
    line-height: 1.3; /*Zeilenabstand (ohne größenangabe = "Wert" * so hoch wie Schriftgröße*/
    /*margin-right: 140px; /*Gibt Abstand zum folge Absatz an*/
    margin-bottom: 10px; /*Gibt Abstand zum folge Absatz an*/
}


#content_main p:first-letter {
    font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
    font-size: 1.3em;
    font-weight: 200;
    color: #9f9f9f;
    line-height: 1;
}


/*-------------- Anfang Listengestaltung des Inhaltes --------------*/
#content_list ul {
    padding-bottom: 20px;
}


#content_list li h4 {
    font-size: 1.3em;
    float: right;
    background: #999999;
    padding: 10px;
    min-height: 40px;
    min-width: 40%;
}

#content_list ul li {
    background: #666666;

}
/*-------------- Ende Listengestaltung des Inhaltes --------------*/
/*-------------- Anfang Galeriegestaltung des Inhaltes --------------*/


/*#galerie li h4 {
    font-size: 1.3em;
    background: #999999;
    padding: 10px;
    min-height: 40px;
    min-width: 40%;*/
}

#galerie li {
    list-style-type: none;
    float: left;
    margin: 0 30px 30px 0;
    text-align: center;
    font-weight: bold;
}


#galerie img {
    display: block;
    padding: 8px;
    border: 1px solid #8B0000;
} 


/*-------------- Ende Galeriegestaltung des Inhaltes --------------*/


/*-------------------------------- Ende von Inhalt -----------------------------------*/


/*-------------------- Fußzeile wird gestaltet --------------------*/
#site_info {
    clear: both;
    /*background: url(../images/navihg.png) repeat;*/
    background-position: center;
    padding-bottom: 15px; 
}


#site_info h4 {
    text-indent: -9999px;
}


div#site_info {
    text-align: center;
    font-size: 0.7em;
    line-height: 1.3em;
}


/*-------------------- Sonstiges --------------------*/


acronym {
    cursor: help;
    border-bottom: 1px dotted white;
}


div#durchgestrichen{
    text-decoration: line-through;
    display: inline;
}

Alles anzeigen

Würde mich freuen wenn mal jemand seinen Kompetenten Blick über den Code wirft.

MfG
mephisto2k

MrMurphy

Hallo,

was soll man daraus ohne den zugehören HTML-Text erkennen können? Außerdem habe zumindest ich keine Lust, mich durch vollkommen überquellenden CSS-Text zu wühlen.

Am besten wäre du stellst das ganze online und verrätst uns den Link, das ist für die Hilfswilligen immer am einfachsten.

Gruss

MrMurphy

mephisto2k

Stimmt mit Link ist es einfacher.

Daher hier der Link

synaptic

lol editier den link oben nochmal... :D:D

mephisto2k

lol
ja das war wohl nichts, aber jetzt sollte es gehen

Link

synaptic

also deine li-elemente sollten da schon floaten.. nur des erste eben nicht.. wobei ne h4 nich in ein li gehört!!

mach die h4 über des ul und lass die li-elemente floaten und danach machste nen clear:boath;

mephisto2k

Okay aber im Bereich "#galerie li" habe ich doch einen float.
Welchen ich nach der Galerie, im HTML-Code, auch wieder durch clearen geschlossen habe. Oder verstehe ich hier etwas falsch?

Code

#galerie li {
    list-style-type: none;
    float: left;
    margin: 0 30px 30px 0;
    text-align: center;
    font-weight: bold;
}


#galerie img {
    display: block;
    padding: 8px;
    border: 1px solid #8B0000;
}

Alles anzeigen

MrMurphy

Hallo,

schmeiss erst mal das "<li><h4>Unheilig</h4></li>" aus der Liste, das hat dort nichts verloren. Das kannst du ja darüber einfügen.

Dann gibst du dem ul eine id:

Zitat

<ul id="gallerie">

Und anschließend fügst du in deine CSS-Datei folgendes ein:

Zitat

#gallerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
}

#gallerie img
{
width: 160px;
height: 107px;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}

Alles anzeigen

Die Rahmenfarbe und Bildergröße kannst du ja anschließend noch anpassen, das sollte kein Problem sein, wenn die Grundlagen erst mal stimmen.

Dann funktioniert das ganze bei mir zumindest. Die gesamte CSS-Datei solltest du dann mal gepflegt aufräumen.

Ich sehe grade, das du schon wieder was geschrieben hast. Vielleicht reicht es auch, wenn du deiner UL einfach die ID vergibst:

Zitat

<ul id="galerie">

Die scheint noch zu fehlen. Ich war einfach zu faul das ganze CSS zu durchsuchen, was du bereits eingefügt hast.

Noch'n Nachtrag: Und beim vorherigen DIV die "id=galerie" rausnehmen, da IDs auf einer Seite nur einmal auftauchen dürfen.

Gruss

MrMurphy

mephisto2k

Das klingt alles ziemlich logisch was du schreibst. Nur leider ist das Ergebnis immer noch das selbe, zumindest bei mir. Die Bilder sind alle untereinander direkt Rahmen an Rahmen. Hier der aktuelle Stand.

Demnach hab ich mir wohl irgendwo noch ein Eigentor geschossen.

Warum sollte man keine Überschrift in einer Liste haben?

MfG
mephisto2k

MrMurphy

Hallo

Zitat

Demnach hab ich mir wohl irgendwo noch ein Eigentor geschossen.

Ja.

Und zwar hast du

Zitat

/*#galerie li h4 {
font-size: 1.3em;
background: #999999;
padding: 10px;
min-height: 40px;
min-width: 40%;*/
}

Alles anzeigen

auskommentiert. Das */ gehört aber hinter die Klammer, also

Zitat

/*#galerie li h4 {
font-size: 1.3em;
background: #999999;
padding: 10px;
min-height: 40px;
min-width: 40%;
}*/

Alles anzeigen

Bei mir funktionierts dann wieder mal. Bei dir hoffentlich auch. Also nicht schlampen - konzentriert arbeiten, auch am Sonntag abend.

Zitat

Warum sollte man keine Überschrift in einer Liste haben?

Weil die sachlich da in diesem Fall einfach nicht hingehört. Die würde z. B. einfach mitfloaten und dann links vom ersten Bild stehen, was wohl eher nicht dein Wunsch ist. Das kannst du ja mal ausprobieren, indem du die wieder in die Liste einfügst.

Gruss

MrMurphy

mephisto2k

Das gibt es doch nicht, ich bin davon ausgegangen das etwas auskommentiertes nicht interpretiert wird, ob jetzt vor oder nach der Klammer.

Damit hast du mich wahrscheinlich der Ursache einiger schon beseitigter Fehler belehrt. Tausend Dank dafür. Was so eine kleine Unachtsamkeit für folgen haben kann.

Zum Thema Überschrift, auf dieser Seite werde ich die Überschrift wahrscheinlich nicht in der Liste brauchen, auf anderen hatte ich das hingegen schon vor. Es sei denn es gibt Argumente die davon abraten.

Tags