Prepage -> Grafik Browser- und Fenstergrößenunabhängig zentrieren. Bitte Hilfe

html.de-Forum HTML, XHTML & CSS
1

Hi Leute. Ich habe folgendes Problem:

Hab so ne art Prepage für eine Vereinssteite gebastelt. Die Seite besteht lediglich aus einem Hintergrundbild und 3 Schaltflächen die jeweils auf andere Seiten verlinken.
Jetzt besteht das Problem darin, das die 3 Schaltflächen Designmäßig zum hintergrundbild dazu gehören, sprich sie sich bei verschiedenen Browsern und auch bei Fenstergrößenänderung nicht unproportional zum Hintergrundbild verschieben sollen. Das ist nämlich leider der Fall :confused: Ausserdem sind die Grafiken je nach Browser und Fenstergröße nicht immer in der Mitte zentriert.

Ich häng mal den Seitenquelltext an, vieleicht hat einer eine Idee.

[PHP]

SG Anspach 1862 Abteilung Fussball
[/PHP]
2

vielleicht lässt sich das grafisch ja eleganter lösen…dafür müsste ich das aber mal sehen, um evtl einen vorschlag machen zu können! :wink:

3

Du hast ne PN :wink:

4

jo. grafisch lässt sich das leider, durch den rollover nicht eleganter lösen.
du musst die menüleiste einfach horizontal zentrieren und mit margin-top den gewünschten abstand zum oberen rand geben.
da die hintergrundgrafik sich vertikal nicht bewegt, sollte das den gewünschten effekt geben.

ganz nebenbei:
wieso postest du den link nicht im forum?
hier sind noch weit versiertere köpfe angemeldet als ich :wink:
die könnten vielleicht ebenfalls oder sogar besser helfen…

5

Ich habe leider von coden überhaupt kein Plan, bin da eher der Grafiker…
Wäre es ein großer Aufwand den Code oben so anzupassen das es passt?

Ich hatte den Link hier nicht direkt gepostet weil ich keine schleichwerbung machen wollte. Aber wenn es in ordnung ist poste ich natürlich gerne:

SG Anspach 1862 Abteilung Fussball

Vieleicht kann wer helfen.

Danke!

6

Diesen einfachen Effekt mit Javascript zu lösen ist völlig unnötig. Das geht viel einfacher und eleganter mit CSS.
Du erstellst ein sog. Sprite-Image mit allen Grafiken nebeneinander.
(Beispiel: http://s.ytimg.com/yt/img/master-vfl183692.png )
Das Bild weist du den Links als Hintergrundbild zu und verschiebst per :hover die Position.
Da du wahrscheinlich nicht verstehst, was ich meine, bastel ich mal eben was :slight_smile:
Die drei Links würde ich in eine Liste packen und diese per marign: auto zentrieren.

[html]

SG Anspach 1862 Abteilung Fussball #links { width: 705px; height: 100px; margin: 0 auto; padding: 0; }

#links li {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
}

#links li a {
background: url(„http://img440.imageshack.us/img440/1122/spritel.jpg“) 0 0 no-repeat;
padding: 0;
margin: 0;
width: 235px;
height: 100px;
text-indent: -999em;
display: block;
}

#links li a.eins {
background-position: 0 0;
}

#links li a.eins:hover {
background-position: 0 -100px;
}

#links li a.zwei {
background-position: -235px 0;
}

#links li a.zwei:hover {
background-position: -235px -100px;
}

#links li a.drei {
background-position: 0 0;
}

#links li a.drei:hover {
background-position: 0 -100px;
}

[/html]

7

Hey das wäre super! Im Moment habe ich kein rollover mehr drin. Da paast alles. Aber wäre schon schöner, wenn das effekt noch da wäre.
Brauchst du was an Grafiken um das zu basteln? Das ganze besteht aus einer Hintergrundgrafik und 6 weiteren Grafiken (3 Links mit rollovereffekt) Also insgesamt 7 Grafiken.

8

Habs oben mal eingefügt. Die passende Grafik bekommst du schon selbst gebastelt :wink:
Um das Hintergrundbild da noch reinzubringen, packst du die Liste in einen Div-Container, gibst dem Div das Bild als Hintergrund und machst oben ein passendes Padding rein.

[html]
#bild {
width: 900px;
min-height: 650px;
margin: 0 auto;
padding: 438px 0 0 0;
background: url(„BILD“) 0 0no-repeat;
}

... Liste mit Links...
[/html]