nicht angemeldet
unerklärliches Verhalten der Breite
Matthias ApselHi Leute,
ich probier mich grade zum ersten Mal an einem responsiven Design, das klappt soweit auch eigentlich ziemlich gut. Nur verstehe ich gerade nicht das Verhalten eines p-Elements.
Hier mal der relevante HTML-Code:
<body>
<div id="wrapper">
<article id="sitecontent">
<section>
<p>[hier steht eigentlich viel Text]</p>
</section>
</div>
</body>
Und hier alle CSS-Regeln die auf das p-Element Einfluss nehmen (laut Firebug):
p {
background-color: #454A4F;
}
body * {
-moz-box-sizing: border-box;
}
body {
color: #FFFFFF;
}
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 48px;
}
Das section-Element (quasi das Eltern-Element) hat eine breite von 100% da display: block und auch die gleiche Hintergrundfarbe, wie das p-Element, allerdings, wenn ich dem p-Element keine Hintergrundfarbe verpasse, dann hat nur eine breite von ca. 50% auf dem Android-Smartphone mit dem ich testen kann, bzw. auch mit dem Emulator des Android SDKs.
Wenn hingegen eine Hintergrundfarbe gesetzt wird, dann bekommt das p-Element auch seine 100% Breite.
Das Verhalten zeigt sich auch bei a-Elementen bei denen die Eigenschaft display auf block gesetzt wurde.
background-color: transparent; hilft auch nicht.
Eine Testseite ist hier erreichbar. (Inhalt ignorieren, Werbung wird von ohost reingeprügelt, für Tests hab ich bis dato noch eine fixe Schriftgröße von 48px für reine Testzwecke)
"Wir freuen uns.." ist besagtes p-Element mit Hintergrundfarbe. "Fachbücher dsfds fsdf sdfsdfsd dsf sfds" ist besagtes a-Element mit display: block;, dass das gleiche Verhalten zeigt, als wenn das p-Element keine Hintergrundfarbe hätte.
Kann mir jemand das Verhalten erklären?
MfG
bubble
--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
-
Was keiner woran das liegt?
MfG
bubble--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye-
Om nah hoo pez nyeetz, bubble!
mach mal bitte eine handlichere Testseite. Es müsste ja auch bei kleineren Größen sichtbar sein.
Matthias
--
1/z ist kein Blatt Papier.
-
So, ich habs mal ein wenig kleiner gemacht.
Die Seite ist wieder unter http://tdv.td.ohost.de/reptest/ erreichbar.
Mir fällt grad auf, dass ich im Anfangspost vergessen hab zu sagen, dass das sonderbare Verhalten nur beim Smartphone & Smartphone-Emulator auftritt.
Hier mal zwei Screenshots:
http://tdv.td.ohost.de/reptest/browser.png
http://tdv.td.ohost.de/reptest/smartphone.pngDie rotgerahmten Elemente sind beide
display: block;, nur auf dem Smartphone zicken sie halt rum =|CSS laut Firebug für das p-Element:
p, a { border: 1px solid red; } body * { -moz-box-sizing: border-box; } body { color: #FFFFFF; } body { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 24px; }CSS laut Firebug für die a-Elemente:
#menu_mobile a, #cats_mobile a { color: #FFFFFF; display: block; padding: 0 0 0 0.75em; } p, a { border: 1px solid red; } body * { -moz-box-sizing: border-box; } #menu_mobile li, #cats_mobile li { list-style-image: none; list-style-type: none; } body { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 24px; }MfG
bubble--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye-
Das, was mich am meisten verwundert, ist, dass wenn kein automatischer Zeilenumbruch gebraucht wird, hat es die volle Breite (zur Beobachtung schaue man auf "Bücher" und "Fachbücher dsfds...")
MfG
bubble--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
-
-
-
-
Hab die Ursache/meinen Fehler gefunden.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />Hab die Meta-Angaben für den Viewport vergessen, dadurch wurde der Zeilenumbruch für ungezoomte Darstellung berechnet, dargestellt wurde aber in herausgezoomter Ansicht.
MfG
bubble--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
