div und css Reponsiv?

[basti1012]

komisch. bei mir ist das logo mal wieder immer zusehen und alles oben links in der ecke gequetscht. Mein Laptop Monitor is sowieso zu klein für solche auflösungen da hatte ich eh schon immer probleme. Ich weiss auch nicht so genau warum du da ein margin über 1600 Pixel drinne hast. Ich würde den oberen Bereich vieleicht mal ganz anders machen mit ein container wo die ganzen logos und die versands bilder drinne sind

 

[Shorty1968]

Ich habe sie ja schon in einem DIV Container.

<div id="layout_logo" class="cf">
    <div id="logo"><a href="{$index}" title="{#link_index#} &bull; {$store_name}"><img src="{$tpl_path}img/logo_head.png" alt="{$store_name}" /></a></div>
    <div class="freeShipping"><img src="{$tpl_path}img/freeShipping.png" alt="" /></div>
    <div class="sslLogo"><img src="{$tpl_path}img/sslLogo.png" alt="" /></div>
  </div>

CSS styleseet.css

#layout_logo {
background-color:#932527;
padding:0px 0px;
width:100%;
max-width:1900px;
margin: 0px auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 30px;
}
#logo {
margin: 50px 0 -30px 50px;
width:265px;
height:75px;
}
#logo img {
margin: 0px auto;
vertical-align:bottom;
width:100%;
height:auto;
}
#logo a {
display:block;
outline:none;
text-decoration:none;
}
#logo a:hover {
outline:none;
text-decoration:none;
}

.sslLogo {
margin: 100px 0 -180px 100px;
}

.freeShipping {
margin: -100px 0 -180px 1600px; 
}

CSS media-queries.css

#logo { float:none; width:100%; max-width:235px; height:auto; margin: 0px auto; }
  .sslLogo { float:none; width:100%; max-width:50px; height:auto; margin: 0px auto; }
  .freeShipping { float:none; width:100%; max-width:50px; height:auto; margin: 0px auto; }

Ich habe leider keinen Plan wie ich das angepasst bekomme,damit es in jeder auflösung passt.

 

[Sempervivum]

Ich habe leider keinen Plan wie ich das angepasst bekomme,damit es in jeder auflösung passt.

Wie ich schon schrieb:

diese in eine eigene Zeile und im normalen Fluss zu platzieren.

Mit "im normalen Fluss" meine ich, auf das Verschieben mit margin zu verzichten und sie einfach nebeneinander im Container anzeigen lassen.

 

[Shorty1968]

Wenn ich das mache dann sitzen sie ja nicht da wo ich sie haben möchte?

 

[Sempervivum]

Schon, nur da wo sie jetzt sind, gibt es ja leider die Probleme mit Überdeckungen, bzw. dass das Free-Shipping rechts verschwindet. Um zu einem responsiven Layout zu kommen, dass bei jeder Auslösung funktioniert, empfehle ich eben, die jetzige Anordnung zu überdenken.

 

[basti1012]

Dann solltest du vieleicht auch erklären wo du welches logo haben möchtest bei welcher Displaygröße

 

[Shorty1968]

ich habe es nun mal oben neben einander gesetzt und wen ich jetzt wider die auflösung wechsel dann verschiebt sich wider alles nach links.

 

[Sempervivum]

Das liegt daran, dass Du immer noch feste Abmessungen und Margins hast. Wenn ich das alles lösche und den Containier auf Flexlayout umstelle, ist alles sauber ausgerichtet und bleibt so, wenn sich die Fensterbreite ändert.

 

[Shorty1968]

*EDIT*
habe es hin bekommen damit kann ich leben danke.

 

[Sempervivum]

Sieh dir den Screenshot an, der Pfeil zeigt drauf.
Weiter Infos hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.html-seminar.de/css-flexbox.htm