Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Probleme mit einer CSS Bildergalerie (UL Formatierung)

  1. #1
    Teeny
    Registriert seit
    20.06.2010
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Probleme mit einer CSS Bildergalerie (UL Formatierung)

    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;
    }
    Würde mich freuen wenn mal jemand seinen Kompetenten Blick über den Code wirft.

    MfG
    mephisto2k
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    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

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    20.06.2010
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    Stimmt mit Link ist es einfacher.

    Daher hier der Link
    Geändert von mephisto2k (27.06.2010 um 22:41 Uhr)

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    lol editier den link oben nochmal...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    20.06.2010
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

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

    Link

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    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;
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    20.06.2010
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    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;
    }
    Geändert von mephisto2k (27.06.2010 um 23:08 Uhr)

  8. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    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:

    <ul id="gallerie">
    Und anschließend fügst du in deine CSS-Datei folgendes ein:

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

    <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
    Geändert von MrMurphy (27.06.2010 um 23:26 Uhr)

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    20.06.2010
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    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

  10. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Probleme mit einer CSS Bildergalerie (UL Formatierung)

    Hallo

    Demnach hab ich mir wohl irgendwo noch ein Eigentor geschossen.
    Ja.

    Und zwar hast du

    /*#galerie li h4 {
    font-size: 1.3em;
    background: #999999;
    padding: 10px;
    min-height: 40px;
    min-width: 40%;*/
    }
    auskommentiert. Das */ gehört aber hinter die Klammer, also

    /*#galerie li h4 {
    font-size: 1.3em;
    background: #999999;
    padding: 10px;
    min-height: 40px;
    min-width: 40%;
    }*/
    Bei mir funktionierts dann wieder mal. Bei dir hoffentlich auch. Also nicht schlampen - konzentriert arbeiten, auch am Sonntag abend.

    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
    Geändert von MrMurphy (28.06.2010 um 00:04 Uhr)

Ähnliche Themen

  1. Probleme mit Blog Formatierung
    Von Al-Capone im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 06.05.2010, 17:51
  2. Anpassung einer HTML Datei mit Bildergalerie
    Von Klapp_Spaten im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 20.04.2010, 23:12
  3. "Formatierung" einer Variable
    Von Dark_Dog im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 07.05.2007, 20:49
  4. Probleme bei der Formatierung des Rechners
    Von Alucard im Forum Computer - Internet Forum
    Antworten: 11
    Letzter Beitrag: 27.02.2006, 11:45
  5. Probleme mit der Bildergalerie / PPA 0.5.6.
    Von oemmes im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 19.01.2006, 20:13

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •