css 100% hoogte en breede

Door Derk Janssen op 24-09-2009 20:42

436 views

Hallo allemaal ik heb een vraagje ik heb een kader gemaakt met ronde hoeken met css en plaatjes nu zou ik graag willen dat hij automatisch mee recht met de inhoud wat moet ik veranderen om dat voor elkaar te krijgen.
link http://ramonvanophuizen.nl/probleem%20css/


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
.content_box{
	width:1024px;
	height:600px;
}

.round_left_top{
	background-image:url(rond_left_top_0.gif);
	width:33px;
	height:33px;
	float:left;
}
.bar_top{
	background-image:url(bar_top_0.gif) ;
	background-repeat:repeat-x;
	width:100%;
	height:33px;	
}
.round_right_top{
	background-image:url(round_right_top_0.gif);
	width:33px;
	height:33px;
	float:right;

}
.bar_left{
	background-image:url(bar_lef_0.gif);
	width:33px;
	height:534px;
	float:left;
}
.content_0{
	width:958px;
	height:534px;
	float:left;
}
.bar_right{
	background-image:url(bar_right_0.gif);
	width:33px;
	height:534px;	
	float:right;
}
.round_left_bottom{
	background-image:url(round_left_bottom_0.gif);
	width:33px;
	height:33px;
	float:left;
}
.bar_bottom{
	background-image:url(bar_bottom_0.gif) ;
	background-repeat:repeat-x;
	width:100%;
	height:33px;
	float:left;
}
.round_right_bottom{
	background-image:url(round_right_bottom_0.gif);
	width:33px;
	height:33px;
	float:right;
}
</style>
<body>
<div class="content_box">
	<div class="bar_top">
		<div class="round_left_top"></div>
		<div class="round_right_top"></div>
    </div>
	<div class="bar_left"></div>
    <div class="content_0"></div>
  <div class="bar_right"></div>
	<div class="bar_bottom">
		<div class="round_left_bottom"></div>
		<div class="round_right_bottom"></div>
    </div>    
</div>
</body>
</html>

Toine vd P

24-09-2009 20:52


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body {
	margin: 0px;
}
.content_box{
	width: 100%;
	height: 100%;
}

.round_left_top{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/rond_left_top_0.gif);
	width:33px;
	height:33px;
	float:left;
}
.bar_top{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/bar_top_0.gif) ;
	background-repeat:repeat-x;
	width:100%;
	height:33px;	
}
.round_right_top{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/round_right_top_0.gif);
	width:33px;
	height:33px;
	float:right;

}
.bar_left{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/bar_lef_0.gif);
	width:33px;
	height:534px;
	float:left;
}
.content_0{
	width:958px;
	height:534px;
	float:left;
}
.bar_right{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/bar_right_0.gif);
	width:33px;
	height:534px;	
	float:right;
}
.round_left_bottom{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/round_left_bottom_0.gif);
	width:33px;
	height:33px;
	float:left;
}
.bar_bottom{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/bar_bottom_0.gif) ;
	background-repeat:repeat-x;
	width:100%;
	height:33px;
	float:left;
}
.round_right_bottom{
	background-image:url(http://ramonvanophuizen.nl/probleem%20css/round_right_bottom_0.gif);
	width:33px;
	height:33px;
	float:right;
}
</style>
<body>
<div class="content_box">
	<div class="bar_top">
		<div class="round_left_top"></div>
		<div class="round_right_top"></div>

    </div>
	<div class="bar_left"></div>
    <div class="content_0"></div>
  <div class="bar_right"></div>
	<div class="bar_bottom">
		<div class="round_left_bottom"></div>
		<div class="round_right_bottom"></div>
    </div>    
</div>

</body>
</html>

zoiets ?

Derk Janssen

24-09-2009 21:03

Bedankt Twan van der Poel nu zit ik alleen nog met
.content_0{
width:958px;
height:534px;
float:left;
}

Als ik die ook op 100% zet flipt hij hem de pan uit .
Misschien iemand daar een id voor ?

Mitchell

24-09-2009 21:12

Waarom wil je die dan ook 100% hebben en tegelijkertijd gefloat? Als je die float gewoon weg haalt en de width er af haalt, gaat hij gelijk naar de correcte 100% breedte.

Jeroen G

24-09-2009 21:14

Weet niet zeker wat je bedoelt, maar dit mischien?


.clear {
    clear:both;
}

<div class="content_box">
    <div class="bar_top">
        <div class="round_left_top"></div>
        <div class="round_right_top"></div>
    </div>
<div class="clear"></div>
    <div class="bar_left"></div>
    <div class="content_0"></div>
  <div class="bar_right"></div>
<div class="clear"></div>
    <div class="bar_bottom">
        <div class="round_left_bottom"></div>
        <div class="round_right_bottom"></div>
    </div>    
</div>

Derk Janssen

24-09-2009 21:40

Mitchell als ik dat doe verschuift alles.
Jeroen dat werkt helaas niet.
Ik heb de laaste versie geüpload er zit nu een zwart gat in het pitten van het kader die zou ik graag weg willen hebben.
http://ramonvanophuizen.nl/probleem%20css/

Reageren

Inloggen om te reageren