• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Brauche Hilfe, irgendwas mach ich falsch

S

steff89

Neues Mitglied
Hallo,
ich bräuchte mal hilfe von jemanden mit ahnung. :)
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: 
<!DOCTYPE html>
<html>
<head>
    <title>Steffi Portfolio</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div id="Back1">
        <img src="img/Back1.png"/>
    </div>
    <div id="kreisehome">
        <img src="img/kreisehome.png"/>
    </div>
</body>
</html>

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;
}

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

Anhänge

  • entw.jpg
    entw.jpg
    35,7 KB · Aufrufe: 9
Werbung:
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.
 
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.
 
Werbung:
Mach am besten erst mal um deinen Code einen Wrapper...

quasi:

<body>
<div id="wrapper">
<div id="back1>Dein Inhalt</div>
</div>
</bod>

Dem Body sagst du
height:100%
width:100%

dem Wrapper gibst du die Breite deiner eigentlichen Seite und margin:0 auto;

dann gibst du deinem Bild (hatte ich vergessen) eine Höhe und Breite, das Ding weiß nicht wie groß es ist, deshalb kann es auch keine Abstände errechnen

sprich wenn dein Bild 100x100 Pixel groß ist:

#Back1 {
width:100px;
height:100px;
margin:auto;
}
 
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:
1.jpg
 
Zuletzt bearbeitet:
Warum verwendest du background wenn du keine Hintergrundbilder hast?
Du musst deine CSS-Regeln auf dein IMG-Element anwenden.


@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.
 
Werbung:
weil der in dem tutorial das so vorgemacht hat

jetzt im moment schauts so aus:
Code: 
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: 
<!DOCTYPE html>
<html>
<head>
    <title>Steffi Portfolio</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div id="wrapper">
    <div id="Back1"><img src="img/Back1.png"/>
    <div id="kreisehome"><img src="img/kreisehome.png"/>
    </div>
</body>
</html>
 
Zuletzt bearbeitet:
Mach es doch so:

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

Code: 
<!DOCTYPE html>
<html>
<head>
    <title>Steffi Portfolio</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div id="blablub">
        <img src="img/kreisehome.png">
    </div>
</body>
</html>

Und dann die entsprechende ausrichtung der Kreise (mit padding) ...
 
Werbung:
Dann ergänze das ein wenig:

Code: 
#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
 
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.
^^
 
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
 
Werbung:
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben