Problem mit Content

Member

Registriert: 31.10.2008
Beitraege: 108

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'>&nbsp;</a>
	        				<a href='http://#' target='_blank' id='journal'>&nbsp;</a>
	        				<a href='http://flgschool.oyla.de' target='_blank' id='flg'>&nbsp;</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