zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Media Querys - Layout geht wird über den Displayrand angezeigt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.05.2013, 22:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2009
Beiträge: 12
DarkNemesis84 befindet sich auf einem aufstrebenden Ast
Standard Media Querys - Layout geht wird über den Displayrand angezeigt

Ich versuche mich momentan an den media querys zur anpassung einer webseite für smartphones und verstehe da etwas nicht bzw. ergibt es keinen sinn?!

Ich habe:

Code:
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

    body {
      font-family: "Lucida Sans","Lucida Sans Unicode",Helvetica,Verdana;
      font-size: 12px;
      line-height: 20px;
      margin: 0;
      text-align: center;
    }

    p {
      margin: 5px 0px;
      font-size: 12px;
      line-height: 20px;
    }

    h1 {
      margin: 0px 0px 25px 0px;
      font-size: 20px;
      line-height: 22px;
    }

    h2 {
      margin: 50px 0px 10px 0px;
      font-size: 16px;
      line-height: 18px;
    }

    h3 {
      margin: 10px 0px;
      font-size: 14px;
      line-height: 16px;
    }

    h5 {
      margin: 20px 0px;
      font-size: 18px;
      line-height: 22px;
      color: #F57516;
    }

    h6 {
      margin: 20px 0px;
      font-size: 18px;
      line-height: 22px;
      text-decoration: line-through;
      color: #000000;
    }

    a:link,
    a:visited {
      text-decoration: none;
      color: #0099ff;
    }

    a:hover {
      color: #F57516;
    }

    img {
      border: none;
    }

    blockquote p {
      margin-top: 20px;
      font-size: 10px;
    }

    ul.csc-bulletlist {
      list-style: none;
      padding-left: 20px;
    }

    ul.csc-bulletlist li {
      background: url("/fileadmin/images/bullet.gif") no-repeat scroll 0 0 transparent;
      padding-left: 20px;
      margin-bottom: 4px;
      line-height: 19px;
    }

    #wrap {
      -moz-background-clip: border;
      -moz-background-inline-policy: continuous;
      -moz-background-origin: padding;
      background: #FFFFFF none repeat scroll 0 0;
      margin: 0 auto;
      /*overflow: hidden; Auskommentiert für Boxschatten 21.08.12 */
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
      width: 480px;
    }

    /* Header */
    #header-left {
      float: left;
      height: 60px;
      width: 450px;
    }

    #header-center {
      float: left;
      height: 35px;
      width: 175px;
      text-align: center;
    }

    #header-center span {
        display: inline-block;
        margin-top: 6px;
        margin-bottom: 3px;
        font-size: 11px;
    }

    #header-center .tel {
      display: inline-block;
      margin-top: -5px;
      font-size: 18px;
      line-height: 22px;
      color: #F57516;
      font-weight: bold;
    }

    #header-right {
      float: left;
      margin-top: 20px;
      margin-left: 75px;
      height: 40px;
      width: 199px;
      text-align: right;
    }

    /* Suchformular im Header */
    #header-right input {
      display: block;
      float: left; 
    }

    #header-right input {
      background: #FFFFFF;
      font-size: 14px;
    }

    #header-right input[type="text"] {
      border-top: 1px solid #cdcdcd;
      border-right: none;
      border-bottom: 1px solid #cdcdcd;
      border-left: 1px solid #cdcdcd;
      background: url("/fileadmin/images/icon_search.gif") no-repeat;
      background-position: 5px 5px;
      height: 21px;
      width: 100px;
      padding-left: 25px;
    }

    #header-right input[type="submit"] {
      margin-left: 10px;
      cursor: pointer;
    }

    #header-right input[type="text"] {
      padding-top: 4px;
      height: 18px;
    }

    /* Banner */
    #banner-start {
      clear: left;
      float: left;
      margin-top: 20px;
      height: 5px;
      width: 480px;
    }

    #t3sheaderslider {
      display: none;
    }

    #t3sheaderslider img {
      display: none;
    }

    #banner {
      clear: left;
      float: left;
      margin-top: 20px;
      height: 80px;
      width: 480px;
    }

    #nav,
    #banner img {
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 1px 5px 0 #4A4A4A;
      -moz-box-shadow: 0 1px 5px 0 #4A4A4A;
      -webkit-box-shadow: 0 1px 5px 0 #4A4A4A;
      height: 80px;
      width: 450px;
    }

    #row-left {
      display: none;
    }

    #sub-nav {
      display: none;
    }

    .promobox-top {
      float: left;
      margin-top: 20px;
      padding: 8px;
      background: url("../images/promobox-top.gif") top;
      width: 204px;
    }

    #sub-nav-footer,
    .promobox-footer {
      float: left;
      background: url("../images/sub-nav-footer.gif") no-repeat;
      height: 13px;
      width: 220px;
    }

    #row-right {
      float: left;
      margin-top: 20px;
      margin-left: 0px;
      width: 450px;
    }

    #row-right #margin {
      margin-left: 0px;
    }

    /* PROMOTION BOX */
    .youtube {
        clear: left;
        float: left;
        margin-top: 25px;
    }

    /* FACEBOOK c575 */
    /* GOOLGE PLUS c657 */
    #c575,
    #c657 {
      float: left;
      width: 80px;
      margin-top: 20px;
    }

    #c657 {
      margin-left: 10px; 
    }

    /* ADSENSE BOX */
    div.adsense {
      float: left;
      margin-top: 20px;
    }

    /* CONTENT */
    #print {
      text-align: right;
    }

    div.boxes img {
      margin-top: 20px;
      width: 220px;
    }

    div.divider {
      clear: both;
      margin: 30px 0px;
    }

    div.divider hr {
      display: none; 
    }
    
    /* Startpage */
    /* Quick Links */
    #quick-links {
      display: none;
    }

    #row-left-start {
      clear: left;
      float: left;
      margin-left: 0px;
      height: 300px;
      width: 450px;
    }

    #row-right-start {
      clear: left;
      float: left;
      margin-top: 25px;
      height: 300px;
      width: 450px;
    }

    #row-left-start img {
      float: left;
      margin: -2px 10px 0px 0px;
      height: 222px;  
    }

    #box-1 {
      float: left;
      background: #efefef;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 1px 5px 0 #4A4A4A;
      -moz-box-shadow: 0 1px 5px 0 #4A4A4A;
      -webkit-box-shadow: 0 1px 5px 0 #4A4A4A;
      height: 220px;
      width: 450px;
      overflow: hidden;
    }

    .tx-ghrandomcontent-pi1, 
    .tx-ghrandomcontent-pi1 div {
        height: 222px;
    }

    #box-1 h1 {
      margin-top: 0px;
      padding-top: 5px;
      font-size: 17px;
    }

    #box-1 h5 {
      margin: 10px 0; 
    }

    #box-2 {
      float: left;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 1px 5px 0 #4A4A4A;
      -moz-box-shadow: 0 1px 5px 0 #4A4A4A;
      -webkit-box-shadow: 0 1px 5px 0 #4A4A4A;
      margin-top: 20px;
      padding: 6px;
      height: 58px;
      width: 438px;
      overflow: hidden;
    }

    #box-2 h2 {
      margin-top: 0px;
      margin-bottom: 5px;
      font-size: 13px;
      line-height: 15px;
    }

    #box-1 p {
      padding: 5px;
    }

    /* Footer */
    #footer {
      clear: left;
      float: left;
      margin: 30px 0px;
      width: 450px;
      border-top: 1px solid #e7e7e7;
    }

    div.footer-section {
        clear: left;
        float: left;
        margin-top: 10px;
        border-top: 1px solid #e7e7e7;
    }

    div.footer-box {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      width: 195px;
    }

    div#c848 {
        clear: left;
        float: left;
        margin-left: 8px;
        margin-top: 14px;
    }

    div.footer-box p,
    div.footer-box td {
      font-size: 11px; 
    }

    div.footer-box table {
        margin-top: -7px;
        margin-left: -1px;
    }

    div.footer-box table tr td {
        margin-right: 5px;
        padding: 0px 15px 0px 0px !important;
        text-align: left;
        line-height: 15px;
    }

    #footer #print {
      display: none;
    }

    /* Zusätzliche Formatierungen */
    h1.quick-links,
    h2.quick-links {
      margin: 0px;
      padding: 5px 10px;
      background: url("../images/quick-links.gif") no-repeat;
      height: 19px;
      font-size: 14px;
      line-height: 16px;
      color: #FFFFFF;
    }

    h1.quick-links a,
    h2.quick-links a {
        background: none !important;
        color: #FFFFFF !important;
        font-size: 14px;
        height: 19px !important;
        line-height: 16px;
        margin: 0px !important;
        padding: 0px;
    }

    #quick-links a:link,
    #quick-links a:visited,
    #sub-nav a:link,
    #sub-nav a:visited {
      display: block;
      background: url("../images/quick-links-sep.gif") repeat-x bottom;
      margin: 8px 10px;
      height: 20px;
      color: #000000;
    }

    #quick-links a:hover,
    #sub-nav a:hover {
      color: #F57516;
    }

    .sub-nav-act,
    .third-navi-act {
      color: #F57516 !important;
    }

    .third-navi,
    .third-navi-act {
      padding-left: 15px;
    }

    #footer a:link,
    #footer a:visited {
      font-size: 10px;
      font-weight: lighter;
    }

    #gplus {
      margin: 7px;
    }

    .grey {
      clear: left;
      margin-top: 5px;
      font-size: 10px;
      color: #858585;
    }

    /* TWITTER / FACEBOOK */

    #facebook_wrapper,
    #twitter_wrapper {
      display: none;
    }

    #twitter,
    #facebook {
      display: none;
    }
    
    /* Extensions */
    .carouselContainer {
        width: 450px !important;
    }
    
    .caroufredsel_wrapper {
        width: 410px !important;
    }
    
    /* Typo3 */
    div.csc-textpic-border div.csc-textpic-imagewrap img,
    div.csc-textpic-border div.csc-textpic-image img {
      border: 1px solid #858585 !important;
    }

    .csc-textpic-caption {
      font-size: 10px;
      line-height: 14px;
      margin-left: 5px;
    }

    div.csc-textpic-border img,
    div.csc-textpic-image img  {
      float: right;
      margin-right: 5px !important;
    }

    #row-left div.csc-textpic-intext-right,
    #row-left div.csc-textpic-last,
    #row-left div.csc-textpic-above {
      margin-top: 0px;
    }

    .csc-textpic-intext-right img {
        margin-bottom: 5px;
    }

    .csc-searchform {
      margin-top: 20px;
    }

    .contenttable th,
    .contenttable td {
      text-align: center;
    }

    table th {
      margin: 5px 0px 15px 0px;
      font-size: 14px;
    }

    table td {
      text-align: left;
      padding: 1px 5px !important;
    }

    .clear {
        clear: both;
    }

    /* REMOVE BLUR */
    :focus {
      outline: solid 0;
    }

    :active {
      border: 0;
    }

    a.salesworker-container {
        display: none !important;
    }
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    
    #wrap {
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      width: 430px;
    }
    
    /* HEADER */
    #header-left {
      width: 445px;
    }
    
    #header-left img {
        width: 445px;
    }
    
    #header-center {
      width: 180px;
    }
 
    #header-right {
      margin-left: 20px;
      width: 230px;
    }
    
    #header-right form {
        margin-left: 0px;
    }
    
    #header-right input[type="text"] {
      width: 170px;
      padding-left: 20px;
    }
    
    #banner-start {
        display: none;
    }
    
    /* CONTENT */
    #row-left-start {
      width: 425px;
    }

    #row-right-start {
      width: 425px;
      margin-left: 0px;
    }
    
    #banner {
      display: none;
    }
    
    #box-1 {
      width: 425px;
    }
    
    #box-2 {
      width: 413px;
    }
    
    div.boxes img {
      width: 425px;
    }
    
    #row-right {
      width: 425px;
    }
    
    .carouselContainer {
        width: 425px !important;
    }
    
    .caroufredsel_wrapper {
        width: 390px !important;
    }
    
    #footer {
      width: 425px;
    }
    
    div.footer-box {
      margin-left: 5px;
      width: 205px;
    }
    
    div.footer-section div.footer-box {
      width: 200px;
    }
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
   
    /* FONTS */
    h1 {
        font-size: 14px;
        line-height: 16px;
    }
    
    h2 {
        font-size: 13px;
        line-height: 15px;
    }
    
    h5 {
        color: #F57516;
        font-size: 13px;
        line-height: 15px;
        margin: 10px 0;
    }
    
    p {
        font-size: 12px;
        line-height: 14px;
        margin: 4px 0;
    }
    
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 273px;
    }
    
    /* HEADER */
    #header-left {
        height: 41px;
        width: 275px;
    }
    
    #header-left img {
        width: 275px;
    }
    
    #header-center {
        width: 273px;
    }
 
    #header-right {
        margin-left: 0px;
        width: 273px;
    }
    
    #header-right form {
        margin-left: 0px;
    }
    
    #header-right input[type="text"] {
        width: 217px;
        padding-left: 20px;
    }
    
    #banner-start {
        display: none;
    }    
    
    /* CONTENT */
    #row-left-start {
        width: 275px;
        margin-top: 25px;
    }

    #row-right-start {
         width: 275px;
         margin-left: 0px;
    }
    
    #banner {
        display: none;
    }
    
    #box-1 {
        height: auto;
        width: 275px;
    }
    
    #box-1 h1 {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 10px;
    }
    
    #box-2 {
        width: 264px;
    }
    
    .tx-ghrandomcontent-pi1, 
    .tx-ghrandomcontent-pi1 div {
        height: auto;
    }
    
    #row-left-start img {
        height: 190px;
        width: 139px;
    }
    
    div.boxes img {
        width: 275px;
    }
    
    #row-right {
        width: 275px;
    }
    
    .carouselContainer {
        width: 275px !important;
    }
    
    .caroufredsel_wrapper {
        width: 260px !important;
    }
    
    #footer {
        width: 270px;
    }
    
    div.footer-box {
        margin-left: 5px;
        width: 125px;
    }
    
    div.footer-section div.footer-box {
        width: 273px;
    }
    
}

