|
|||
Schatten links und rechts vom Hauptdiv
Hi,
ich möchte gerne links und rechts von meinem Hauptdiv #box einen Schatten einfügen.Grafiken habe ich auch schon ersdtellt, nur weiß ich nicht,wie ich die einfüge. Hier mal mein Code: Code:
body { background-color: #808080; } #box { width: 900px; text-align: left; background-color: #ffffc6; position: absolute; top: 0px; left: 50%; margin-left: -450px; right: 50%; margin-right: -450px; } #banner { width: 900px; height: 111px; background: url('images/header.gif'); } #navi { width: 882px; height: 12px; background-color: #77c3f0; padding: 9px; font-family: Verdana; font-size: 11px; font-weight: bold; color: white; } #content { width: 882px; background-color: white; padding: 20px 9px; } #footer { width: 900px; height: 30px; background-color: #77c3f0; } #schattenlinks { background: url('images/shadow-left.gif') repeat-y; width: 10px; float: left; } #schattenrechts { background: url('images/shadow-right.gif') repeat-y; width: 10px; float: right; } /* Formatierung der Links */ a:link { color: white; } a:visited { color: white; } a:hover { color: #168fd7; } a:active { color: white; } a { text-decoration: none; } /* Formatierung der Überschriften */ h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4 { font-size: 14px; } Code:
<html> <head> <title>Maxskin.de</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> <div id="banner"></div> <div id="schattenlinks"></div> <div id="schattenrechts"></div> <div id="navi"><a href="test.html">Home</a> <a href="test.html">Produkte</a> <a href="test.html">Kontakt</a></div> <div id="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, </div> <div id="footer"></div> </div> </body> </html> |
Sponsored Links |
|
|||
Ok, hat geklappt, danke.
Habe jetzt ein neues Problem. Ich will, dass egal wieviel Inhalt im Content ist, der Content mit dem Footer bis zum Seitenende geht. Habe deshalb folgendes gemacht: #box { width: 900px; text-align: left; background-color: #ffffc6; position: absolute; top: 0px; left: 50%; margin-left: -450px; right: 50%; margin-right: -450px; height: 100%; } #footer { width: 900px; height: 30px; background-color: #77c3f0; position: absolute; bottom: 0; } Ist auch alles schön und gut soweit. Wenn jetzt jedoch soviel Inhalt im Content ist, dass rechts ein Scrollbalken erscheint,dann bleibt der Footer am Seitenende und der Content geht unter dem Footer weiter.Wie löse ich das,damit der Footer immer unter dem Content am Seitenende sitzt? |
|
||||
Hallo
Stichwort: sticky footer http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html Punkt 7 oder Get down! How to keep footers at the bottom of the page Funktioniert auch sehr gut. Gruß Manfred |
|
|||
Habs so gemacht wie in der FAQ aber es funktioniert nicht. Was mache ich falsch?
Der Content läuft unterm Footer weiter und ich habe jetzt nen Abstand vom Header zum oberen Rand. Code:
body { background-color: #282828; } #box { width: 900px; text-align: left; background-color: #ffffc6; position: relative; top: 0px; left: 50%; margin-left: -450px; right: 50%; margin-right: -450px; min-height: 100%; height: 100%; } #banner { width: 900px; height: 111px; background: url('images/header.gif'); } #navi { width: 882px; height: 12px; background-color: #77c3f0; padding: 9px; font-family: Verdana; font-size: 11px; font-weight: bold; color: white; } #content { width: 882px; background-color: white; padding: 20px 9px; font-family: Verdana; font-size: 12px; padding-bottom: 30px; } #footer { font-family: Verdana; font-size: 10px; text-align: center; width: 900px; height: 30px; background-color: #77c3f0; position: relative; margin-top: 0; left: 50%; margin-left: -450px; right: 50%; margin-right: -450px; margin-top: -30px; } /* Formatierung der Links */ a:link { color: white; } a:visited { color: white; } a:hover { color: #168fd7; } a:active { color: white; } a { text-decoration: none; } /* Formatierung der Überschriften */ h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4 { font-size: 14px; } Code:
<html> <head> <title>Maxskin.de</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> <div id="banner"></div> <div id="navi"><a href="test.html">Home</a> <a href="test.html">Produkte</a> <a href="test.html">Kontakt</a></div> <div id="content"> <h1>Lorem ipsum</h1> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </div> </div> <div id="footer">Impressum</div> </body> </html> Geändert von Xethon (24.01.2010 um 21:07 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bild bewegt sich von links nach rechts | xmimox | CSS | 8 | 03.07.2011 22:35 |
Wie bekomm ich das von links auch nach rechts? | AmyD | CSS | 4 | 12.05.2011 23:08 |
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. | Picasso | CSS | 36 | 03.01.2011 20:41 |
Div-Container mit Schatten rechts und unten? | jenny79 | CSS | 26 | 06.11.2007 16:30 |
grafik links und rechts unten ohne zwischenraum einbinden ? | Kurt | CSS | 2 | 08.06.2004 16:04 |