Denkfehler ?

aiquita

Mitglied
Also ich habe folgendes Problem ich möchte inhalb des Hauptdivs zentriert einen weiteren div anzeigen
ich hatte es auch vor stunden mal
aber irgendwie bekomm ichs nicht erneut hin ich schätz ich hab einfach iwo einen total doffen denkfehler ^^
ich versteh auch einfach ned warum er des jetzt ned einfach anzeigt

hier is mal der code

HTML:
<div style="width:500px; height:500px; margin:40px 174px 0px 174px; padding:0px; background:#E1E1E1 url(<?php echo "images/galerie/" . $bild . ".jpg" ?>) no-repeat center; -webkit-box-shadow:5px 5px 20px black; -moz-box-shadow: 5px 5px 20px black; box-shadow: 5px 5px 20px black;">
    <form action="" method="post">
        <input style="margin:-30px 0px 0px 0px; border:2px solid #E1E1E1; border-bottom:none; background:#E1E1E1; width:100px; height:30px; float:left; font-size:20px;" type="submit" value="zur&uuml;ck" name="z" onmouseover="this.style.background = 'white';" onmouseout="this.style.background = '#E1E1E1';" />
        <input style="margin:-30px 0px 0px 120px; border:2px solid #E1E1E1; border-bottom:none; background:#E1E1E1; width:100px; height:30px; float:left; font-size:20px;" type="submit" value="Info" name="i" onmouseover="this.style.background = 'white';" onmouseout="this.style.background = '#E1E1E1';" />
        <input style="margin:-30px 0px 0px 0px; border:2px solid #E1E1E1; border-bottom:none; background:#E1E1E1; width:100px; height:30px; float:right; font-size:20px;" type="submit" value="vor" name="v" onmouseover="this.style.background = 'white';" onmouseout="this.style.background = '#E1E1E1';" />
        <input type="hidden" value="<?php echo $bild ?>" name="wert" />
    </form>
    <div style="width:480px height:200px; margin:150px 50px; background:white;">

    </div>
</div>

danke für eure hilfe

mfg
Marvin
 
Es würde schonmal was bringen wenn du deinen Code auf Schreibfehler überprüfst.

HTML:
<div style="width:480px height:200px; margin:150px 50px; background:white;">

da fehlt das Semikolon zwischen width und height, das macht das Div schonmal "leer" und entsprechend klein.

Btw hab ich die Background-Angaben
background:#E1E1E1 url(<?php echo "http://www.tutorials.de/images/galerie/" . $bild . ".jpg" ?>) no-repeat center;

so noch nie gesehen. Ich kenn es nur als "Bild Repeat Position Farbe". Bin mir da jetzt aber nicht sicher und hat auch mit dem Problem nichts zu tun.

Du hast auch innerhalb der Form gefloatet und das Float nicht beendet.

Bei 0px-Angaben schreibt man btw im Normalfall einfach padding:0;
 
Zuletzt bearbeitet:
des was du noch nicht gesehen hast funktioniert einwandfrei so wies soll
ja danke für den semikolon fehler wie gesagt ich stand total aufm schlauch :p
aber was meinst du mit float beenden
 
mir is nachdem ich jetzt nochmal etwas rumgespielt hab aufgefallen das der innere div den ausenabstand nicht zu seinem eltern sonder zum eltern elment des elternelemnts nimmt
 
Damit meint ich ein clear.

das der innere div den ausenabstand nicht zu seinem eltern sonder zum eltern elment des elternelemnts nimmt

Mh? Doch, es ist der Abstand zum umfließenden Div. Und da ergeben 480px width mit jeweils 50px margin nach rechts und links 580px Breite, also passt es nicht mehr ins 500pxbreite umschließende Div hinein.
 
die werte nach rechts un links sind mir selbst schon aufgefallen -.-
aber oben unten passt irgendwie nicht
sag bloss das hab ich auch falsch gerechnet

zum besseren verständnis guck mal vorbei
http://www.marvinbrieger.de
ps wenn der obere teil abgeschnitten is einfach rauszoomen
der bug is des nächste prob an das ich ran muss -.-
 
Nein. Wenn du dir das Ganze im Firebug ansiehst, merkst du, dass das innner Div an sich richtig positioniert ist, im relativen Rahmen.
Füge zu dem Div ein position: absolute; hinzu.
 
Kannst du dann bitte nochmal deinen aktuellen Code posten? Ich hatte deinen übernommen und angepasst und das Ergebnis war sauber (FF) - es sei denn, das hab ich falsch aufgefasst.

Inneres Div:

Code:
    background: none repeat scroll 0 0 white;
    height: 200px;
    margin: 150px 10px;
    position: absolute;
    width: 480px;
 
Zurück