|
|||
DIV Box (Sidebar) in bereits fertiges Design einfügen?
Hey!
Ich habe mir ein Design mit CSS gecodet, jetzt ist es fertig, aber ich möchte gerne noch in das fertige Design eine Sidebar (rechts) einfügen, also eine "DIV Box". Jetzt habe ich aber das Problem, dass ich nicht weiß, wohin ich die "Div Anweisung" (<div id="sidebar"></div>) in die HTML Datei positionieren soll. Wenn ich sie nach dem Content schreibe, dann positioniert sich die Sidebar im Content. Lg Daniel |
Sponsored Links |
|
|||
Entschuldige
HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design und Website by Daniel Sacharov. Copyright 2011 Daniel Sacharov. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Daniel Sacharov .:. Grafik- und Webdesign</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="header"></div> <div id="menu"> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Links</a></li> <li><a href="#">Impressum</a></li> </ul> </div> <div id="wrapper"> <div class="btm"> <div id="kontaktformular"></div> <div id="page"> <div id="content"> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </div> <div id="footer"> <p>Copyright 2011 Daniel Sacharov.</p> </div> <div id ="boxen"> <div class ="boxformatierung"> Startseite <br /> Über uns <br /> Impressum <br /> </div> <div class ="boxformatierung"> 2. Box <br /> LINK <br /> LINK <br /> </div> <div class ="boxformatierung"> 3. Box <br /> LINK <br /> LINK <br /> </div> <div class ="boxformatierung"> 4. Box<br /> LINK <br /> LINK <br /> </div> <div class ="boxformatierung"> 5. Box <br /> LINK <br /> LINK <br /> </div> </body> </html> CSS: Code:
/* Design by Daniel Sacharov. Copyright 2011 Daniel Sacharov. */ body { margin: 0px 300px 0px -90px; background: #00baff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #444444; } h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #444444; } h1 { font-size: 2em; } h2 { font-size: 2em; } h3 { font-size: 1.6em; } p, ul, ol { margin-top: 0; line-height: 180%; } ul, ol { } a { text-decoration: none; border-bottom: 1px dotted #CC0001; color: #FB7600; } a:hover { background: none; } /* Header */ #header { width: 900px; height: 200px; margin: 20px 0px 0px 180px; background: url(images/header.png) no-repeat left top; } /* Menu */ #menu { width: 900px; height: 50px; background: url(images/navi.png) no-repeat left top; margin: 0px 0px 0px 180px; } #menu ul { margin: 0; padding: 13px 0 0 20px; list-style: none; line-height: normal; } #menu li { float: left; border-right:1px dashed #aeaeae; } #menu a { display: block; margin-right: 3px; padding: 5px 20px 7px 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; color: #333333; border: none; } #menu a:hover { color:#00baff; } #content { height:auto; width:910px; padding-left:15px; padding-right:15px; background:url(images/content.png) repeat-y; margin: 0px 185px 0px 175px ; } #footer { width: 900px; height: 60px; background-image: url(images/footer.png) ; margin: 0px 5px 0px 180px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } #footer p { margin: 0; line-height: normal; font-size: 9px; text-transform: uppercase; text-align: center; padding: 20px 80px 0px 0px; } #footer a { color: #FFFFFF; border-bottom: 1px #FFFFFF dotted; } #boxen { background-image: url(images/footer_box.png); width: 874px; height: 120px; margin: 0px 0px 0px 193px; } .boxformatierung { float: left; width: 150px; padding: 5px 0px 0px 20px; } #sidebar { background-image: url(images/sidebar.png); width: 300px; height: 500px; float: right; } |
|
|||
Ja, die Sidebar in der HTML Datei habe ich ja nicht eingetragen, da ich wissen wollte, wo, da ich es jedes mal nicht hinbekomme...
Die 3 Divs ohne Endungen sind weg, aber die waren eh unwichtig, da habe ich nur was getestet. CSS mit Copyright? Wieso Geg? |
|
||||
I.d.R. würde man die #sidebar hinter #content platzieren.
Beides floatet, beide Breiten zusammen ergeben die Gesamtbreite. Danach clearen. Ein Beispiel (von vielen): Two Column Fixed Width ~ Non-Equal Columns Deinem Code nach vermute ich mal, du hast keine bzw. wenig Erfahrung? Basis Knowhow: LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) Manfred |
|
||||
Wegen unsematischem Code z.B.
__________________
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? |
Sponsored Links |
Stichwörter |
css, div box, sidebar |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fixes Div bei zentriertem Design | hausl78 | CSS | 0 | 28.10.2010 12:12 |
bekomme div box design einfach nett hin. | GateKay | CSS | 8 | 27.02.2005 14:46 |
css box design in header und footer trennen | GateKay | CSS | 1 | 08.01.2005 15:54 |
Div Box will absolut positionierte Box nicht mitumrahmen | Zwacky | CSS | 1 | 17.12.2004 08:09 |
div box breite nach inhalt! | MikeDe | CSS | 2 | 03.12.2004 06:19 |