|
|||
Problem mit Border und fixiertem Footer
Hallo Forum!
Ich bin neu in CSS und bräuchte Hilfe bei angehängtem Code. Mein Problem: meine ganze Seite befindet sich in #page und ist links und rechts mit einem Rahmen versehen. Jetzt wollte ich den Footer nach unten fixieren, da das gradient-Element als Hintergrund sonst den Farbverlauf beim Ende des Containers #content aufhört. Den Footer zu fixieren hat jetzt schon mal geklappt, aber der #content Container nimmt noch nicht den gesamten Platz bis an den Footer an. Und Rahmen, der eigentlich alles umschließt ist ab Bereich des #content auch verschwunden. Könnt ihr mir behilflich sein bei diesen beiden Problemen? Code:
#page { background: #FFFFFF; border-left: 3px solid #87a619; border-right: 3px solid #87a619; text-align: left; margin: 0 auto; width: 760px; } #header { background: #FFFFFF; border-bottom: 3px solid #87a619; height: 280px; position: relative; } #nav { bottom: 0; font-size: 1.1em; position: absolute; left: 25px; } #breadcrumb { background: #87a619; border-bottom: 2px solid #90C7E4; color: #87a619; font-size: 1.2em; height: 46px; position: relative; } #info { background: #FFFFFF; border-bottom: 3px solid #93CCEA; color: #000000; font-size: 1.2em; line-height: 2.0em; position: relative; padding: 20px 230px 20px 30px; } #content { float: left; font-size: 1.2em; line-height: 1.5em; padding: 30px 20px 30px 30px; width: 448px; } #sidebar { color: #000000; float: right; font-size: 1.1em; line-height: 1.4em; padding: 10px 30px 20px 20px; width: 206px; } #footer { border-top: 3px solid #87a619; clear: both; color: #aaa; font-size: 1.1em; height: 70px; } Viele Grüße und vielen vielen Dank!! Benedikt Geändert von Benezi (20.07.2013 um 16:09 Uhr) |
Sponsored Links |
|
||||
Hi und willkommen im Forum.
Bevor es jemand anderes macht, schlage ich Dir erstmal vor Deine Seite auf einem kostenlosen Webspaceanbieter hochzuladen, damit man CSS und HTML besser analysieren kann. Musste ich mir zu meiner Newbie-Zeit auch oft anhören - stimmt aber! Da Du schreibst Du wärst noch Frischling in CSS solltest Du Dich mit den Grundlagen vertraut machen, bevor Du weiter "Gepfuschten Code" anwendest. Dazu gibt es eine sehr gute Seite: Little Boxes Teil 1 . Es macht es Dir und uns anderen Usern einfacher, wenn wir über dieselben Begriffe/Definitionen sprechen. Du bekommst hier wirklich sehr viel Hilfe, wenn Du bereit bist den Helfern mit diesen kleinen Regeln entgegen zu kommen.
__________________
Gruß Marko Habt Geduld mit den Anfängern, schließlich wurde niemand allwissend geboren! |
Sponsored Links |
|
|||
Hallo Marko!
Danke für das Tutorial. Sieht gut aus, werd ich mir mal anschaun. Die Seite ist von der Datenbank her etwas umfangreicher, ich würde hier mal nur den nötigen Code reinschreiben. Vom Layout her ist das folgender HTML-Code: HTML-Code:
<body> <div id="page"> <?php $this->includeSnippet('header'); ?> <div id="content"> <h2><?php echo $this->title(); ?></h2> <?php echo $this->content(); ?> <?php if ($this->hasContent('extended')) echo $this->content('extended'); ?> </div> <!-- end #content --> <div id="sidebar"> <?php $this->includeSnippet('sidebar'); ?> </div> <!-- end #sidebar --> <?php $this->includeSnippet('footer'); ?> </div> <!-- end #page --> </body> Mein Ding ist eigentlich nur: Footer nach unten, Content so lang wie nötig um die Seite zu füllen. Backround im body als Gradient. Und der Farbverlauf muss eben bis Seitenende gehen und nicht nach dem Footer aufhören. Danke für deine/eure Hilfe! Grüße, Benedikt |
|
||||
Zitat:
bitte dies lesen: http://xhtmlforum.de/40080-f-r-frage...twortende.html |
|
|||
|
|
|||
Mit welchem Browser hast du denn die Probleme. Ich kann das nicht so ganz nachvollziehen, da der Hintergrundverlauf im FF22 und im Chrome bis nach unten reicht. Der Verlauf ist dagegen im IE8 nicht zu sehen. Da solltest du als Rückfallabsicherung eine feste Farbe bestimen oder die Filterfunktion von MS verwenden.
Gradients, die für die Mehrzahl der Browser funktionier, kannst du dir mit Ultimate CSS Gradient Generator - ColorZilla.com erstellen lassen. Um deine Seite anzupassen empfiehlt es sich im Firefox erst mal zu schauen wie die Seite aussieht und dazu kann man das Addon Firebug hinzufügen. Mit rechte Taste auf ein Element und einem klick auf Element untersuchen(inspect) kann man sich die CSS Eigenschaften anzeigen lassen und auch direkt verändern um sich die Auswirkungen anzusehen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
rätselhafter Leerraum zwischen Content und Footer im IE | jhonnybravo | CSS | 5 | 04.03.2010 12:47 |
Problem bei Anordnung- footer nach div mit variabler Höhe | gombi | CSS | 7 | 18.01.2010 19:14 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |
footer bottom problem im FF bei langer renderzeit ... | misfit | CSS | 0 | 25.08.2005 16:43 |