Problem mit ContentForum » Webzone » (X)HTML & CSS » Problem mit Content
-
23.09.2010 um 15:52 Uhr
Huhu Leute,
ich hab mal wieder ein problem und zwar will mal Content nicht so wie ich es mchte.
Ich habe arbeite ausschlielich nur mit div-tags, ich glaube das nennt man box-modell, ich wei es gerade nicht, auf jeden fall ist es so, dass mein frame-div die bg-datei beinhalten fr meinen content und mein frame geht nicht mit dem ganzen content mit, am besten ihr schaut es euch selbst an.
Klick
Index-datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Mystic-Graphics</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="http://mystic-graphics.bplaced.net/2010/001.css" media="screen" /> <link rel="stylesheet" type="text/css" href="http://mystic-graphics.bplaced.net/2010/001-news.css" media="screen" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <div id='frame'> <div id='header'> <div id='thONE'> <div class='left'></div> <div class='right'> <a href='http://www.mystic-askme.de.pn/' target='_blank' id='ask'> </a> <a href='http://#' target='_blank' id='journal'> </a> <a href='http://flgschool.oyla.de' target='_blank' id='flg'> </a> </div> </div><!--- /thONE ---> <div id='thTWO'> <div class='left'></div> <div class='right'></div> </div><!--- /thTWO ---> <div id='thTHREE'> <div class='left'></div> <div class='right'></div> </div><!--- /thTHREE ---> <div id='thBOTTOM'> <div class='sidebar'> <?php include('sidebar.inc.php'); ?> </div> </div><!--- /thBOTTOM ---> </div><!--- /header ---> <div id='content'> <div class='rand'> <?php include('textseiten/including.txt'); ?> </div> </div><!--- /content ---> </div><!--- /frame ---> <div id='footer'> <div class='rand'> <script language="JavaScript" type="text/javascript" src="http://www.x-stat.de/stat.php?id=lovetoyou5"></script> </div> </div> </body> </html>
sidebar-datei:
<div class='blue'> <h1 id='home'>Main</h1> <ul> <li><a href='?site=news'>News</a></li> <li><a href='?site=main/history'>About MG</a></li> <li><a href='?site=webbies/team'>Team</a></li> <li><a href='?site=webbies/wmc'><b>WMC</b></a></li> <li><a href='?site=main/linkin'>Link IN</a></li> <li><a href='?site=main/linkout'>Link Out</a></li> <li><a href='?site=main/become'>Become?</a></li> <li><a href='?site=main/regeln'>Regeln</a></li> </ul> </div> <div class='rose'> <h1 id='gfx'>Graphics<h1> <ul> <li><a href='?site=icons/icons-7'>Icons</a></li> <li><a href='?site=icons/bases-5'>Bases</a></li> <li><a href='?site=icons/textur-2'>Texturen</a></li> <li><a href='?site=icons/templates-1'>Templates</a></li> <li><a href='?site=Gfx/header-3'>Header</a></li> <li><a href='?site=Gfx/signs'>Splashes</a></li> <li><a href='?site=Gfx/signaturen-2'>Signaturen</a></li> </ul> </div> <div class='bluee'> <h1 id='download'>Downloads</h1> <ul> <li><a href='?site=Downloads/brushes-1'><s class='red'>Brushes</s></a></li> <li><a href='?site=Downloads/texturen-3'>Texturen</a></li> <li><a href='?site=Downloads/png-4'>PNGs</a></li> <li><a href='?site=Downloads/designs'>Designs</a></li> </ul> </div> <div class='green'> <h1 id='junk'>Junk corner</h1> <ul> <li><a href='?site=Others/newsletter'><s class='red'>Newsletter</s></a></li> <li><a href='?site=Others/umfragen'><s class='red'>Umfragen</s></a></li> <li><a href='?site=Others/awardvergabe'>Awardvergabe</a></li> <li><a href='?site=Others/mural'><s class='red'>Murals</s></a></li> <li><a href='?site=Others/sotmy'>SOTM/SOTY</a></li> <li><a href='?site=Others/dotm'><s class='red'>DOTM</s></a></li> <li><a href='?site=Others/gfx-con'><s class='red'>GFX-Contest</s></a></li> </ul> </div>
haupt-CSS-Datei:
* { margin: 0px; padding: 0px; } html, body { margin: 0px; padding: 0px; width: 100%; text-align: left; } body { color: #5d0000; font: normal 14px/1.5 'Times New Roman', 'Georgia', Sans-Serif; background: #ceb9a6 url('img/x-line.jpg') top left repeat-x; } :focus { outline: none; } .cleaner { clear: both;} .red { color: #770d19 !important; } .blue { color: #0d1077 !important; } .green { color: #0d7776 !important; } .organge { color: #f9995f !important; } #frame { margin: 0; padding: 0; width: 800px; background: url('img/frame.jpg') top left repeat-y; text-align: left; position: relative; } #header { margin: 0px; padding: 0px; width: 800px; height: 758px; background: #ceb9a6; position: relative; } #header #thONE { margin: 0; padding: 0; width: 800px; height: 133px; } #header #thONE .left { margin: 0; padding: 0; width: 500px; height: 133px; background: url('img/header-left-1.jpg') top left no-repeat; float: left; } #header #thONE .right { margin: 0; padding: 0; width: 300px; height: 133px; float: right; } #header .right a#ask{ display: block; margin: 0; padding: 0; width: 75px; height: 131px; text-decoration: none; background: url('img/header-right-ask-a.jpg') top left no-repeat; float: left; } #header .right a#ask:hover{ text-decoration: none; background: url('img/header-right-ask-ah.jpg') top left no-repeat; } #header .right a#journal{ display: block; margin: 0; padding: 0; width: 75px; height: 131px; text-decoration: none; background: url('img/header-right-journal-a.jpg') top left no-repeat; float: left; } #header .right a#journal:hover{ text-decoration: none; background: url('img/header-right-journal-ah.jpg') top left no-repeat; } #header .right a#flg{ display: block; margin: 0; padding: 0; width: 150px; height: 131px; text-decoration: none; background: url('img/header-right-flg-a.jpg') top left no-repeat; float: left; } #header .right a#flg:hover{ text-decoration: none; background: url('img/header-right-flg-ah.jpg') top left no-repeat; } #header #thTWO { margin: 0; padding: 0; width: 800px; height: 178px; clear: both; } #header #thTWO .left { margin: 0; padding: 0; width: 500px; height: 178px; background: url('img/header-left-2.jpg') top left no-repeat; float: left; } #header #thTWO .right { margin: 0; padding: 0; width: 300px; height: 178px; background: url('img/header-right-2.jpg') top left no-repeat; float: left; } #header #thTHREE { margin: 0; padding: 0; width: 800px; height: 216px; clear: both; } #header #thTHREE .left { margin: 0; padding: 0; width: 500px; height: 216px; background: url('img/header-left-3.jpg') top left no-repeat; float: left; } #header #thTHREE .right { margin: 0; padding: 0; width: 300px; height: 261px; background: url('img/header-right-3.jpg') top left no-repeat; float: left; } #header #thBOTTOM { margin: 0; padding: 0; width: 800px; height: 231px; background: #fff url('img/header-bottom.jpg') top left no-repeat; position: relative; } #header #thBOTTOM .sidebar { top: 10px; left: 180px; width: 620px; height: 232px; padding: 0; position: absolute; } header #thBOTTOM .sidebar .rand { padding: 0 10px 10px 0; } #header #thBOTTOM .sidebar h1 { margin: 0 0 2px 0; padding: 3px 5px; font: italic normal 13px/16px 'Sylfaen', 'Georgia', 'Times New Roman', Serif; } #header #thBOTTOM .sidebar .blue, #header #thBOTTOM .sidebar .bluee, #header #thBOTTOM .sidebar .green, #header #thBOTTOM .sidebar .rose { margin: 0; padding: 0; top: 0; width: 150px; position: absolute; } #header #thBOTTOM .sidebar .blue { left: 0; } #header #thBOTTOM .sidebar .rose { left: 155px; } #header #thBOTTOM .sidebar .bluee { left: 310px; } #header #thBOTTOM .sidebar .green { left: 465px; } #header #thBOTTOM .sidebar ul { margin: 0; padding: 0; list-style: none; } #header #thBOTTOM .sidebar ul li { margin: 1px 0 0 0; padding: 0; font: normal 13px/16px 'Times New Roman', 'Georgia', Serif; } #header #thBOTTOM .sidebar ul li a { display: block; padding: 2px; text-decoration: none; } #header #thBOTTOM .sidebar .blue ul li a, #header #thBOTTOM .sidebar .bluee ul li a { color: #74e4ff; background: #7a83c0; } #header #thBOTTOM .sidebar .blue ul li a:hover, #header #thBOTTOM .sidebar .bluee ul li a:hover { color: #7a83c0; background: #74e4ff; } #header #thBOTTOM .sidebar .green ul li a { color: #79ffc8; background: #699e8b; } #header #thBOTTOM .sidebar .green ul li a:hover { color: #699e8b; background: #79ffc8; } #header #thBOTTOM .sidebar .rose ul li a { color: #b03d72; background: #b777b0; } #header #thBOTTOM .sidebar .rose ul li a:hover { color: #e3aead; background: #b03d72; } #content { margin: 0 0 0 160px; padding: 0px; width: 640px; background: url('img/content-bg.jpg') top left repeat-x; position: relative; } #content .rand { padding: 10px; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { margin: 1px 0px 2px 0px; padding: 5px 5px 2px 5px; clear: both; } #content h1 { color: #6d98a4; font: normal bold 18px/18px 'Times New Roman', 'Georgia', Serif; text-align: left; text-shadow: #000 1px 1px; } #content h1 span { margin: 0px; padding: 0px 3px 12px 3px; color: #400040; font: normal 8px/9px 'Georgia', 'Times New Roman', Serif; text-shadow: none; } #content h2 { color: #a73f74; font: normal bold 18px/16px 'Georgia', 'Times New Roman', Sans-Serif; text-align: right; text-shadow: #800000 1px 1px; } #content h2 span { margin: 0px; padding: 12px 2px 3px 2px; color: #000040; font: normal 8px/9px 'Georgia', 'Times New Roman', Serif; } #content h3 { color: #ffc0c0; font: normal bold 18px/18px 'Tahoma', 'Times New Roman', Sans-Serif; text-align: center; text-shadow: #4040ff 1px 1px; } #content h3 span { margin: 0px; padding: 0px 2px 13px 2px; color: #400000; font: normal 8px/9px 'Georgia', 'Times New Roman', Serif; } #content a { margin: 0px 3px; padding: 0px; color: #ce32ab; text-decoration: none; } #content a:hover { color: #7432ce; text-decoration: none; } #content b, #content strong { color: #895d95; } #content i, #content em { color: #6435a5; } #content s, #content strike { color: #c67660; } #content u { color: #008080; border-bottom: 1px dashed #ebffa5; } #content input, #content textarea { margin: 1px 0px 1px 0px; padding: 2px; color: #407a79; background: #eef6f6; border: 1px solid #cde5e5; } #content input:focus, #content textarea:focus{ border: 1px solid #7a4070; } #content input:hover, #content textarea:hover{ border: 1px solid #4a407a; } #content ul { margin: 0px; padding: 0px; } #content .gfx, #content .ava { margin: 0px 1px 1px 0px; padding: 5px; color: #cdf1f0; font: normal 10px/11px 'Georgia', 'Times New Roman'; background: #c18e7e url('img/gfx.jpg'); border: 1px solid #fdebed; text-align: center; float: left; } #content .gfx img, #content .ava img { margin: 0; padding: 3px; background: url('img/gfx-img.jpg'); } #content .preview { margin: 0px 1px 1px 0px; padding: 0px; width: 120px; height: 73px; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; } #content .download { float: left; margin: 0px 6px 6px 0px; padding: 0px; background: #555555; text-align: center; color: #FFF; } #content .download .rand { padding:5px; } #content .download small { font: normal 7.5pt/14pt 'Georgia', 'Times New Roman', Sans-Serif; padding: 0px; text-align: center; } #content .download a { display: block; margin: 2px 0px; padding: 2px; color: #c40645; background: #252525; text-decoration: none; text-align: left; } #content .download a:hover { margin: 2px 0px; padding: 2px; color: #b30981; background: #55025a; text-decoration: none; } #content .download b { color: #62716f; font-family: "Arial", "Verdana", "Tahoma", Serif; } #content .center { padding: 0px 0px 0px 20px; } #content a.tooltip { position: relative; z-index: 20; text-decoration: none; } #content a.tooltip:hover { z-index: 25; text-decoration: none; } #content a.tooltip span{ display: none; } #content a.tooltip:hover span{ background: #11141d; display: block; position: absolute; top: 1px; left: 5px; width: 120px; padding: 3px 7px; border: 2px solid #2f374f; color: #fff; text-align: left; } #ontent a.tooltip:hover span strong{ color: #749c94; } #content .navigation { margin: 5px 0px; padding: 0px; text-align: center; } #content .navigation a { margin: 0px 1px 0px 1px; padding: 2px 3px; color: #8a7e4c; font-weight: bold; background: #b4a874 url('img/navi-a.jpg') top left repeat-x; text-decoration: none; text-align: center; } #content .navigation a:hover { color: #84447c; background: #b267a7 url('img/navi-ah.jpg') top left repeat-x; text-decoration: none; } #content .linkexchange { margin: 0px 1px 1px 0px; padding: 5px; color: #bb9b93; font: normal 7px/8px 'Small Fonts', 'Georgia'; background: #e9e0dd; border: 1px solid #d2beb8; text-align: right; float: left; } #content .linkexchange a { margin: 0px; padding: 1px; color: #a4786e; font: normal bold 10px/10px 'Times New Roman', Sans-Serif; text-decoration: none; } #content .linkexchange a:hover { color: #fff; text-decoration: none; } #content .linkexchange img { margin: 0px; padding: 2px; } #content .square ul, #content .square-red ul { margin: 5px; padding: 0px; list-style: square inside; } #content .square ul li { margin: 0px 0px 1px 0px; padding: 0px; color: #0c10aa; font-weight: bold; } #content .square-red ul li { margin: 0px 0px 1px 0px; padding: 0px; color: #a90d0d; font-weight: bold; } #content table { border: 1px solid #c0c0c0; } #content table td { border-bottom: 1px solid #c0c0c0; } #content table th { color: #217989; font: bold 18px/100% 'Sylfaen', 'Times New Roman', Sans-Serif; height: 25px; background: #9dd0db url('img/th.jpg') bottom left repeat-x; text-align: center; } #content table th:first-letter { color: #892141; } #content table td.name { padding: 5px; color: #15176f; background: #d5d5d9; font-weight: bold; text-align: center; } #content table td.origin, #content table td.mean, #content table td.nameday { padding: 5px; color: #ada077; background: #e5e5e7; text-align: center; } #footer { margin: 0px; padding: 0px; width: 100%; height: 200px; border-top: 5px solid #000000; background: #31868f; text-align: center; clear: both; position: relative; } #footer .rand { padding: 15px 50px 25px 50px; } #footer a { margin: 0px; padding: 2px; color: #5e128a; background: #f9f9f8; text-decoration: line-through; border-radius-topright:8px; border-radius-topleft:0px; border-radius-bottomright:0px; border-radius-bottomleft:8px; -moz-border-radius-topright:8px; -moz-border-radius-topleft:0px; -moz-border-radius-bottomright:0px; -moz-border-radius-bottomleft:8px; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:0px; -webkit-border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:8px; -khtml-border-radius-topright:8px; -khtml-border-radius-topleft:0px; -khtml-border-radius-bottomright:0px; -khtml-border-radius-bottomleft:8px; }
News-CSS:
.news-content { margin: 15px 0 5px 0; padding: 0; width: 620px; font: normal 15px/120% 'Georgia', 'Times new Roman', 'Trebuchet MS', Serif; color: #e1e9ff; background: #32aaac url('img/news-bg.jpg') top left no-repeat; clear: both; } .news-content p.date { margin: 0; padding: 0; width: 60px; height: 60px; color: #0a000a; font: italic normal 17px/100.2% 'Georgia', 'Times New Roman', Sans-Serif; background: url(img/trans.png) top left; text-align: center; float: right; } .news-content p.date span { text-transform: uppercase; font-style: normal; display: block; } .news-content p.update { margin: 0; padding: 0; width: 200px; height: 60px; color: #0a000a; font: italic normal 10px/125% 'Trebuchet MS', 'Tahoma', Sans-Serif; background: url(img/trans.png) top left; text-align: center; float: left; } .news-content p.update span.abstand { padding: 2px 5px; } .news-content p.update a{ color: #404040 !important; text-decoration: none !important; border: none !important; } .news-content p.update a:hover{ color: #a56baf !important; text-decoration: none !important; border: none !important; } .news-content p.line { margin: 0; padding: 0; display: block; height: 5px; background: url('img/line.png') top left; clear: both; } .news-content .newsr { padding: 10px; } .news-content p.comment { margin: 0 0 5px 0; padding: 3px; display: block; color: #004040; font: italic bold 13px/120% 'Trebuchet MS' ,'Georgia', 'Times New Roman', Sans-Serif; background: #83ffe2 url('img/comment.jpg') top left repeat-x; text-align: center; float: right; } .news-content p.comment a { padding: 3px; color: #008d9e !important; text-decoration: none !important; border: none !important; text-shadow: #001c1c 1px 1px; } .news-content p.comment a:hover { color: #9567ff !important; text-decoration: none !important; border: none !important; text-shadow: #08001c 1px 1px; } .news-content .heading { margin: 0; padding: 3px 3px; display: block; color: #0a000a !important; font: italic normal 13px/100.2% 'Georgia', 'Times New Roman', Sans-Serif; background: #979797 !important; text-align: center; }
Ich wrde mich echt freuen, wenn mir jemand helfen knnte, da ich den feher zum verrecken nicht finde. Ich dache auch zu nchst daran, dass es an diesem position: absolute und relative liegen knnte, aber irgendwie wohl doch nicht.
LG Katjana
[ 1 ]
Seite 1 von 1