@media only screen and (max-width: 240px), only screen and (max-device-width: 240px) {
    
    /* FONTS */
    h1 {
        font-size: 14px;
        line-height: 16px;
    }
    
    h2 {
        font-size: 13px;
        line-height: 15px;
    }
    
    h5 {
        color: #F57516;
        font-size: 12px;
        line-height: 14px;
        margin: 10px 0;
    }
    
    p {
        font-size: 11px;
        line-height: 13px;
        margin: 3px 0;
    }
    
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 190px;
    }
    
    /* HEADER */
    #header-left {
        height: 32px;
        width: 190px;
    }
    
    #header-left img {
        width: 190px;
    }
    
    #header-center {
        width: 190px;
    }
 
    #header-center span {
        font-size: 10px;
    }
    
    #header-center .tel {
        color: #F57516;
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        margin-top: -5px;
    }
    
    #header-right {
        clear: left;
        float: left;
        margin-left: 0px;
        width: 190px;
        text-align: left;
    }
    
    #header-right form {
        margin-left: 0px;
    }
    
    #header-right input[type="text"] {
        float: left;
        width: 135px;
        padding-left: 20px;
    }  
    
    #banner-start {
        display: none;
    }
    
    /* CONTENT */
    #row-left-start {
        height: auto;
        width: 188px;
        margin-top: 10px;
    }
    
    #print {
        display: none;
    }
    
    .tx-ghrandomcontent-pi1, 
    .tx-ghrandomcontent-pi1 div {
        padding: 5px 5px 5px 10px;
        height: auto;
    }
    
    #row-left-start img {
        display: none;
    }
    
    #box-1 h1 {
        font-size: 13px;
        line-height: 15px;
        margin-top: 0px;
        margin-bottom: 10px;
        padding-top: 5px;
    }
    
    #box-1 p {
        padding-left: 0px;
    }

    #row-right-start {
        margin-top: 20px;
        margin-left: 0px;
        width: 188px;
    }
    
    #banner {
        display: none;
    }
    
    #box-1 {
        height: auto;
        width: 188px;
    }
    
    #box-2 {
        height: auto;
        width: 176px;
    }
    
    div.boxes img {
        width: 190px;
    }
    
    #row-right {
        width: 190px;
    }
    
    .breadcrumbs {
        width: 190px;
    }
    
    .tx-jpcarousel-pi1 {
        display: none;
    }
    
    ul.csc-bulletlist {
        padding-left: 0px;
    }
    
    /* SUCHE */
    .tx-indexedsearch .tx-indexedsearch-searchbox INPUT.tx-indexedsearch-searchbox-sword, 
    .tx-indexedsearch .tx-indexedsearch-searchbox INPUT.tx-indexedsearch-searchbox-button {
        margin-top: -10px;
        width: 115px;
    }
    
    .tx-indexedsearch-descr, 
    .tx-indexedsearch-info {
        display: none;
    }
    
    .browsebox {
        display: none;
    }
    
    /* Footer */
    #footer {
        width: 190px;
    }
    
    div.footer-box {
        margin-left: 5px;
        width: 157px;
    }
    
    div.footer-section div.footer-box {
        width: 190px;
    }
}
angelegt und mit einem HTC One Dolphin getestet.

Dabei wurde korrekterweise der media query mit der width 480 ausgewählt, dieser wird aber im hochformat so angezeigt, dass das Layout über den Seitenrand hinaus geht. Das dürfte bei einer auflösung von 720 in der Breite nicht passieren? Normalerweise müsste es sogar noch weißen Rand li und re geben.

Hab ich da einen Verständnisfehler? Fehlt was im media query?

Den Viewport habe ich im meta wie folgt gesetzt:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Zu finden ist das Projekt auf www.digitale-fotografien.com
Bisher geht es nur um die Startseite.
__________________
---
Fotograf Essen

Grill Profis

Love SMS
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.05.2013, 23:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2009
Beiträge: 12
DarkNemesis84 befindet sich auf einem aufstrebenden Ast
Standard

Habs einmal entfernt, aber das Ergebnis ist das gleiche.

Interessant finde ich es aber auch, dass wenn ich das Handy von Hoch auf Quer und wieder auf Hoch stelle das Design korrekt dargestellt wird.

Das haben mir aber auch andere bestätigt beim Testen auf anderen HTCs und Galaxy Handys. Beim Reload der Seite wird das Layout wieder wie gehabt zu groß dargestellt.
__________________
---
Fotograf Essen

Grill Profis

Love SMS
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.05.2013, 00:01
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Den Beitrag von mir, auf den DarkNemesis geantwortet hat habe ich zuvor gelöscht.
Es ging um Diesen Schnipsel:
Code:
, only screen and (max-device-width: 768px)
__________________
MfG
Jens
Mit Zitat antworten
  #4 (permalink)  
