|
|||
einigermassen anständiges CSS?
Hallo Forum,
ich habe mir eine CSS-Vorlage geholt und ein wenig abgeändert (HOWTO4ALL.de). Den Header habe ich in zwei Teile separiert, das ist alles. Jedoch ist es so, dass es mir wenn ich z.B. den Texten im Header mit "padding" einen Abstand geben will, zerreisst es mir alles. Auch möchte ich gerne dem Text im Footer einen Abstand geben, aber dann kachelt es mir das Hintergrundbild. Könnt Ihr mir bitte schauen ob der Header sauber geteilt wurde (float left ...)? Bin gespannt auf eure Antworten. lg Wurzelchensen |
Sponsored Links |
|
|||
hier ist der Code:
Code:
html { min-height: 100%; background-color: #E6F3FF; } * { margin: 0; padding: 0; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } #clearer {clear: both; font-size: 0;} #left { float: left; margin-top: 10px; margin-left: 20px; } #inner-container { font-size: 1.2em; margin: 0 auto; padding: 10px; width: 816px; margin-top: 8px; } #outer-container { padding-bottom: 14px; background-color: #E6F3FF; } #header { height: 115px; float: left; background-image: url(../images/header_links.png); width: 508px; } #header-right { height: 115px; background-image: url(../images/header_rechts.png); width: 308px; float: left; } #navigation { height: 25px; clear: left; background-image: url(../images/menu.png); padding-left: 30px; padding-top: 6px; } #content { height: 600px; margin-top: 0px; background-image: url(../images/body.png); padding-left: 30px; padding-top: 15px; } #footer { margin-top: 0px; background-image: url(../images/footer.png); height: 51px; } #footer a { color: #000000; text-decoration: none; } <body> <div id="outer-container"> <div id="inner-container"> <div id="header"> <h1>Header</h1> </div> <div id="header-right"> <h1>Header right</h1> </div> <div id="navigation"> <h1>Menu</h1> </div> <div id="content"> <h1>Content</h1> </div> <div id="clearer"></div> <div id="footer"> <span id="left"> <a href="http://www.howto4all.de/">Zur freien Verwendung bereitgestellt von HOWTO4ALL.de</a>. </span> <div id="clearer"></div> </div> </div> </div> </body> |
|
|||
Hallo,
ich weiß nicht, wie das letztendlich aussehen soll, deshalb nur zwei Anmerkungen. Du hast beim #inner-container eine Breite von 816px angegeben. Die beiden Header haben einen Breite von 508px (#header) bzw. 308px (#header-right). Gibt zusammen für die Header eine Breite von 816px. Beide Header passen also nebeneinander in deinen Container. Wenn du nun aber einem der Header ein padding von 10px gibst, dann werden diese 10px der Breite hinzugerechnet. Dein #header-right hätte dann z.B. eine Gesamtbreite 328px. Somit passen beide Header nicht mehr nebeneinander in deinen Conatiner. #header-right rutscht nach unten. Mehr Informationen dazu findest zu z.B. hier: Peter Kropff - CSS - Grundlagen - Das Box-Modell oder mit der Suchmaschinen deiner Wahl unter dem Stichwort CSS Boxmodel. Hintergrundbilder kacheln per Voreinstellung. Wenn du also deine Footer Box vergrößerst dann wird das Hintergrundbild solange wiederholt, bis der komplette Bereich ausgefüllt ist. Mehr Informationen dazu findest du z.B. hier: SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder Gruss Peter
__________________
OpenComp |
|
|||
Danke Leute! Ich weiss eure Antworten zu schätzen!
Mir hat soeben einiges gedämmert Die Tutorials von peterkropff.de (Link kann nicht genug gepostet werden) sind echt klasse! Danke an ein grossartiges Forum mit grossartigen Leuten. lg W. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
MYspace mehr als nur CSS oder ? | Vinceone | CSS | 0 | 12.07.2007 03:21 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |