|
|||
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; } } 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. |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
Bzw. deren Ableger mit 240, 320, 480
Aber wie gesagt ist das Ergebniss gleich geblieben ;( |
|
|||
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; } Den Parameter hab ich wie empfohlen entfernt. |
|
||||
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.) |
|
|||
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 |
|
|||
Zitat:
Der HTML/CSS Code der Seite ist halt entsprechend umfangreich. |
Sponsored Links |
|
|||
Zitat:
Werde mich nächste Woche um nachbesserung bemühen ^^ |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |