• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Großes DIV Problem

S

SchokoBrunnen

Mitglied
Seit gestern hab ich ein Problem, meine div Box vergrößert sich nicht! Ich hab verschiedenfarbige Boxen, die in der Mitte sollte sich eigentlich immer automatisch vergrößern, tut sie aber nicht. Ich habs mit allen Farben versucht, ging nicht. Der Link zu meiner Homepage: Habbo - Pro Mafia . Die Mittlere Box vergrößert sich nicht, nur auf der Startseite vergrößert sie sich. Auf den anderen Seiten wird sie nicht breiter.Mein Problem ist also, das es nicht breiter wird.

Der CSS Code zur blauen Box:

Code: 
div#blue_header{
	background: url(../_images/headers/blue.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #6d98a8;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #d4f3ff 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}

Von einer anderen Farbe :
Code: 
div#pink_header{
	background: url(../_images/headers/pink.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #bc7777;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fcd7d7 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}

Komplette CSS Datei:
Code: 
/* 
	LAYOUT DESIGNED & CODED BY JAKE JAMES
	[email protected]
*/








body{
	background: url(../_images/backgrounds/green_background.png);
	font-family: "Tahoma", Arial, Verdana;
	font-size: 11px;
	color: #6a6a65;
	margin: 10px;
}


a, a:hover, a:link, a:visited{
	font-family: "Tahoma", Arial, Verdana;
	font-size: 11px;
	font-weight: bold;
	color: #6a6a65;
	text-decoration: none;	
}


input, textarea, select, option{
	font-family: "Tahoma", Arial, Verdana;
	font-size: 11px;
	color: #6a6a65;
	border: 1px dashed #6a6a65;
}


p, form, table, tr, td, th{
	border: 0;
	padding: 0;
	margin: 0;
	height: auto;
	width: auto;
}


img a{
	border: 0;
}


div#wrapper{
	width: 1003px;
	margin: auto;
}


div#top{
	background: url(../_images/top.png);
	width: 1003px;
	height: 127px;
}


	div#radio_stats{
		background: url(../_images/radio_stats.png);
		width: 253px;
		height: 92px;
		float: right;
		color: #FFFFFF;
		margin: 10px;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 14px;
		overflow: hidden;
	}
	
	div#radio_stats img{
		margin-top: 1px;
	}


div#nav_bar{
	background: url(../_images/navigation_bar.png);
	width: 939px;
	height: 30px;
	padding-left: 32px;
	padding-right: 32px;
	color: #a48500;
}


	a#home{
		background: url(../_images/navigation/home.png);
		width: 69px;
		height: 30px;
		float: left;
	}
	
	a#home:hover{
		background: url(../_images/navigation/hover/home.png);
	}
	
	a#thehablets{
		background: url(../_images/navigation/thehablets.png);
		width: 110px;
		height: 30px;
		float: left;
	}
	
	a#thehablets:hover{
		background: url(../_images/navigation/hover/thehablets.png);
	}
	
	a#news{
		background: url(../_images/navigation/news.png);
		width: 66px;
		height: 30px;
		float: left;
	}
	
	a#news:hover{
		background: url(../_images/navigation/hover/news.png);
	}
	
	a#radio{
		background: url(../_images/navigation/radio.png);
		width: 69px;
		height: 30px;
		float: left;
	}
	
	a#radio:hover{
		background: url(../_images/navigation/hover/radio.png);
	}
	
	a#media{
		background: url(../_images/navigation/media.png);
		width: 70px;
		height: 30px;
		float: left;
	}
	
	a#media:hover{
		background: url(../_images/navigation/hover/media.png);
	}
	
	a#guides{
		background: url(../_images/navigation/guides.png);
		width: 118px;
		height: 30px;
		float: left;
	}
	
	a#guides:hover{
		background: url(../_images/navigation/hover/guides.png);
	}	
	
	a#goodies{
		background: url(../_images/navigation/goodies.png);
		width: 85px;
		height: 30px;
		float: left;
	}
	
	a#goodies:hover{
		background: url(../_images/navigation/hover/goodies.png);
	}
	
	a#forum{
		background: url(../_images/navigation/forum.png);
		width: 73px;
		height: 30px;
		float: left;
	}
	
	a#forum:hover{
		background: url(../_images/navigation/hover/forum.png);
	}


div#sub_nav_bar{
	background: url(../_images/sub_navigation_bar.png);
	width: 933px;
	height: 29px;
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 13px;
}


	div#sub_nav_bar a{
		font-weight: normal;
		color: #6a6a65;
		padding-left: 5px;
		padding-right: 5px;
	}
	
div#container{
	background: url(../_images/main_container.png);
	width: 961px;
	padding-left: 18px;
	padding-right: 18px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin: auto;
	color: #3f4d50;
	overflow: hidden;
}


div#left{
	width: 256px;
	float: left;
	overflow: hidden;
	margin-right: 8px;
}


div#blue_header{
	background: url(../_images/headers/blue.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #6d98a8;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #d4f3ff 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#pink_header{
	background: url(../_images/headers/pink.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #bc7777;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fcd7d7 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#green_header{
	background: url(../_images/headers/green.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #738a44;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #dbecb8 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div.box_background{
	background: url(../_images/box.png);
	width: 236px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 1px;
	overflow: hidden;
}


div.box_bottom{
	background: url(../_images/box_bottom.png);
	width: 256px;
	height: 10px;
	margin-bottom: 8px;
}


div#middle{
	width: 433px;
	float: left;
	margin-right: 8px;
}


div#content_header{
	background: url(../_images/headers/content.png);
	width: 391px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #6d98a8;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #d4f3ff 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
}