Alt 05.05.2013, 00:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2009
Beiträge: 12
DarkNemesis84 befindet sich auf einem aufstrebenden Ast
Standard

Bzw. deren Ableger mit 240, 320, 480

Aber wie gesagt ist das Ergebniss gleich geblieben ;(
__________________
---
Fotograf Essen

Grill Profis

Love SMS
Mit Zitat antworten
  #5 (permalink)  
Alt 05.05.2013, 04:29
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du produzierst ständig eine Überbreite: #wrap ist fast immer zu breit. Du machst einen Denkfehler: Gibst #wrap z.B. für max-width: 786px eine Breite, die gerade eben passt, aber wenn der Viewport kleiner wird, behält #wrap diese Breite und wird daher zu breit - je schmaler der Viewport wird, desto krasser die Überbreite.

Erst viel später wird sie endlich reduziert, wenn per max-width: 480px ein neuer Wert kommt, der wieder gerade eben passt, aber dann geht das Spiel von vorne los: Zieht man den Viewport schmaler, wird die Überbreite immer krasser.

Unabhängig davon wirf maximum-scale=1.0 raus - das iPhone/iPad-Fehlverhalten, für das man diesen (benutzerunfreundlichen) Wert dazugenommen hat, ist längst beseitigt (seit iOS 6, das bzgl. Marktanteil die älteren Versionen bereits fast komplett verdrängt hat).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #6 (permalink)  
Alt 05.05.2013, 10:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2009
Beiträge: 12
DarkNemesis84 befindet sich auf einem aufstrebenden Ast
Standard

Wrap hat eigentlich (Ausnahme Code oben bei 786) immer eine geringere Breite und einen Margin.

s. aktuellste Code ausschnitte:

Code:
@media only screen and (max-width: 240px) {
...
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 190px;
    }

@media only screen and (max-width: 320px) {
  ...   
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 273px;
    }

@media only screen and (max-width: 480px) {
    ...
    #wrap {
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      width: 430px;
    }

@media only screen and (max-width: 768px) {
...
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 720px;
    }
Das Problem ist mit dem Code bei mir aber immer noch vorhanden ;(
Den Parameter hab ich wie empfohlen entfernt.
__________________
---
Fotograf Essen

Grill Profis

Love SMS
Mit Zitat antworten
  #7 (permalink)  
Alt 05.05.2013, 12:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von DarkNemesis84 Beitrag anzeigen
Das Problem ist mit dem Code bei mir aber immer noch vorhanden
Und Dein Denkfehler auch noch: Welche Regel wirkt bei einem Viewport mit 321px? Und welche Breite benötigt #wrap dann? (richtig, #wrap ist dann 139px zu breit.)

Setze width von #wrap generell auf auto, sobald Du das fixe Layout auflöst (d.h. sobald die Viewport-Breite die 940px Deines fixen Standard-Layouts unterschreitet), alles andere bringt nix.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #8 (permalink)  
Alt 05.05.2013, 13:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

mir fällt folgendes auf, was für mich nicht zusammenpasst:

a) Media Queries (inklusiv Responsive Design?)

b) starre Breitenangaben

