NextGen Gallery macht Probleme ...

Hallo,

ich hoffe mir kann hier jemand helfen :(
Habe das Plugin erfolgreich installiert, kann auch eine Galerie anlgen und Bilder hinzufügen. Aber die Bilder werden dann auf meiner Seite ziemlich weit unten und die einzelnden Bilder zusätzlich noch untereinander angezeigt. Habe keine Befehle für Abstände oder sonstiges drin ... :confused:
Ich hätte die Bilder gerne oben und nebeneinander.
Wie bekomme ich das hin?

Danke im voraus :)

Galerie | Sunny Täter

Das ist ein klassisches float/clear-Problem. ;-) Probier mal folgendes, und bete dass das Layout in den verschiedenen Browsern nicht auseinander fliegt. ;-)

/* wp-content/plugins/nextgen-gallery/css/hovereffect.css (line 115) */


.ngg-galleryoverview {
[COLOR="Red"]clear:both;[/COLOR]
display:block !important;
margin-top:10px;
overflow:hidden;
width:100%;
}

Rote Zeile löschen/auskommentieren.

Sehr schön, jetzt sind die Bilder schonmal oben :)
Aber liegt das jetzt an meinem Stylesheet oder warum sind die Bilder immer noch untereinander und auf der rechten Seite :confused:

Danke schonmal! ;)

Die Bilder sind hier nebeneinander (FF3, WinXP)
Du hast eine Regel in der Theme-eigenen style.css (Zeile 66), die die Regel in der NG-CSS (hovereffect.css, Zeile 140) überschreibt. Schreib mal in der hovereffect.css ein "#content" vor die Regel.

Also irgendwie steht bei mir in der Zeile 66 nichts.
Oder soll da überhaupt etwas stehen :confused:
Das mit der Regel habe ich noch nicht ganz verstanden.
Und für was steht das "#content" ?

So gut kenne ich mich dann doch nicht damit aus ;)

Zitat von Roter

Also irgendwie steht bei mir in der Zeile 66 nichts.

Laut Firebug schon, und zwar das hier:

[B][COLOR="Blue"]/*style.css (line 66) */[/COLOR][/B]


#content img, #contentwide img { 
border:0 none;
[COLOR="green"]float:right;
margin:0 0 10px 10px;[/COLOR]
}

Das mit der Regel habe ich noch nicht ganz verstanden.
Und für was steht das "#content" ?

Das #content erweitert diese Regel um einen Selektor. #content verweist auf eine ID im HTML-Code (content), und hat eine höhere Spezifität. Es findet jeweils die Eigenschaft in der Regel mit der höchsten Spezifität Anwendung. (Das ist ein wichtiger Grundsatz bei komplexen CSS-Layouts.)

Was ich meinte ist das hier:

/* hovereffect.css (line 140) */


[COLOR="Red"]#content[/COLOR] .ngg-gallery-thumbnail img {
background:#FFFFFF none repeat scroll 0 50%;
border-color:#AAAAAA #CCCCCC #DDDDDD #BBBBBB;
border-style:solid;
border-width:1px;
color:inherit;
opacity:0.99;
padding:2px;
vertical-align:top;
}

Das rote einfügen. Dann kannst du in der Regel weitere Style-Angaben machen, z.B. folgende Eigenschaften einfügen:

float:none;
margin:0;

Damit überschreibst du dann die ganz oben grün markierten Eigenschaften, die vermutlich die Darstellung negativ beeinflussen.

Okay, das habe ich jetzt gemacht.
Aber irgendwie werden die Bilder bei mir im FF2und IE immer noch rechts und untereinander angezeigt. Muss bei der .ngg-gallery-thumbnail img noch irgendeinen Befehl angeben?

Oh, ich hab was übersehen, sorry. Änder mal den kopf der Regel wie folgt:

#content .ngg-gallery-thumbnail img, [COLOR="Red"]#contentwide .ngg-gallery-thumbnail img[/COLOR] {

Ahh okay, jetzt sieht die Sache doch schon ganz gut aus! :)
Mit FF3 ist jetzt alles perfekt, mit IE sind die Bilder jetzt auch nebeneinander und links. Nur halt noch etwas weiter unten, wie noch am Anfang beim FF. Aber das ist nicht so schlimm ;)

Mir fällt jetzt nur noch gerade auf beim FF3 ist mein Header leicht versetzt.
Das hat jetzt aber nicht mit der Galerie zu tun oder? :???:

Danke für deine Hilfe :-D

Zitat von Roter

Mir fällt jetzt nur noch gerade auf beim FF3 ist mein Header leicht versetzt.
Das hat jetzt aber nicht mit der Galerie zu tun oder? :???:

Nee nee. da stimmt ne Weitenangabe nicht. Ändere mal:

#top {[I][COLOR="Blue"]style.css (line 16)[/COLOR][/I]
background:transparent url(img/top.jpg) no-repeat scroll 0 0;
color:#333333;
height:300px;
margin:auto;
[COLOR="Red"]width:822px;[/COLOR]
}

width: 822px passt ;)
Du weißt ja alles! :-D
Danke! ;)

Ich? Nö. Mein Orakel nennt sich Firebug. ;-)