div.content_box{
	background: url(../_images/content_box.png);
	width: 413px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 1px;
	overflow: hidden;
}


div.content_bottom{
	background: url(../_images/content_bottom.png);
	width: 433px;
	height: 8px;
}


div#right{
	width: 256px;
	float: left;
	overflow: hidden;
}


div#grey_header{
	background: url(../_images/headers/grey.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #868679;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fffffe 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#lime_header{
	background: url(../_images/headers/lime.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #959b6d;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #f6ffbd 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#bottom{
	background: url(../_images/bottom.png);
	width: 973px;
	height: 47px;
	color: #846b00;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
	text-align: right;
}


div.headline1{
	background: #e9e9e9;
	width: 226px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
}


div.headline2{
	background: #f5f5f5;
	width: 226px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
}


input.custom{
	background: url(../_images/input.png);
	width: 223px;
	height: 18px;
	border: 0;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 5px;
	margin-bottom: 3px;
}


input.buttom{
	background: url(../_images/login.png);
	width: 68px;
	height: 24px;
	text-align: center;
	border: 0;
	padding-bottom: 3px;
}


a#news_banner{
	background: url(../_images/news/thehablets.png);
	width: 425px;
	height: 23px;
	float: left;
	margin-bottom: 8px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-top: 80px;
	color: #FFFFFF;
	font-weight: normal;
}


a.tooltip
{
  position: relative;
  text-decoration: none;
  color: black;
}


a.tooltip span
{
  display: none;
}


a.tooltip:hover span
{
  position: absolute;
  display: block;
  top: 1.5em;
  left: 2em;
  border: 1px solid black;
  background-color:white;
  padding: 0.2em;
}








div#shade{
	background: url(../_images/shade.png);
	width: 405px;
	height: 18px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	color: #FFFFFF;
	font-weight: normal;
}
 
Du verwendest jedes Mal eine andere ID und/oder Klasse um die Box aufzubauen. Wenn Du die selben IDs und Klassen wie von der Startseite auch für die Contentseiten verwendest, passt es.
 
Ich benutzte ein CMS (IV). Ich zeig dir mal den Code von meinem Hautptemplate:

<!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">
<head>
<link href="tooltip.css" rel="stylesheet" type="text/css"><script src="tooltip.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>{TITLE}</title>
<link href="_css/global.css" rel="stylesheet" type="text/css" />
<script src="_javascript/lib/prototype.js" type="text/javascript"></script>
<script src="_javascript/src/scriptaculous.js" type="text/javascript"></script>
</head>


<body>
<div id="wrapper">
<div id="top">
<div align="right"> {BOXHEAD}</div>
</div>
<div id="nav_bar">
{NAVBAR}
</div>
<div id="sub_nav_bar">
{SHOUTBOX}
</div>
<div id="container">
<div id="left">
{BOXENLINKS}




</div>
<div id="middle">

{CONTENT}
</div>
<div id="right">
{BOXRECHTS}


</div>
</div>
<div id="bottom">
Copyright &copy; <strong>Me.and.You</strong> 2012
</div>
</div>
</body>
</html>
Zum Vergrößern anklicken....

Die ganzen {DINGER} sind Platzhalter, für jede Box hab ich auch noch Templates:

Blaue Box Template:
<div id="blue_header" onclick="Effect.toggle('featured_box', 'slide', { duration: 0.5} );">
{TITLE}
</div>
<div class="box_background" id="featured_box">
{BODY}
</div>
<div class="box_bottom" style="margin-bottom: 0;"></div>
Zum Vergrößern anklicken....

Hellgrüne Box:

<div id="lime_header" onclick="Effect.toggle('djotw_box', 'slide', { duration: 0.5} );">{TITLE}</div>
<div class="box_background" id="djotw_box">
{BODY}
</div>
<div class="box_bottom"></div>
Zum Vergrößern anklicken....

Die haben keinerlei Unterschiede... Es liegt weniger an den Boxen, egal welche Farbe ich nehme die Box vergrößert sich nicht! Falls einer helfen will, und mein Problem nicht versteht, ich könnte euch meine Teamviewer Daten geben.

Ich hab jetzt auf der Startseite noch eine Box erstellt in der Mitte, und die wird auch nicht größer, woran kann das liegen?!? Homepage Link :http://emresprojekte.bplaced.net/
 
Zuletzt bearbeitet:
Ich hab versucht den blauen Header zu vergrößern, hat geklappt aber die anderen waren schon so groß wie der header. Am Header liegt es also nicht: Der Mittlere und untere Teil hat einen Fail..
 
Der erste Fehler besteht schon mal darin, dass du verschachtelte <b> Tags verwendest, die nicht nur veraltet, sondern auch Inline-Elemente sind. Davon abgesehen verstehe ich die Frage nicht. Die Mitte (div #middle?) ist so breit, wie im CSS definiert und so hoch, wie der darin liegende Content.
 
Tronjer schrieb:
Der erste Fehler besteht schon mal darin, dass du verschachtelte <b> Tags verwendest, die nicht nur veraltet, sondern auch Inline-Elemente sind. Davon abgesehen verstehe ich die Frage nicht. Die Mitte (div #middle?) ist so breit, wie im CSS definiert und so hoch, wie der darin liegende Content.
Zum Vergrößern anklicken....

Hat mich gerade zum nachdenken gebracht, danke. :D

Problem gelöst!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben