1 reply [Last post]
Claudia
Claudia's picture
Offline
newbie
Last seen: 2 years 15 weeks ago
Timezone: GMT+1
Joined: 2011-12-28
Posts: 1
Points: 2

I Have this code:
Html:

   <div id="blauwbox">
    </div>
    <div id="containertitel">
    <<div id="titeldiv">
    <h1>Dog Blog Of Tomieasdfasdf</h1>
    </div>
    </div>
 
    <div id="roodbox">
    </div>

And this CSS:

h1{
	position:relative;
	top:40px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	margin:10px;
}
 
 
#blauwbox{
	position:absolute;
	left:50%;
	margin-left:-100px;
	background:#09C;
	width:200px;
	height:300px;
}
 
 
#titeldiv{
	top:100px;
	background-color:#FFF;
	border: double #f6d101;
	border-width:8px;
	height:90px;
	-moz-border-radius: 19px; 
	-webkit-border-radius: 19px;
}
 
#roodbox{
	position:absolute;
	left:50%;
	top:70px;
	margin-left:-175px;
	background:#F00;
	width:350px;
	height:60px;
}

Now my problem is that I want the titeldiv to be centered in the windows like the other DIV's. But it must stay centerd even the content will change. Like the titel (h1) will becaume "Dogblog of Tomie, Annie an Pepper."

I'm just a bigginer and can't find the solution.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 26 weeks 3 days ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

use this

use this code:

h1{
	position:relative;
	top:40px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	margin:10px;
}
 
 
#blauwbox{
	position:absolute;
	left:50%;
	margin-left:-100px;
	background:#09C;
	width:200px;
	height:300px;
}
 
 
#titeldiv{
	top:100px;
	background-color:#FFF;
	border: double #f6d101;
	border-width:8px;
	height:90px;
	-moz-border-radius: 19px; 
	-webkit-border-radius: 19px;
}
 
#roodbox{
	position:absolute;
	left:50%;
	top:70px;
	margin-left:-175px;
	background:#F00;
	width:350px;
	height:60px;
}

html
<div id="blauwbox">
 
    <div id="containertitel">
    <div id="titeldiv">
    <h1>Dog Blog Of Tomieasdfasdf</h1>
    </div>
    </div>
 
    <div id="roodbox">
    </div>
    </div>