Ankündigung

Einklappen
Keine Ankündigung bisher.

Mobile Darstellung's Problem

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Mobile Darstellung's Problem

    ich habe ein Problem und zwar, wenn ich über Handy rauf gehe, sieht es folgendermaßen aus:



    Im Vertikalen Bild sieht man, wie der HG richtig aussieht, aber im Horizontalen nicht.Dazu kommt auch, das im Horizontalen Bild der Text eine große Lücke ist, obwohl ich es richtig angepasst habe und im Vertikalen ist der Text weit oben, zu weit.Was ist das Problem? Hier der HTML und CSS Code:
    HTML
    Code:
    $(document).ready(function () {    $('body').bgStretcher({        images: ['images/slide-1.jpg', 'images/slide-2.jpg'],        imageWidth: 1600,        imageHeight: 964,        resizeProportionally: true,        slideDirection: 'N',        slideShowSpeed: 2000,        transitionEffect: 'fade',        sequenceMode: 'normal',        pagination: '#nav'    });
    CSS :
    Code:
    @import"reset.css";@import"grid.css";@import url(http://fonts.googleapis.com/css?family=Noto+Sans);body {    font:12px/19px Arial, Helvetica, sans-serif;        color:#848383;    position:relative;    min-width:1036px;    background:#000}html, body {    height:100%;}html {    min-width:100%}/* Global Structure---------------------------------------- */.main {    margin:0 auto;    width:940px;    position:relative;}.container_12 {    position:relative;}/*----- txt,links,lines,titles -----*/    .box-1{     border-radius:13px;    -moz-border-radius:13px;    -webkit-border-radius:13px;    position:relative;    padding-bottom:12px    }    .box-1 img{     width:100%;     border-radius:13px 13px 0 0;    -moz-border-radius:13px 13px 0 0;    -webkit-border-radius:13px 13px 0 0;        }     .box-1  figcaption{    background:#cd96c9;    position:absolute;    display:block;    bottom:0;    left:0;    right:0;    font-size:20px;    line-height:22px;    color:#fff;    padding:12px 70px;    text-align:center;    border-radius:0 0 13px 13px;    -moz-border-radius:0 0 13px 13px;    -webkit-border-radius:0 0 13px 13px;        }.box-1  figcaption a{background:url(../images/marker-1.png) no-repeat 0 0;width:31px;height:31px;display:block;position:absolute;top:8px;right:39px}.box-1  figcaption a:hover{background-position:0 bottom}    h1, h2, h3, h4, h5, h6 {    color:#fff;    position:relative;    line-height:1em;    font-weight:normal}h1 {    font-size:32px;    line-height:34px;}h2 {    font-size:30px;    line-height:32px;    padding-bottom:28px}h3 {    font-size:36px;        font-family: 'Noto Sans', sans-serif;    text-decoration:underline;    padding-bottom:46px}h4 {    font-size:20px;    line-height:24px;    color:#ef97cc;    font-family:Georgia, "Times New Roman", Times, serif;    padding:14px 0 10px;    }h4 a{color:#ef97cc;}h5 {    font-size:20px;    line-height:22px;    color:#7c7c7c;    padding-bottom:30px}h6 {    font-size:16px;    line-height:18px;}a {    text-decoration:none;    cursor:pointer}a:focus {    outline:none;}a:hover {    text-decoration:underline}.clear {    clear:both;    line-height:0;    font-size:0;    overflow:hidden;    height:0;    width:100%;    margin:0;    padding:0;    display:block;}.wrapper {    width:100%;    overflow:hidden;    position:relative;}.extra-wrap {    overflow:hidden;    display:block;}p {color:#fff;    padding-bottom:19px;}.fleft {    float:left}.fright {    float:right}.alignright {    text-align:right}.aligncenter {    text-align:center}.overflow {    overflow:hidden}.relative {    position:relative;}.img-indent {    float:left;    margin:8px 20px 0 0;}.block {position:relative;z-index:100}.extra-block,.extra-block1 { ;min-height:36%; margin: 0 auto -38px; position:relative; }.extra-block{background:url(../images/tail-bg-cont.png) repeat-x 0 bottom}.extra-block1{ margin: 0 auto -5%;}/**********row-top*************/.row-top{overflow:hidden;background:url(../images/tail-bg-top.png);padding:28px 0 17px;position:relative;z-index:10}.list-soc{float:right;margin-right:6px}.list-soc li{float:left;margin-left:8px;}.list-soc li a{display:block;  opacity: 1;  filter: alpha(opacity=100);}.list-soc li a:hover{opacity: 0.7;  filter: alpha(opacity=70);}/**********bgstretcher*************/.bgstretcher {    background: black;    overflow: hidden;    width: 100%;    height:100%;    position: fixed !important;    z-index: 1;    top: 0;    left: 0;}.bgstretcher UL,.bgstretcher UL LI {    position: absolute;    top: 0;    left: 0;    z-index:1;}.bgstretcher UL,.bgstretcher UL LI {    margin: 0;    padding: 0;    list-style: none;}.bgstretcher-area,.bgstretcher-page{height:100%}.nav-buttons{text-align:center;padding-bottom:17px;}#nav{overflow:hidden;display:inline-block}#nav li{float:left;overflow:hidden;margin:0 10px}#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;width:19px;height:19px;line-height:0;font-size:0;}#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}/*********************************header*************************************/header {    position:relative;    z-index:20;}header h1 {    z-index:10;        display:block;    float:left;    padding:0}.row-nav {    background:url(../images/tail-bg-nav.png);    padding:6px 0 11px}nav{float:right;padding:12px 0 0 0}.menu {    font-size:0;    line-height:0;    padding:0;    z-index:99;    position:relative;    margin-right:21px;}.menu > li {    position:relative;    float:left;        margin-left:11px;     border-radius:5px;    -moz-border-radius:5px;    -webkit-border-radius:5px;    background:url(../images/point.png)}.menu li  a{    color:#b3adad;    font-size:18px;    line-height:20px;    display:block;           position:relative;    text-decoration:none !important;        padding:7px 12px 9px;    font-family: 'Noto Sans', sans-serif;    }        .menu li.current,.menu li:hover {background:#cd97c9;}.menu li.current a,.menu li:hover a{color:#fff}/********************** Content style ************************/section#content {    position:relative;    z-index:10;    padding:92px 0;    }.border-vert{background:url(../images/border-vert.png) repeat-y 477px 0}.img-rounded img{      border-radius:13px;    -moz-border-radius:13px;    -webkit-border-radius:13px;}.img-rounded1 img{      border-radius:8px;    -moz-border-radius:8px;    -webkit-border-radius:8px;}.img-indent{margin:39px 0 35px}.row-1{background:url(../images/tail-bg-top.png);padding:21px 0 23px}.main-block{width:1036px;margin:0 auto;background:url(../images/tail-cont.png);     padding:38px 0;     border-radius:13px;    -moz-border-radius:13px;    -webkit-border-radius:13px;        min-height: 565px;}/********************** links  & buttons ************************/.link-1 {    display:inline-block;    color:#f4bfdf;}.button {    display:inline-block;    font-family: 'Noto Sans', sans-serif;    color:#fff;    font-size:17px;    line-height:1.2em;    background:#ae81aa;    padding:6px 12px 7px;    border-radius:5px;    -moz-border-radius:5px;    -webkit-border-radius:5px;    margin-top:2px}.button:hover {        background:#000;    text-decoration:none;}/*  Lists */.list-services{}.list-services > li{padding-top:6px}.list-services > li:first-child{padding:0;}/*  Lists */.list {    padding:0 0 27px}.list li {    margin-bottom:2px;    line-height:16px;}.list li a {    color:#fff;    font-size:14px;        background:url(../images/marker-2.png) no-repeat 1px 5px;        padding:0 0 0 18px;    }/*----- es-carousel -----*/.es-carousel-wrapper {  position: relative;  z-index: 99;}.es-carousel {  overflow: hidden;}.es-carousel ul {  display: none;  overflow:hidden}.es-carousel ul li {  height: 100%;  float: left;  display: block;   width:300px}.es-carousel ul li figure{margin-bottom:26px}.es-nav {  right: 0;  bottom: -30px;  position: absolute;}.es-nav span {  display: block;  line-height: 0;  font-size: 0;  width: 32px;  height: 33px;  text-indent: -5000px;  z-index: 99;  cursor: pointer;  display:inline-block !important;  }.es-nav span.es-nav-next {  background: url(../images/next.png) no-repeat 50% 50% #a97ca5;        border-radius:0 6px 6px 0;    -moz-border-radius:0 6px 6px 0;    -webkit-border-radius:0 6px 6px 0;    border-left:1px solid #cbadc8}.es-nav span.es-nav-prev { background: url(../images/prev.png) no-repeat 50% 50% #a97ca5;         border-radius:6px 0 0 6px ;    -moz-border-radius:6px 0 0 6px ;    -webkit-border-radius:6px 0 0 6px ;    border-right:1px solid #735470 }.es-nav span:hover {background-color:#92538d}/* Lightbox image */.magnifier {    position:relative;    overflow:hidden;    display:inline-block;}.magnifier img {    position:relative;    z-index:2;  opacity: 1;  filter: alpha(opacity=100);    }.magnifier span {    display:block;    position:absolute;    left:0;    top:0;    width:100%;    height:100%;     background:url(../images/fancybox/magnify.png) center center no-repeat;        z-index:1;}/*----- map -----*/.map {    margin:0 0 31px;    }.map iframe {    height:259px;    overflow: hidden;    width:100%;         border-radius:20px;    -moz-border-radius:20px;    -webkit-border-radius:20px;}/*----- address -----*/.mail-1 {    color:#fff;    display:inline-block;    text-decoration:underline;}.mail-1:hover {    text-decoration:none}dl.address dt{padding-bottom:18px}dl.address dt span {    display:block;}dl.address dt,dl.address dd {    font-size:14px;    line-height:18px;    color:#848383;}dl.address dd span {    display:inline-block;    width:100px;}/***** contact form *****/#contact-form {  position: relative;  vertical-align: top;  z-index: 1;  margin: -2px 0 0;}#contact-form div {  overflow: hidden;}#contact-form fieldset {  border: none;  padding: 0;  width: 100%;  overflow: hidden;  position: relative;  z-index: 10;}#contact-form label {  display: block;  min-height: 45px;  position: relative;  margin: 0;  padding: 0;  float: left;  width: 100%;}#contact-form .message {  min-height: 313px;  display: block !important;  width: 100%;}#contact-form input,#contact-form textarea {    font-family:Arial, Helvetica, sans-serif;    font-weight:normal;  border: 1px solid #49413d;  background: url(../images/tail-input.png);  padding: 5px 15px;  margin: 0;  font-size: 16px;  line-height: 20px !important;  color: #b0adac;  outline: none;  width: 220px;  -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;  float: left;  -webkit-border-radius: 0;  -moz-border-radius: 0;  border-radius: 0;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}#contact-form input {  height: 30px;}#contact-form input:focus,#contact-form textarea:focus {  -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;}#contact-form .area .error {  float: none;}#contact-form textarea {  width: 100%;  height: 273px;  resize: none;  overflow: auto;}#contact-form .success {  border: 1px solid #49413d;  background: #000;  display: none;  position: absolute;  left: 0;  font-family:Arial, Helvetica, sans-serif;  top: 0;  color: #fff;  font-size: 18px;  line-height: 22px;  text-align: center;  text-transform: none;  width: 100%;  z-index: 20;  padding: 12px 0;}#contact-form .success span {  display: block;  text-align: center;  padding: 26px 10px;}#contact-form .success strong {  font-weight: normal;  display: block;  color: #807c79;}#contact-form .error,#contact-form .empty {  color: #f00;  font-size: 11px;  line-height: 1.27em;  display: none;  overflow: hidden;  padding: 2px 4px 0px 0;    text-transform: none;  position: absolute;  bottom: 28px;  left: 223px;}#contact-form .message .error,#contact-form .message .empty {  bottom: 22px;  left:0;}.buttons-wrapper {  position: relative;}.buttons-wrapper a {  margin-right: 48px;  cursor: pointer;}/******************** Footer ******************/footer {    padding:9px 0;    background:#000}.privacy {    color:#fcf9f9;    font-size:12px;    line-height:20px;    }.privacy span{color:#747373;margin:0 4px}.privacy strong{color:#747373;font-weight:normal;}.privacy strong a{color:#747373}.privacy a {    font-size:12px;    color:#fcf9f9;        display:inline-block;}
    Danke schonmal für eure Hilfe.

    HP www.teccistopia.de/wellness

  • #2
    Also so richtig Spaß macht es nicht, die komplette CSS durchsuchen zu müssen.
    Was ich allerdings erkenne ist, daß Du top:0, left:0 und height:100% scheinbar auf ein position:absolute Element anwendest.
    Insofern machen beide Ansichten das richtige!

    Für weitere Infos, solltest Du bitte nur den relevanten Teil des CSS bzw. jQuery formatiert posten!
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      Tut mir leid, hab das schnell kopiert und nicht darauf geachtet, die HP ist auch abgelaufen, hier nochmal in Schön:
      HTML:
      PHP-Code:
      $(document).ready(function () {
          $(
      'body').bgStretcher({
              
      images: ['images/slide-1.jpg''images/slide-2.jpg'],

              
      imageWidth1600,
              
      imageHeight964,
              
      resizeProportionallytrue,
              
      slideDirection'N',
              
      slideShowSpeed2000,
              
      transitionEffect'fade',
              
      sequenceMode'normal',
              
      pagination'#nav'
          
      });
      });
      </script> 
      CSS:
      PHP-Code:
      /**********bgstretcher*************/

      .bgstretcher {
              
      background:black
          overflow
      hidden;
          
      width100%;
          
      height:100%;
          
      positionfixed !important;
          
      z-index1;
          
      top0;
          
      left0;

      }
      .
      bgstretcher UL,
      .
      bgstretcher UL LI {
          
      positionabsolute;
          
      top0;
          
      left0;
          
      z-index:1;
      }
      .
      bgstretcher UL,
      .
      bgstretcher UL LI {
          
      margin0;
          
      padding0;
          list-
      stylenone;
      }

      .
      bgstretcher-area,.bgstretcher-page{height:100%}

      .
      nav-buttons{text-align:center;padding-bottom:17px;}
      #nav{overflow:hidden;display:inline-block}
      #nav li{float:left;overflow:hidden;margin:0 10px}
      #nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
      width:19px;height:19px;
      line-height:0;font-size:0;
      }
      #nav li a:hover,#nav li.showPage a{background-position: 0 bottom} 
      Sonst hier noch die HP: http://bazs1.esy.es/

      Kommentar


      • #4
        Da ich den bgStretcher nicht kenne, muß ich generell bei meiner vorherigen Aussage bleiben.
        Ob imageWidth und -Height durch resizeProportionally beeinflusst werden, müsste in der Doku stehen.
        Ansonsten macht Dein jQuery nichts, was die CSS-Regeln überschreibt.
        Competence-Center -> Enjoy the Informatrix
        PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

        Kommentar


        • #5
          Also ich habe es schon so versucht,
          imageWidth: 1600,
          imageHeight: 964,
          weg
          resizeProportionally: true,
          stehen lassen.

          imageWidth: 1600,
          imageHeight: 964,
          stehen lassen,
          resizeProportionally: true,
          weg.

          imageWidth: 1600,
          imageHeight: 964,
          resizeProportionally: true,
          alles weg aber nichts von den hat funktioniert.

          Kommentar


          • #6
            Die Programmierer von bgstretcher bieten auf Ihrer Website an, die Integration und Anpassung für 49 Dollar zu übernehmen. Lass es doch von denen machen, das ist doch wesentlich billiger als sich und andere damit stundenlang zu beschäftigen.

            Kommentar


            • #7
              Ich möchte es schon kostenlos hinkriegen, ich habe es schon auf PC Hinbekommen das meine boxen wo der Text z. B. Drin steht, das dieser nicht so hoch ist wie in den mobilen vertikalen Bild aber halt über Handy stimmt irgendwas nicht.

              Kommentar


              • #8
                Das geht eigentlich auch mit reinem css:
                Code:
                body {
                  background: transparent url(images/slide-1.jpg) no-repeat left top;
                  background-size: cover;
                }
                Und für schmale geräte im portrait-mode kannste per media query ein optimiertes bild einbinden.
                Das hier:
                Code:
                html, body {
                   height: 100%;
                ist unglücklich, würd ich rausnehmen oder auf min-height: 100% setzen.
                I like cooking my family and my pets.
                Use commas. Don't be a psycho.
                [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                Kommentar

                Lädt...
                X