bilder mittig verschieben

  • 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:

  • dan verschwindet ein teil des bildes


    #edit
    der css teil:


    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>
  • Link zur seite: Klick!
    der css teil:


    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>
  • 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? :)

  • 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 ;).

  • 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

  • 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.

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


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

  • 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.

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