c) Doctype XHTML

Wenn man flexible Seiten für alle Bildschirmgrössen erstellen will, sollte man konsequent HTML5/CSS3 mit flexiblem Responsive Design einsetzen. Alles andere ist halber Kram, der in der Praxis nur Probleme verursacht.

Ich weiss jetzt nicht, in wie weit du Einfluss auf den HTML/CSS-Quelltext hast (CMS? Blogsystem?), aber den solltest du zusätzlich gewaltig entschlacken.

Gruss

MrMurphy
Mit Zitat antworten
  #9 (permalink)  
Alt 05.05.2013, 22:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2009
Beiträge: 12
DarkNemesis84 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo,

mir fällt folgendes auf, was für mich nicht zusammenpasst:

a) Media Queries (inklusiv Responsive Design?)

b) starre Breitenangaben

c) Doctype XHTML

Wenn man flexible Seiten für alle Bildschirmgrössen erstellen will, sollte man konsequent HTML5/CSS3 mit flexiblem Responsive Design einsetzen. Alles andere ist halber Kram, der in der Praxis nur Probleme verursacht.

Ich weiss jetzt nicht, in wie weit du Einfluss auf den HTML/CSS-Quelltext hast (CMS? Blogsystem?), aber den solltest du zusätzlich gewaltig entschlacken.

