div und css Reponsiv?


Shorty1968

Erfahrenes Mitglied
Hallo,
ich habe mir in meiner html Datei mit Folgenden Code ein Bild eingebunden.
HTML:
<div class="freeShipping"><img src="{$tpl_path}img/freeShipping.png" alt="" /></div>
und in der styleseet.css
CSS:
.freeShipping {
margin: -100px 0 -100px 1600px; 
}
was muss ich machen damit es Reponsiv auch dargestellt wird,sprich das es angezeigt wird wenn man es mit Smartphone,Tablet usw angezeigt wird?
 

basti1012

Erfahrenes Mitglied
dafür gibt es ja @media queries wo du verschiedene Bildschirmgrößen deine Container anpassen kannst. Wie und was das mußt du mal testen weil wir deine Seite ja nicht kennen und auch nicht wissen wie du es gerne hättest. @meadi queries kann man auch öfters verwenden zb handygröße ,tablettgröße und laptop Bildshirm.
 

Shorty1968

Erfahrenes Mitglied
Ok danke dann verstehe ich das bei mir nicht,ich habe es genau so eingerichte wie das Log das Logo Passt sich an aber das selbst erstellte nicht.

Gibt es den noch eine möglichkeit der Automatischen Bildschirm anpassung?
 

basti1012

Erfahrenes Mitglied
kannst du das mal online stellen oder deinen Code posten ? Ist jetzt schwer da irgendwas zu sagen wenn man deinen aufbau und co nicht kennt ?
 

basti1012

Erfahrenes Mitglied
man bin ich blöd. Habe jetzt erst auf deinen Namen geachtet. Es geht bestmmt um das Logo was bei deskop Ansicht hinter den Container verschwindet oder ? Wo soll das Logo den generell sichtbar sein? Und wann ?Bei jeder Größe von Bildschirmen ,oder soll es zb bei Handy ganz rausgenommen sein oder zbkleiner sein ?
 

Shorty1968

Erfahrenes Mitglied
kein Problem bin ja nicht berühmt.:D

Das Reponsive klappt ja,das Problem ist wenn ich mir den Shop in einer anderen Auflösung1680 x 1050 anschaue das das Logo Versandkostenfrei über den rechten rand geht und das soll genau so angezeigt werden wie in der Normalen Auflösung 1920 x 1080 und ja genau auch um das welches hinter den Container verschwindet.
 

Sempervivum

Erfahrenes Mitglied
Da gibt es ja einige Probleme mit Überdeckungen, auch bei dem Schnäppchenpiet-Logo und dem SSL-Sichere Verbindung. Und das Free-Shipping-Logo ist, wenn man nicht im Vollbild ist, ganz rechts und nicht sichtbar. Ich würde daran denken, diese in eine eigene Zeile und im normalen Fluss zu platzieren.
 

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