Anfängerfrage: Zentrierung in Galerie und Border-Problem

goldbeere · #1 (**permalink**) 04.11.2013, 15:10

Halli Hallo,
auf der Suche nach meinem Problem bin ich auf dieses Forum gestoßen. Ich hoffe, ihr könnt mir hier bei meinem Problem helfen.
Ich bin dabei, mir mit CSS eine kleine Galerie zu basteln und da es im Internet ja viele gibt, habe ich mir eine Vorlage rausgesucht und diese, meinen Wünschen entsprechend, verändert. Hat auch alles mit ein bisschen Probieren sehr gut geklappt.
Nun bin ich aber auf ein Problem gestoßen, welches ich einfach nicht hinkriege:
Durch den mouse-over Effekt, wird in der Galerie unten das Bild angezeigt, ich hätte es gerne mittig. Außerdem verschwinden der untere und rechte Rand des Rahmens, wenn ich ein Bild unten geöffnet habe.
Kann mir jemand sagen, woran das liegt und wie ich das Problem lösen kann?

Und nachfolgend der CSS Code:

Code:

/* choose a suitable font and center the #container div in Internet Explorer */
body {
   text-align:center; 
   font-family: georgia; arial, sans-serif; 
   font-size:76%; 
   letter-spacing:0.05em;
   }
   
/* The containing box for the gallery. */
#container {
    position:relative; 
    width:750px; 
    height:750px; 
    margin:5px auto 0 auto; 
    border:1px solid #aaa; 
    }

/* Removing the list bullets and indentation */
#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }

/* Remove the images and text from sight */
#container a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:-1px; 
    left:-1px; 
    overflow:hidden; 
    background:#fff;
    }

