# div und css Reponsiv?



## Shorty1968 (11. November 2018)

Hallo,
ich habe mir in meiner html Datei mit Folgenden Code ein Bild eingebunden.

```
<div class="freeShipping"><img src="{$tpl_path}img/freeShipping.png" alt="" /></div>
```
und in der styleseet.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 (11. November 2018)

wahrscheinlich deine mega margin Werte  in @media queries ändern


----------



## Shorty1968 (11. November 2018)

ich habe es hin bekommen aber wie ist das bei der Auflösung einen PC Bildschrim da muss man etwas anderes machen oder?


----------



## basti1012 (11. November 2018)

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 (11. November 2018)

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 (11. November 2018)

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 ?


----------



## Shorty1968 (11. November 2018)

Gerne https://schnaepchenpiet.shop/


----------



## basti1012 (11. November 2018)

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 (11. November 2018)

kein Problem bin ja nicht berühmt.

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 (11. November 2018)

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 (11. November 2018)

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 (11. November 2018)

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 (11. November 2018)

> 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 (11. November 2018)

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


----------



## Sempervivum (11. November 2018)

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 (11. November 2018)

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


----------



## Shorty1968 (11. November 2018)

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 (11. November 2018)

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 (11. November 2018)

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


----------



## Sempervivum (11. November 2018)

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


----------



## Shorty1968 (11. November 2018)

Vielen dank euch beiden nun habe ich es.


----------

