Header zentrieren funktioniert nicht !

[Scriptu]

Hallo Leute,

ich habe schon über Google usw. und eure Sufu benutzt. Habe mich erst einmal selbst dran versucht einen Header zu zentrieren.
Der Style ist Blue Suavity v.1.0 . Ich habe einen Header dafür erstellt mit den Maßen 880 px 240 px. Nachdem ich diesen hochgeladen
habe, war erstmal alles bisschen verschoben. Das gilt für die Navi sowie auch die Suchfunktion des Forums. Ich habe dann ein wenig mit
den paddings gespielt. Zum einen habe ich bestimmte Sachen in der Common und der Colours.css verändert und auch in der Overall header
datei.
Nach dem ich Paddings usw. verändert hatte, hat egl. alles geklappt.
Die höhe stimmt und es ist nichts mehr verschoben, aber :

Der Header ist nicht 100 % mittig. Daher wollte ich euch fragen woran es liegen kann ? Weiß auch nicht genau egal welchen Wert ich für Paddings
oder so eingebe es will sich einfach nicht verschieben nur die höhe wurde geändert.

Hoffe ihr könnt mir helfen.

Mit freundlichen Grüßen

Scriptu

[hackepeter13]

Ein Demo-Link wäre vllt. ganz praktisch, damit man sich von der Lage ein besseres/eideutigeres Bild machen kann.

[Charlie_M]

Blue Suavity basiert meines Wissens nach auf Prosilver, da könnte der Thread hilfreich sein:
viewtopic.php?f=89&t=203843

[Scriptu]

Also ich habe den Link angeschaut mit der Zentrierung ,
dabei kommt aber nichts gutes raus, des weiteren stand da was von
keiner Suchbox die soll hier aber erhalten bleiben.

So sieht es jetzt aus: http://www.welli-board.de/

In der Common Datei musste ich die Paddings so anpassen ;

#logo {
display: block;
width: auto;
padding: 2px 20px 0 10px;
text-align: center
}

Jetzt passt die höhe usw. hab immer noch das gleiche Problem

[Scriptu]

Hat keiner eine Idee ?

[eichjoernchen]

Hallo!

In der Common Datei musste ich die Paddings so anpassen ;

#logo {
display: block;
width: auto;
padding: 2px 20px 0 10px;
text-align: center
}

Jetzt passt die höhe usw. hab immer noch das gleiche Problem

Erklärung zu "padding":
Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.

Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.

Versuche mal:

Code: Alles auswählen

padding: 2px 0px 0 0px;

Nicht getestet
Gruß Jörn

[kidrob]

Hab glaub die Lösung gefunden

Lass alles, wie es ist und ändere hier das padding:

Code: Alles auswählen

.wrap-headerbar {
    background: none repeat-x scroll 0 0 #EBEBEB;
    color: #FFFFFF;
    margin-bottom: 4px;
    padding: 0 1px;

(alternativ kannst das padding auch rausmachen,also so

Code: Alles auswählen

.wrap-headerbar {
    background: none repeat-x scroll 0 0 #EBEBEB;
    color: #FFFFFF;
    margin-bottom: 4px;
}

und das Logo/Bild selbst ca. 1 Pixel kürzer meiner Anzeige nach...)

Genau "verstanden" hab ich Deinen Header nicht, aber das padding-Attribut der .wrap-headerbar hat sich auf das CSS vom #logo ausgewirkt bzw. kollidiert mit diesem da wohl irgendwie verschachtelt innerhalb des <div>-Bereichs...

[Talk19zehn]

Hello,

das Logo wird mit voller Breite von 880px angesetzt, so dass meines Erachtens der Wert auf rd. 872px zu kürzen (margin) ist.

Dem Quelltext entnommen:

Code: Alles auswählen

<img width="880" height="244" src="styles/BlueSuavity/imageset/site_logo.png" alt="Welli Board">

und geändert:

Code: Alles auswählen

<img width="872" height="240" src="styles/BlueSuavity/imageset/site_logo.png" alt="Welli Board">

Des Weiteren wurden inhaltlich weitere Werte, wie Padding und Margin an diversen Stellen geändert und insofern ist es schwierig, alle Veränderungen rechnerisch korrekt einzubeziehen.

So dass bspw. die Search-Box als gefloatetes Element rein rechnerisch mit der Höhe der Klasse wrap-headerbar von 244px nicht zurecht kommt. Überschlägig wären m.E. ca. 40px mehr an Höhe erforderlich, so dass sie nicht mehr in den Navigationsbereich hineinbricht.

Code: Alles auswählen

.wrap-headerbar {
    background-color: transparent;
    color: #FFFFFF;
    height: 284px;
}

In der ID wrap-header haben sich kleine Fehlerchen eingeschlichen:

Code: Alles auswählen

#wrap-header {
    margin: auto;
    padding: 0;
    width: 880px;
}

Code: Alles auswählen

#wrap-header {
    margin: 0 auto;
    padding: 1px;
    width: 880px;
}

[ externes Bild ]

Viele Grüße

[Scriptu]

Danke an Alle und besonders an Talk19zehn,

nun ist der Header mittig. Wenn ich deine anderen Angaben ausführe so verschiebt sich die Navi usw.
Vlt. werde ich nochmal den ganzen Ordner auf Standart zurück setzen und nur das ändern wie du
beschrieben hast.

Mit freundlichen Grüßen

Scriptu