/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }
#container a.slidea {
    background:url(/Images/Blog/Leberwurst/Leberwurst1_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slideb {
    background:url(/Images/Blog/Leberwurst/Leberwurst2_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidec {
    background:url(/Images/Blog/Leberwurst/Leberwurst3_thumb.jpg); 
    height:60px; 
    width:45px;
    }
#container a.slided {
    background:url(/Images/Blog/Leberwurst/Leberwurst4_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slided {
    width:91px; 
    w\idth:93px;
    }
#container a.slidee {
    background:url(/Images/Blog/Leberwurst/Leberwurst5_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidef {
    background:url(/Images/Blog/Leberwurst/Leberwurst6_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slidef {
    width:91px; 
    w\idth:93px;
    }
#container a.slideg {
    background:url(/Images/Blog/Leberwurst/Leberwurst7_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slideh {
    background:url(/Images/Blog/Leberwurst/Leberwurst8_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidei {
    background:url(/Images/Blog/Leberwurst/Leberwurst9_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidej {
    background:url(/Images/Blog/Leberwurst/Leberwurst10_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidek {
    background:url(/Images/Blog/Leberwurst/Leberwurst11_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slidek {
    width:91px; 
    w\idth:93px;
    }
#container a.slidel {
    background:url(/Images/Blog/Leberwurst/Leberwurst12_thumb.jpg); 
    height:60px; 
    width:45px;
    }
#container a.slidem {
    background:url(/Images/Blog/Leberwurst/Leberwurst13_thumb.jpg); 
    height:60px; 
    width:45px;
    }

#container a.sliden {
    background:url(/Images/Blog/Leberwurst/Leberwurst14_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slideo {
    background:url(/Images/Blog/Leberwurst/Leberwurst15_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidep {
    background:url(/Images/Blog/Leberwurst/Leberwurst16_thumb.jpg); 
    height:60px; 
    width:45px;
    }
* html #container a.slidep {
    width:91px; 
    w\idth:93px;
    }
#container a.slideq {
    background:url(/Images/Blog/Leberwurst/Leberwurst17_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slider {
    background:url(/Images/Blog/Leberwurst/Leberwurst18_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slides {
    background:url(/Images/Blog/Leberwurst/Leberwurst19_thumb.jpg); 
    height:60px; 
    width:45px;
    }
#container a.slidet {
    background:url(/Images/Blog/Leberwurst/Leberwurst20_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slidet {
    width:91px; 
    w\idth:93px;
    }
#container a.slideu {
    background:url(/Images/Blog/Leberwurst/Leberwurst21_thumb.jpg); 
    height:60px; 
    width:80px;
    }

/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
    width:750px; 
    height:300px;
    }
#container li {
    float:left;
    }

/* move the thumbnails into the correct position */
#container ul {
    margin:5px; 
    float:none;
    }

/* change the thumbnail border color */
#container a.gallery:hover {
    border:1px solid #fff; 
    }

/* styling the :hover span */
#container a.gallery:hover span {
    position:absolute; 
    width:750px; 
    height:750px; 
    top:200px; 
    left:15px; 
    color:#000; 
    background:#fff;
    }

#container a.gallery:hover img {
    border:1px solid #fff; 
    float:left; 
    margin-right:5px;
    }
	
#container {
    background:#fff url(Images/Blog/Leberwurst/LeberwurstTitel.jpg) 50px 230px no-repeat;
    }

Wenn wir schon dabei sind, vielleicht kann mir jemand ganz kurz sagen, wann ich genau beim Erstellen der Thumbnails den Teil * html #container a.slidef zur Formatierung im IE einfügen muss?

Ok, das waren aber nun alle Fragen. Vielen Dank für eure Mühe schon mal

Viele Grüße
Goldbeere

explanator · #2 (**permalink**) 04.11.2013, 15:27

Ändere im CSS folgenden Abschnitt wie folgt:

Code:

#container a.gallery:hover img {
    border: 1px solid rgb(255, 255, 255);
    margin: 0 auto;
    display: block;
}

und

Code:

#container a.gallery:hover span {
    position: absolute;
    top: 200px;
    left: 0px;
    color: rgb(0, 0, 0);
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    width: 750px;
    height: 750px;
}

goldbeere · #3 (**permalink**) 04.11.2013, 15:32

Ach super! Vielen Dank, jetzt ist es genau so, wie ich es wollte

goldbeere · #4 (**permalink**) 04.11.2013, 20:07

Guten Abend nochmal,

jetzt im Einspielen hat sich noch eine Frage ergeben.

Und zwar möchte ich die Galerie auf meinem Wordpress Blog einbinden, auf dem Server funktioniert alles prima, hab's schon extern getestet.
Sobald ich es aber bei Wordpress als HTML Datei einbinden möchte, funktioniert die Galerie nicht mehr. Dazu muss ich sagen, dass vor dem CSS-Part noch etwas Text in HTML steht.

Habe ich die Galerie unten positioniert, wird sie gar nicht erst erkannt. Es ist lediglich das "Pausenbild" meiner Galerie zu sehen, also das Bild, wenn die Maus über keinem Thumbnail ist, und dieses Bild wird dann auch noch direkt oben hinter dem Text angezeigt. Außerdem ist der Inhalt am unteren Seitenende abgeschnitten. Man kann nicht scrollen, um an den Rest des Textes zu gelangen.

Habe ich die Galerie oben positioniert, funktioniert sie an sich gut, aber der gesamte Inhalt ist am unteren Seitenende abgeschnitten, der Text also gar nicht nicht sichtbar und nicht einmal die vollständige Galerie.

Hat jemand sowas schon mal gehört und eine Idee, woran es liegen könnte?

Viele Grüße
Goldbeere

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
z-index Problem in Kombination mit automatischer zentrierung	contra	CSS	10	07.03.2013 14:07
Problem mit border...	Mr.Right	CSS	3	22.10.2005 14:39
float Problem?	cgdesign	CSS	2	18.10.2005 18:51
CSS Problem mit Firefox: Ausblenden von Border bei Tabellen	MrCage	CSS	2	13.04.2005 18:16
Problem mit position: fixed und Zentrierung unter Opera	andelal	CSS	12	06.03.2005 20:30