| Autor |
Nachricht |
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht: 
|
Verfasst Fr 23.03.2012 00:22
Titel Footer mit "width: 100%" streikt manchmal |
  |
|
Hallo,
ich baue mir eine Seite mit HTML 5 und CSS 3 auf. Ich hab meinen Seitenbereich mit einem Hintergrundbild und meinen Footer mit einem Hintergrundbild. Der obere Bereich geht fantastisch durch, der untere in manchen Browsern (z.B. Safari für iOS, IE auf Windows etc.) manchmal nicht durch, manchmal wohl (je nach Version/System). Beispiel Anzeigefehler iPad
Wo ist mein Fehler?!
HTML
| Code: | <body>
<div id="site">
<div id="wrapper">
Blablabla
</div> <!-- #wrapper -->
</div> <!-- #site -->
<footer>
<section>
Blablabla
</section>
</footer>
</body> |
CSS
| Code: | body {
background-image: url("../img/h-bg.jpg");
background-position: center top;
background-repeat: repeat-x;
margin: 0;
padding: 0;
width: 100%;
}
#site {
height: auto;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
width: 940px;
padding: 0 10px;
}
footer {
margin-top: 70px;
background:url(../img/f-border.jpg) repeat-x top center #191919;
}
footer section {
width: 940px;
padding-top: 45px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
color: #b9b9b9;
} |
Ich hab beides natürlich stark vereinfacht.
|
|
| |
   |
 |
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 39
Geschlecht:
|
Verfasst Fr 23.03.2012 01:51
Titel
|
|
|
Hallo Soy,
Ich kann nicht unbedingt was zur Lösung beitragen, habe aber ein paar Hinweise 
Die Paddings werden zur Breite hinzugerechnet, daher hat Dein footer > section wohl 960px Gesamtbreite erhalten (ich denke das war nicht beabsichtigt), aber das ist nur ein Hinweis und nicht die Ursache des Problems. Noch einen Hinweis habe ich zum Gebrauch von <section> - ich denke, da fehlt an einigen Stellen eine Überschrift, um den semantisch korrekten Gebrauch von <section> zu rechtfertigen. Falls du es nicht ohnehin schon vorhattest, würde ich die HTML5 Elemente unbedingt noch um die entsprechenden WAI-ARIA Auszeichnungen ergänzen. Auf die meisten Anführungszeichen kannst du auch verzichten - aber das ist eher eine Frage des persönlichen Geschmacks.
Dein konkretes Problem kann ich leider nicht reproduzieren, IE7 bis 9 zeigen den Footer korrekt an, ebenso Safari und Firefox (alles auf Windows 7). Ich denke, Du musst nach und nach erstmal alles de-aktivieren und den Code vereinfachen, um den Schuldigen zu finden. Das Typekit-Badge wäre mein erster Verdächtiger, das scheint ja auf dem IPad auch nicht angezeigt zu werden (?). Ist auch grob in derselben Ecke und enthält genügend CSS-Kirmes, um unvorhersehbare Probleme zu machen:
| Code: | | style="position: fixed; z-index: 2000000000; right: 0pt; bottom: 0pt; cursor: pointer; border: 0pt none; content: none; display: inline; height: 25px; left: auto; margin: 0pt; max-height: 25px; max-width: 62px; min-height: 25px; min-width: 62px; orphans: 2; outline: medium none; overflow: visible; padding: 0pt; page-break-after: auto; page-break-before: auto; page-break-inside: auto; table-layout: auto; text-indent: 0pt; top: auto; unicode-bidi: normal; vertical-align: baseline; visibility: visible; widows: 2; width: 65px; |
Zuletzt bearbeitet von ChrisKam am Fr 23.03.2012 01:52, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst So 25.03.2012 13:16
Titel
|
|
|
Hi!
Ich hab das mit einem Bauerntrick gelöst und einfach noch einen DIV mit selbem Hintergrund in den Footer gelegt.
Das Padding ist bewusst eingesetzt, und die Contentbreite soll tatsächlich 960px entsprechen Die Badge etc. ist es leider nicht... Die Sections werde ich natürlich noch ergänzen!
Ich habe aber noch einen anderen Fehler: Meine Seite fängt an, und das erste Element, nämlich das Logo als Bild, hat ein "margin-top: 30px". Dieses Margin schiebt in fast allen Browsern das Logo 30px nach unten. Allerdings, im Firefox unter OS X, schiebt sich das Logo einmal vom <header> runter, und parallel die ganze Seite, also den <body> nochmal um 30px nach unten (dabei hat der Body margin: 0; padding: 0; top: 0. Wie kann ich das beheben?!
| Code: | <body>
<div id="site">
<div id="wrapper">
<header>
<div id="logo"><a href="#"><img src="img/h-logo.png" height="73" width="278" alt="Soy Ludico - Web & Printdesign" title="Soy Lúdico - Web & Printdesign"></a></div>
</header> |
| Code: | body {
background-image: url("../img/h-bg.jpg");
background-position: center top;
background-repeat: repeat-x;
margin: 0;
padding: 0;
width: 100%;
}
#site {
height: auto;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
width: 940px;
padding: 0 10px;
}
header {
margin-bottom: 30px;
}
header #logo {
float: left;
height: 73px;
width: 278px;
margin-top: 0;
margin-top: 30px; /* HIER IST DIE FEHLERQUELLE */
} |
Wenn das jemand weiß, wäre das waaahnsinnig klasse!
|
|
| |
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 39
Geschlecht:
|
Verfasst So 25.03.2012 13:53
Titel
|
|
|
|
Da gäbe es einige Möglichkeiten, das anders zu lösen. Mein erster Verdacht für die Fehldarstellung im Firefox liegt aber beim <header> selbst - alle Blockelemente sollten eine Größe (width bzw. height) zugewiesen haben, sonst wird die Darstellung unberechenbar. Gib' dem <header> mal testweise ein feste Höhe...
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst So 25.03.2012 13:59
Titel
|
|
|
|
Supergeil ChrisKam! Genau damit hats funktioniert. Werde mir merken, immer eine Höhe festzulegen! Danke (:
|
|
| |
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 39
Geschlecht:
|
Verfasst So 25.03.2012 14:06
Titel
|
|
|
Bittschön 
viel Erfolg mit der neuen Seite, du kannst hier ja mal irgendwo einen Link posten, wenn sie on geht.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
PHP Formular streikt
CSS-Layout: Hintergrund streikt & IE-Probleme
[Formular] am PC einwandfrei, aber streikt am MAC (OSX)
INDESIGN streikt - Seite duplizieren
Frameset funktioniert manchmal nicht!
In PS manchmal nicht in den Maskierungsmodus wechselbar...?
|
|
Willkommen auf dem Portal für Mediengestalter
