Brauche Hilfe, irgendwas mach ich falsch

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich bräuchte mal hilfe von jemanden mit ahnung. :slight_smile:
ich möchte, das über dem hintergrund ein hintergrundfoto kommt welches zenriert ist und von oben her gesehen auch zentriert, alle weiteren ellemente die über das bild kommen sollen sich quasi darauf aufbauen und ebenfalls zentriert sein.

ich hab eineig eingabennach einem tutoria gemacht aber igendwas mache ich total falsch.

Mein HTML code sieht so aus:

[CODE]

Steffi Portfolio
[/CODE]

und meindazugehöriger CSS code so:

[CODE]body {
background-color:#c5e0db;
margin:0px auto;
min-width:950px;
}
#Back1{
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
z-index:2;
}

#kreisehome{
background-attachment:scroll;
background-repeat:no-repeat;
background-position:center;
z-index:1;
}[/CODE]

ich hab mal ein foto angehangen, wie das endergebinss aussehen soll

2

versuchs mal lieber mit margins…

#Back1 {
margin:0 auto;
}

Heißt:
Abstand oben und unten= 0 pixel
Abstand nach rechts und links=automatisch (beide Seiten gleich viel)

vielleicht hilfts dir ja…

edit:
wenns von vertikal auch zentriert sein soll machst du natürlich einfach:
margin:auto;

dann nimmt er zu jeder Seite den gleichen Abstand, sodass das Bild dann zentriert ist.

3

danke.
wenn ich die 0px in z.B. 15px änder verschiebt es sich etwas nach unten, aber wegen dem auto macht es nix, es bleibt links stehen.

nächstes problem ist das die beiden bilder (einmal der graue hintergrund und einmal die 2 weißen kreise) untereinander stehen und nicht übereinander.

4

Mach am besten erst mal um deinen Code einen Wrapper…

quasi:

#Back1 {
width:100px;
height:100px;
margin:auto;
}

5

also von links und rechts gesehen stehen jetzt beide bilder mittig aber immernoch untereinander, ich versuchs die ganze zeit schon mit
z-index:0; (bei back1) und z-index:1; (bei kreisehome) aber es ändert sich nix.
so siehts derzeit aus:
[ATTACH]3516[/ATTACH]

6

Warum verwendest du background wenn du keine Hintergrundbilder hast?
Du musst deine CSS-Regeln auf dein IMG-Element anwenden.

[SIZE=4]@znaxiboi
margin:auto funktioniert nur mit absoluter Positionierung. Also alle Offsets auf 0 setzen das Objekt eine feste Breite/Höhe geben und schon ist das Objekt vertikal und horizontal zentriert.[/SIZE]

7

weil der in dem tutorial das so vorgemacht hat

jetzt im moment schauts so aus:

body { background-color:#c5e0db; height:100%; width:100%; } #wrapper{ width:2778px; height:1463px; margin:0 auto; } #Back1{ width:2778px; height:1463px; z-index:0; margin:auto; attachment:scroll; repeat:no-repeat; } #kreisehome{ width:2493px; height:1343px; z-index:1; margin:auto; attachment:scroll; repeat:no-repeat; }

[CODE]

Steffi Portfolio
[/CODE]
8

Mach es doch so:

body { background-color:#c5e0db; height:100%; width:100%; } #blablub { background-image: url(img/Back1.png) no-repeat; }

[CODE]

Steffi Portfolio
[/CODE]

Und dann die entsprechende ausrichtung der Kreise (mit padding) …

9

da ist auch nix anders

10

Dann ergänze das ein wenig:

#blablub { background-image: url(img/Back1.png) no-repeat; padding: 0px; margin: 0px auto; }

und definiere die höhe und breite nach den maßen vom background image

11

wenn ich padding eingebe und z.b 50px eingebe rückt es alles aber gleichzeitig nicht nur ein stück nach unten, sonden mit nach rechts.

und die 2 elemente stehen immernoch untereinander und nicht hintereinander.
^^

12

Hallo.

Zeig bitte deinen jetzigen Code noch einmal. Du machst da etwas total falsch.

Wenn du dich an die Vorgaben von FebsDeluxe hälst dann sollte das auch klappen.

Gruss
Elroy

13

ich habs jetzt, danke für eure hilfe.

14

noch eine frage. ich hab jetzt einen hover effekt erzeugt und wollte jetzt noch einen weiteren divcontainer drüberlegen, jetzt reagiert der hover, der in der mitte ist aber schon wenn ich auf das darüber gelegte bild komme welches über den gesammten bildschirm geht. ist das weil der container jetzt darüber liegt? ich hab schon versucht das neue bild unter das hover bild zu legen aber dann verschiebt sich wieder alles.