bilder mittig verschieben

sN1. DoDexx' · 10. August 2013

hey also ich habe eine enterpage gemacht
und alles in bildchen eingeteilt.
nur es lässt sich nicht verschieben..
es geht nicht mit dem css befehl left:50px; oder mit dem befehl algin-left:50px;

css code momentan:

Code

#right{
background-image:url("./EBilder/mainmenu.png"); 
background-size:70%;
float:right;
-o-border-radius: 15px;
margin-left:50px;
margin-top:0px;
margin-right:650px;
width:800px;
height:570px;
background-attachment:fixed; 
background-repeat:no-repeat;
}

Alles anzeigen

Bosti · 10. August 2013

Hast du mal den restigen CSS und HTML-Code? Würde ja fast sagen, probiers mal mit position:absolute;

sN1. DoDexx' · 10. August 2013

dan verschwindet ein teil des bildes

#edit
der css teil:

Code

body{
text-align:center;
text-bottom:center;
background-image:url("./EBilder/hintergrund.png"); 
background-attachment:fixed; 
background-repeat:no-repeat;
background-size:100%;
}
#right{
background-image:url("./EBilder/mainmenu.png"); 
background-size:70%;
float:right;
-o-border-radius: 15px;
margin-left:50px;
margin-top:0px;
margin-right:650px;
width:800px;
height:570px;
background-attachment:fixed; 
background-repeat:no-repeat;
position:absolute;
}

Alles anzeigen

HTML:

HTML

<html>
<head>
	<title>Rightside Roleplay</title>
	<link rel="stylesheet" type="text/css" href="enterpage.css">
</head>
<body>
	<div id="right">
	</div>
</body>
</html>

Bosti · 10. August 2013

pack mal bitte deinen kompletten Code rein oder schick en Link zu Seite

sN1. DoDexx' · 10. August 2013

Link zur seite: Klick!
der css teil:

Code

body{
text-align:center;
text-bottom:center;
background-image:url("./EBilder/hintergrund.png"); 
background-attachment:fixed; 
background-repeat:no-repeat;
background-size:100%;
}
#right{
background-image:url("./EBilder/mainmenu.png"); 
background-size:70%;
float:right;
-o-border-radius: 15px;
margin-left:50px;
margin-top:0px;
margin-right:650px;
width:800px;
height:570px;
background-attachment:fixed; 
background-repeat:no-repeat;
position:absolute;
}

Alles anzeigen

HTML:

HTML

<html>
<head>
	<title>Rightside Roleplay</title>
	<link rel="stylesheet" type="text/css" href="enterpage.css">
</head>
<body>
	<div id="right">
	</div>
</body>
</html>

Bosti · 10. August 2013

So wie du das alles gebaut hast musst du über background-position: Xpx Ypx; verschieben und width auf 100% stellen. So wird da auch nix mehr abgeschnitten

unknownn123 · 10. August 2013

Also erstmal solltest du die Hintergrundgröße nicht in % angeben.
Das Originalbild ist 1500px breit, 70% davon sind pi pa po 1050px.
Sprich: "Background-size: 1050px auto;"
Dann setzt du "width:" auf "1050px", "height:" auf "700px".
Dann machst du mal "position: absolute" raus, sowie das "float: right".
Jetzt kannst du das Dingen mit margin positionieren.
Wenn du nun 2 div-boxen nebeneinander haben willst, setzt du ersteres auf float: left, zweiteres auf "float: right", dann machst du ne Div-Box drum, gibts der ne Breite und höhe(Breite sollte die Summe aus den Breiten der beiden Bilder sein), setzt die auf "margin: 0px auto" und du hast die beiden bilder mittig, nebeneinander.

Und kannst du vllt. sagen, wie du das genau positionieren wolltest?

sN1. DoDexx' · 10. August 2013

Zitat von GevadderToast

Und kannst du vllt. sagen, wie du das genau positionieren wolltest?

wie meinst du das?
so wie ich es verstehe, wollte ich es genau in der mitte haben

sonnst hats geklappt danke

unknownn123 · 10. August 2013

Ja ob du es einfach zentrieren wolltest, ob du es eben neben ein anderes Bild packen wolltest, oder einfach um eine bestimmte Pixelbreite von dem Rand abstand halten lassen wolltest.
Aber wenn es geklappt hat, was du wolltest, hat sich es erledigt ;).

sN1. DoDexx' · 10. August 2013

naja wenn ich es mit margin-top:50px; mache, schneidet es sich wieder ab..
ich wollte es etwas weiter unten haben, und zentriert.. wie mache ich es zentriert
also es soll genau in der mitte sein, oben und unten in der mitte..
links und rechts in der mitte

unknownn123 · 10. August 2013

Theoretich braucht das dingen ja nur diese Eigenschaften:
.right {
width: 1050px;
height: 700px;
background: url("./dasbgbilddahalt.png") 1050px 700px;
}

Und wenn du dann noch "margin-top" machst, sollte es sich einfach nur verschieben, aber nichts groß abschneiden oder so.

sN1. DoDexx' · 10. August 2013

habe jetzt die perfecte Position...
aber es schneidet wieder etwas ab..

Code

#right{
background-image:url("./EBilder/mainmenu.png"); 
background-size: 1050px auto;
background-position: 250px 80px;
width:1050px;
height:700px;
background-attachment:fixed; 
background-repeat:no-repeat;
}

unknownn123 · 10. August 2013

Ja was machst du auch background-position, so wird der hintergrund doch aus der div-box geschoben, klar das dann abgeschnitten ist.

sN1. DoDexx' · 10. August 2013

und wie verschiebe ich dan die div box?
habe mal left:100; versucht passiert nix

unknownn123 · 10. August 2013

mach "margin-left: auto;" und "margin-right: auto", mit margin verschiebt man div-boxen.
wenn du margin-left und margin-right auf auto setzt, zentriert sich das dingen.

sN1. DoDexx' · 10. August 2013

also jz komm ich zu den buttons...
wie ich links und rechts mache weiss ich jetzt,
aber wie mache ich oben und unten?
wenn ich margin-top:200; mache, ist es voll buggy..

unknownn123 · 10. August 2013

Hmm das ist etwas komplizierter, da die Höhe ja nicht statisch ist.
Wie meinst du das, dass es buggy ist?

breadfish.de 12. März 2022