category title is not centered

[MachDirEinBild]

Hi,

The thumbnails at category view are centered to the content by adding a left padding depends on columns of thumbnail and content widths.
Thats okay. But the page header has the them padding on the left. So the width of the header reaches from content left minus padding to content right. This is wider than the thumbnails width. Because of the title is centered to the page header, it is not centered to the thumbnails.
For me the page header should not padding to the left like the thumbnails. He should have the full width of the content.

And now my problem. How can I do so.



Alex.

[christine]

Hallo Alex,

Nachdem Dein Avatar deutschprachig ist .... deutsch weiter.

So the width of the header reaches from content left minus padding to content right. This is wider than the thumbnails width. Because of the title is centered to the page header, it is not centered to the thumbnails.

versuche mir davon ein Bild zu machen

Kannst Du bitte eine URL einstellen, sodass man das sehen kann? Danke.
Kommt ja auch u.a. auf das Template an usw.

Liebe Grüße, Christine

[MachDirEinBild]

Hai,

die Seite ist leider noch nicht online. Das wird sich aber demnächst ändern.
Ich poste dann den Link hier, wenn es soweit ist

Gruß, Alex.

[MachDirEinBild]

Hai,
jetzt bin ich online.

http://tennis3.alex.yourweb.de/index.ph ... laudenbach

Die Thumbnails zentrieren sich seitenmittig. Das ist gut so. Aber die Überschrift sollte auf der linken Seite linksbündig unter dem Logo beginnen.
Oder rechts mit den Thumbnails bündig abschliessen.


Alex.

[christine]

Hallo Alex,

Aber die Überschrift sollte auf der linken Seite linksbündig unter dem Logo beginnen.

zunächst mal: Die Überschrift ist (eigentlich) zentriert. Sieht halt nicht so danach aus, weil Du ein padding-left: 100px, reingegeben hast.

Ist ja ein ganzer "Block" im: divt3-content.t3-content.col-xs-12 & bootstrapmäßig BS3 dementsprechend aufgeteilt. Die Überschrift ist ja dabei.

Du kannst jetzt nur ausprobieren. Anbei 2 Muster (musst halt ausprobieren) [in die template.css]:

Code: Select all

#phocagallery.pg-category-view.pg-cv .page-header h1 {
padding-right:380px;  
}

oder (ev. besser):

Code: Select all

#phocagallery.pg-category-view.pg-cv .page-header {
padding-right:110px; 
}

Liebe Grüße, Christine

[MachDirEinBild]

Hai Christine,

Der Wert für padding-left scheint sich in Abhängigkeit von der Bildschirmbreite, bzw. von der Breite des Contents zu berechnen.
Deshalb kann keinen sinnvollen Wert für padding-right vorgeben.

Statt komplett #phocagallery.pg-category-view.pg-cv nach rechts zu schieben, würde es reichen, #pg-msnr-container nach rechts zu schieben, um die Thumbnails zu zentrieren.

Ich nehme aber fast an, das sich das nicht mit CSS machen lässt. Das muss dort geändert werden, wo der Wert für das padding-left berechnet wird.


Gruß, Alex.

[christine]

Hallo Alex,

ja, das mit padding und/oder margin ist immer ein Problem, da ja die PG auf Responsivität aufgebaut ist.

a) Kommt ja auch darauf an, wie breit die Bilder sind. (dass nicht rechts ein Loch ist) .... wenn man diese padding-left: 100px; rausnimmt.
z.B. mit:

Code: Select all

#phocagallery.pg-category-view.pg-cv {
 padding-left:0px !important; 
}

dann wäre alles unter dem Logo.

b) ... Edit: musste ich löschen. Muss man noch weiter schauen.

Liebe Grüße, Christine

[MachDirEinBild]

Ich hab das jetzt mal so eingestellt und die Thumbs dann anschliessend wieder 110px nach rechts gerückt.

Code: Select all

.pg-msnr-container {
    margin: 0 auto !important;
    text-align: center;
	padding-left: 110px !important;
}


#phocagallery, .pg-category-view .pg-cv {
    text-align: center;
    margin: 0 auto !Important;
	padding-left: 0px !important; 
}

Nur die 110px passen halt nicht immer. Da fehlt jetzt noch ein der variable Teil.


Geht leider doch nicht so. Der pg-msnr-container wird noch an anderer Stelle verwendet, z.B. in den Beiträgen. Dann passt es dort nicht mehr.


Gruß, Alex.

[Jan]

Hall, da glaube ich, muss man es in Javascript schaffen - in Masonry Javascript Dateien, weil da Masonry mit Hilfe von Javascript die Bilder verschiebt, dann soll man auch die Breite von Window erkennen (Im Javascript) und dann die Boxen zentrieren

Jan

[MachDirEinBild]

Hai,

in den Masonry-Dateien habe zumindest die Berechnung für das Padding-Left gefunden. Hier könnte man vielleicht den gleichen Wert für Padding-Right benutzen.

Besser wäre aber, wenn der Page-Header nicht unter #phocagallery, .pg-category-view .pg-cv lieger würde.
Oder #pg-msnr-container bekommt noch einen neuen Container, der dann das Padding-Left bekommt.

Aber wo das gemacht wird, und ob esüberhaupt geht, weiß ich nicht.


Gruß, Alex.