div und css Reponsiv?

basti1012

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Ich habe sie ja schon in einem DIV Container.
HTML:
<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
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
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

Erfahrenes Mitglied
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.
 

Shorty1968

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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. layout.png