• Locked
1 reply [Last post]
Wed, 2011-12-28 20:00
Claudia
Claudia's picture
Offline
Last seen: 1 year 21 weeks ago
newbie
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.

Top
Tags:
Tue, 2012-02-21 10:46
#1
balajidesign
balajidesign's picture
Offline
Last seen: 26 weeks 3 days ago
Enthusiast
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>

Top
  • Locked