Gruss

MrMurphy
Ist ein Typo3, also bedingt hat man natürlich auf alles einen EInfluss, jedoch will ich kein Re-Design der Seite machen, sondern nur entsprechend das was vorhanden ist best möglich auf Mobilen Geräten wieder geben.

Der HTML/CSS Code der Seite ist halt entsprechend umfangreich.
__________________
---
Fotograf Essen

Grill Profis

Love SMS
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.05.2013, 23:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2009
Beiträge: 12
DarkNemesis84 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Und Dein Denkfehler auch noch: Welche Regel wirkt bei einem Viewport mit 321px? Und welche Breite benötigt #wrap dann? (richtig, #wrap ist dann 139px zu breit.)

Setze width von #wrap generell auf auto, sobald Du das fixe Layout auflöst (d.h. sobald die Viewport-Breite die 940px Deines fixen Standard-Layouts unterschreitet), alles andere bringt nix.
OKay, ich denke ich habe den Fehler verstanden
Werde mich nächste Woche um nachbesserung bemühen ^^
__________________
---
Fotograf Essen

Grill Profis

Love SMS
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
mit media queries das layout verändern netinja CSS 2 09.11.2012 12:49
Media Querys funktionieren nicht iceman_fx CSS 1 05.07.2012 13:16
Was bevorzugt ihr - fixes, fluides oder elastisches Layout mimii CSS 0 19.12.2011 21:12
Bitte um Hilfe - CSS und Prozentangaben sprefer CSS 3 01.03.2011 05:11
Untermenü im IE nici CSS 10 22.06.2009 22:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:36 Uhr.