|
|||
Box mit runden Ecken positionieren
Hi,
bei meinem neuen Design habe ich folgendes vor: Hier erstmal wie es bisher aussieht Xethon-Design Ich will eine Box mit runden Ecken als Content und diese soll mittig in dem hellgrauen Bereich und immer mit 20px Abstand zur Navi und zum Footer sitzen. Habe mir schon 4 Grafiken (Ecken für LO, RO, LU und RU) gebastelt doch weiß nicht wie ich die Box aufbaue und so platziere wie ich es eben beschrieben habe. Meine Versuche haben bis jetzt noch keine zeigbaren Ergebnisse geliefert Hoffe ihr könnt mir dabei ein wenig helfen. Danke Edit: Habe nun mithilfe dieses Tutorials (http://www.ohne-css.gehts-gar.net/0028.php) ne Box eingebaut, doch sie wird nicht angezeigt, nur der Text der darin steht. Könnt ihr mir sagen warum nicht? Geändert von Xethon (23.04.2010 um 21:16 Uhr) |
Sponsored Links |
|
|||
Funzt alles soweit, nur habe ich jetzt ein Problem. So siehts jetzt aus:
http://img338.imageshack.us/img338/2147/seitej.jpg Der hellgraue Bereich fließt einfach nicht bis zum Footer mit. Wie kann ich das ändern? Hier der Code dazu: Code:
CSS: /* Design by Xethon for cms2day */ * { padding: 0; margin: 0; } html, body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #E2E2E2; height: 100%; } p { padding: 10px; } h1 { font-size: 14px; font-weight: bold; border-bottom: 1px dotted #C3C3C3; } a { text-decoration: none; color: #E2E2E2; font-weight: bold; } /* WRAPPER */ #wrapper { margin: 0 auto -50px; width: 100%; min-height: 100%; height: auto !important; height: 100%; } /* HEADER */ #header { width: 100%; height: 180px; background: url('../images/header.jpg') repeat-x; } /* NAVI */ #navigation { width: 100%; height: 40px; background: url('../images/menu.jpg') repeat-x; } #navigation li { display: inline; list-style-type: none; } /* CONTENT */ #content { background: #C3C3C3; padding: 20px 0; height: 100%; } .box { width: 780px; background: #3D3D3D url('../images/top.jpg') top left no-repeat; margin: auto; } .box2 { width: 750px; background: url('../images/bottom.jpg') bottom left no-repeat; padding: 15px; } /* FOOTER */ #footer { width: 100%; height: 50px; clear: both; background: url('../images/footer.jpg') repeat-x; text-align: center; .footer, .push { height: 50px; } Code:
HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php page_header(); ?> </head> <body> <div id="wrapper"> <div id="header"> <p></p> </div> <div id="navigation"> <p></p> </div> <div id="content"> <div class="box"> <div class="box2"> <?php page_content(); ?> </div> </div> </div> <div class="push"></div> </div> <div id="footer"> <?php page_footer(); ?> </div> </body> </html> |
Sponsored Links |
|
||||
Gib dem body die Hintergrundfarbe des hellgrau.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Box mit runden Ecken, Bild richtig Positionieren | Phantasielos | CSS | 9 | 27.04.2010 10:51 |
Markupeinsparung - Box mit runden Ecken und Schlagschatten | znay | (X)HTML | 3 | 02.11.2007 19:06 |
Box mit runden Ecken via CSS | krassus | CSS | 0 | 30.11.2005 00:54 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 18:04 |
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, | marioN | CSS | 2 | 19.01.2004 18:17 |