Help with CSS

I have to create a fluid 100% width HTML banner. Can you guys look at the code and let me know how I can center vertically the text and if it works in IE6?

Is there a way to auto resize text (font size) when resizing window that works in older browsers?


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#maincontainer{
width:100%;
display:block;
}
#greytext{font-size: 110%; color: #cccccc;}
#greentext{color: #84b740;}
#topsection{
font-family: Georgia, 'Times New Roman', Times, serif;
background-color:#ccc;
border-bottom: 7px solid #000;
line-height: 1.8em;
height: 100px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 20px;
}
.innertube{
height: 100px;
margin: 10px;
margin-top: 0px;
text-align: center;
}
#whitetext{
color:#fff !important;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
text-shadow: 2px 2px #333333;
</style>
</head>
<body>

<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1 id="whitetext">TEXT TEXT TEXT</h1>
<b id="greytext">dfgdfgdfgdfg</b>
</div>
</div>
</div>

</body>
</html>


Thanks!

Hi,

We’d need to know a little bit more about what you are trying to do here as there could be a number of options. You also seem to have grey text on a grey background so it is invisible!

Usually you would not use a height and just add padding top and bottom to the container and the text will always be vertical.

If it was just one line of text that was not going to wrap then you could just set the line-height to the same size as the height and the text will stay in the vertical middle as long as the text doesn’t wrap.

Alternatively you could use the display:table-cell properties for IE8 and vertically align multiple rows vertically quite easily ( there are hacks for IE7 and under in there).

It al depends on what happens next :slight_smile:

You could use media queries to change the text size at smaller screen widths but you would need to use a polyfill for ie8 and under.

Hello Friend,

Please check this code. This code contain your requirement.

<!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=iso-8859-1" />
<title>Kewal Knojiya</title>
<style>
body{
margin:0;
padding:0;
background-color:#99CCCC;
}
#header{
background-color:#00CCFF;
width:100%;
height:auto;
}
#header .in{
width:1000px;
height:150px;
background-color:#CCCCCC;
margin:auto;
}
#header .text{
font-size:48px;
padding:30px 0 0 0;
text-align:center;
}
</style>
</head>

<body>
<div id="header">
<div class="in">
<div class="text">Kewal Knojiya</div>
</div>
</div>
</body>
</html>

Thank you Dalv.

Thanks, Paul!

Thanks, knojiyak: I checked your code, but unfortunately it doesn’t seem to resize the text, and it is not fluid.

Hi,

I would just d something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.header {
	height:120px;
	width:100%;
	display:table;
	border-top:5px solid #000;
	border-bottom:5px solid #000;
	text-align:center;
	background:#666;
}
*+html .header{height:auto;min-height:120px;}/* ie7*/
*+html .header h1{padding:20px 0 0}/* ie7*/
* html .header h1{padding:20px 0 0}/* ie6*/
h1 {
	margin:0;
	padding:0 10px;
	color:#fff;
	font-size:120%;
	display:table-cell;
	vertical-align:middle;
}
</style>
</head>

<body>
<div class="header">
		<h1>This is the fluid text that will wrap and stay vertically centred</h1>
</div>
</body>
</html>

IE8+ (and all other browsers get the perfect vertical centring and IE7 and under just get a rough padding top). There are hacks for IE7 and under but you have to add extra elements so is not worth sullying the html for minor browsers.

sorry brow I hope Next Time i will help you…

Thanks, knojiyak: I checked your code, but unfortunately it doesn’t seem to resize the text, and it is not fluid.[/QUOTE]