#1 14. Juli 2009 Zuletzt von einem Moderator bearbeitet: 14. April 2017 Design Hilfe Hi Leute, Ich möchte mit css und mit Hilfe von Ebenen eine Homepage basteln. Ich habe zur Erklärung meines Problems ein Bild gemacht wie das Layout aussehen soll. Könntet ihr mir bitte zeigen wie der CSS und HTML Code aussehen soll damit das Layout so aussieht: Danke! + Multi-Zitat Zitieren
#2 14. Juli 2009 AW: Design Hilfe Die Seite sollte dir helfen! Zwar ist dort auf der Beispielseite oben und Unten keine 100%, aber das kann man ja ändern CSS Sticky Footer + Multi-Zitat Zitieren
#3 14. Juli 2009 AW: Design Hilfe Hier mal paar Links die dir helfen werden. Solltest dich bisschen mit HTML/CSS befassen ... is nich schwer Erste Anlaufstelle für alle HTML und CSS Fragen: SELFHTML: Stylesheets / CSS-basierte Layouts / Mehrspaltige Layouts Stichpunkt CSS: Layout ohne Tabellen + Multi-Zitat Zitieren
#4 16. Juli 2009 AW: Design Hilfe Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html, body { margin: 0; padding: 0; } #head { width: 100%; height: 100px; background-color: red; } #main { width: 800px; min-height: 200px; height: auto; background-color: yellow; margin: 0 auto; } #footer { width: 100%; height: 100px; background-color: red; } </style> <body> <div id="head"></div> <div id="main"></div> <div id="footer"></div> </body> </html> habe als höhe für E1 und E2 100px genommen und für E3 einfach 200px (nur min-height! die höhe verändert sich dann automatisch!) + Multi-Zitat Zitieren
#5 16. Juli 2009 AW: Design Hilfe min-height zu nehmen ist aber sehr gewagt, denn der IE und ältere Browser verstehen nicht was du meinst und stellen die Seite Falsch dar + Multi-Zitat Zitieren
#6 16. Juli 2009 AW: Design Hilfe wer heute noch immer veraltete browser nutzt ist selber schuld... aber so geht es und so mache ich das auch immer.. + Multi-Zitat Zitieren
#7 16. Juli 2009 AW: Design Hilfe Danke erstmals an alle. @Jan Wenn ich deinen Code speichere wird das layout zwar im IE richtig angezeigt. Im Firefox jedoch ist zwischen header und main ein Abstand! Das gleiche ist zwischen footer und main. Ich komm nicht ganz weiter. Immer passt irgendwas nicht. :/ + Multi-Zitat Zitieren
#8 16. Juli 2009 Zuletzt von einem Moderator bearbeitet: 14. April 2017 AW: Design Hilfe So siehts bei mir im neusten FF3 aus, Auflösung 1280x1024. Mach mal in jedes div noch nen margin: 0; rein. + Multi-Zitat Zitieren
#9 21. Juli 2009 AW: Design Hilfe Ich kann mich Jan225 nur anschließen! Bei mir sieht das ganze wie auf seinem screenshot aus @ Firefox 3.5.1. Wenn margin: 0 nicht klappt, wäre das nächste dann padding. Viel mehr fällt mir dann aber auch nicht ein Ansonsten viel Glück! + Multi-Zitat Zitieren
#10 23. Juli 2009 AW: Design Hilfe Tipp: Man kann Elemente nur auf 100% Höhe schrauben, wenn auch schon die Mutterelemente 100% height aufweisen. Ergo: html, body { height:100%; } Arbeite doch mit % oder em statt pixeln? Pixel sind nur im äußersten Notfall mit Grafiken anzuwenden. Alles was größenverändernd mitgeändert werden kann, sollte auf % oder em gebracht werden, z.B. Abstände oder Div-Dimensionen. + Multi-Zitat Zitieren
#11 23. Juli 2009 AW: Design Hilfe * { margin: 0px; padding: 0px; } damit sollte das Thema durch sein... + Multi-Zitat Zitieren