Div im Div verschiebt sich nicht richtig

[SimoNxD]

Hey Leute,

eig habe ich keine probleme damit einen div im div zu positionieren..
Allerdings bin ich seit 2 Tagen am verzweifeln und hab versucht und versucht... nur nix klappt...
Es geht um Folgendes.


Ich habe den header (DIV 1) und das Logo (DIV2) hierzu mal der css code:

.header{
    width:1100px;
    height:250px;
    margin:0px auto;
    background-image:url(../img/header.png);
    background-color:#999999;
    }
    
.logo {
    width:341px;
    height:120px;
    margin: 40px 600px;
    background-image:url(../img/logo.png);
}

normalerweise könnte ich mit margin jz den abstand bestimmen bei logo...
nur jetzt ist das problen, das wenn ich das margin im logo veränder, das sich der header mit weiter nach unten schiebt...

Allerdings will ich es so haben, das sich das logo DIV, im header DIV nach unten schiebt, und nicht das komplette HEADER DIV...
hier nochmal der html code:

<div class="header">
            <div class="logo"></div>
            <div class="figuren"><center><img src="img/figur.png"></center></div>
            <div class="social">
                <a href="https://twitter.com/Tempxon" class="twitter-follow-button" data-show-count="true" data-url="https://twitter.com/Tempxon" data-via="Tempxon" data-lang="de">Follow Us</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
                {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br>
                <div class="fb-like" data-href="https://www.facebook.com/pages/Tempxon/179463328882033" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial" data-colorscheme="dark"></div>
            
            </div>
        </div>

das div class "social" ist eig irrelevant :X

Findet ihr den fehler woran es liegt?

MFG

 

[Cheffchen]

Hallo,

zeige ein Link.

Einfach mal gerechnet

.head : width:1100px
.logo : width:341px + (2*margin600px) = 1541px

fällt dir da was auf?
wie kann logo breiter sein?

Cheffchen

 

[SimoNxD]

Tempxon || News, Games and more.

das ist der link.

Worauf bezieht sich bei dir in der rechnung das

2*margin 600px?

es ist doch bei margin: 0 0 0 0 also TOP, RIGHT, BOTTOM, LEFT? also der abstand nach oben recht unten links, sollte das nicht der fall sein, heißt das ja das ich jahre was falsches gedacht habe ?
Ich will mit den 600 px das logo nach rechts schieben

 

[Tronjer]

Wenn man margin (oder padding) mit 2 Werten schreibt, worauf bezieht sich der erste und worauf der zweite?

 

[SimoNxD]

top und right? oder?
>_<????


wow...
ich hab jz zwei nullen dran gehangen.. und es verändert sich...

Kann jemand mich mal aufklären worauf sich es mit 2 werten bezieht?
...
Danke vielen vielen dank

*edit* aber nachwievor besteht das problem wenn ich jz:

.logo {
    width:341px;
    height:120px;
    margin: 100px 0 0 0;
    background-image:url(../img/logo.png);
}

so sieht es aus...
veränder ich jz das "100px" schiebt sich das logo weiter nach unten, allerdings geht der komplette header mit nach unten... :/

 

[Elroy]

nur jetzt ist das problen, das wenn ich das margin im logo veränder, das sich der header mit weiter nach unten schiebt...

Das ist kein Fehler, das ist ganz normal.
Das margin wird zu der Größe der div Box dazu gerechnet. Veränderst du das margin verändert sich die Größe der Box.

Das ganze nennt sich Box-Modell und kann hier nachgelesen werden: CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell

Kann jemand mich mal aufklären worauf sich es mit 2 werten bezieht?

Bei zwei Werten gibt der erste Wert den Abstand oben und unten an und der zweite Wert den Abstand links und rechts.
Dein margin: 40px 600px; bedeutet also nichts anderes als margin: 40px 600px 40px 600px;

Das ganze kannst du hier nachlesen: margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Ich hatte mal das gleiche Problem und habe is mit einer relativen Positionierung gelöst. Ob das bei deinem Layout auch möglich/sinnvoll ist kann ich bei dem bisschen Code nicht sagen.

Besser wäre ein Link zur Seite.

Gruss
Elroy

 

[Cheffchen]

ich vermisse immer noch ein link, das ist bei css fast Pflicht, danke.
Oh, in Mobil ansicht war der Link nicht zu sehen.

cheffchen

 

[Cheffchen]

Hallo,
also wenn dann eher so

margin: 40px 0 0 600px;

obwohl ich das wahrscheinlich auch eher mit Position machen würde aber so gehts natürlich auch.

Cheffchen

 

[SimoNxD]

also hab den link zur seite schon gepostet, anscheinend seht ihr in nicht o.o

Ich poste ihn daher nochmal

Tempxon || News, Games and more. <--- da is der Link

http://tempxon.de