Forum Moderators: not2easy
The 1st box has a logo in. I would like this to be central in the left hand box. The 2nd box has a description which I would also like to be central but I am unable to get this to happen. The content stays at the top of the box leaving a big gap below.
The following is the code:-
<style type="text/css">
<!--
.tr{background: none #87cefa; border: solid #000000 0px; color: #000000; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; padding: 0; text-align: center; width: 775px; }
.td{border: solid #000000 1px; float: left; margin: 0; padding: 0; background-color:#ffffff;}
.c {text-align:center;}
.vl {vertical-align:bottom;}
.iefix {margin-right: -7px}
.brown{background-color:#993333; color:#000000; font-size:10pt;}
.white{background-color:#ffffff; color:#000000; font-size:10pt;}
.cream{background-color:#ffcc99; color:#000000; font-size:10pt;}
-->
</style>
<div class="tr c" style="vertical-align: middle;">
<div class="td c" style="width:30%;"><a href="/info/display-site.html"><img src="images/frontpage/new.gif" width="90" height="85" alt="" border="0" /></a><br /><span class="small-text">This is the 1st Choic eLogo, Clcik for special offers</span></div>
<div class="td cream iefix vl" style="width:70%;"><h1>Diamond Garden Buildings are now available for<br /> delivery & Erection all over England & Wales</h1></div>
</div>
I also tried:-
<div class="td c" style="width:30%;"><a href="/info/display-site.html"><img src="images/frontpage/new.gif" width="90" height="85" alt="" border="0" /></a><br /><span class="small-text">This is the 1st Choic eLogo, Clcik for special offers</span></div>
<div class="td cream iefix vl" style="width:70%;"><h1>Diamond Garden Buildings are now available for<br /> delivery & Erection all over England & Wales</h1></div>
as well as may other combinations.
Any guidance would be appreciated.
Thanks.
Robin
¦ ¦¦ BANNER TEXT ¦
¦ LOGO ¦¦ links ¦
¦ ¦¦ TAB TAB TAB TAB ¦
Since I'm using tab navigation, I have to ensure the tab row mortises right down over the content region, with no gap (It breaks the metaphor if you don't do it right.)
The LOGO and the rest are in one <ul> (two <li> that are adjacent.) The right hand side is broken into a <ul> with three vertical <li>. All are blocks.
I hope that helps.
<!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>
<title>Middle align test - multiple lines</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Firstname Lastname, [example.com...] />
<style type="text/css" media="screen">
<!--
p {
margin:0;
padding:0;
}
#wrapper {
width:550px;
border:1px solid #666;
padding:10px;
height:300px;
}
#fixed {
float:right;
width:200px;
height:300px;
background:#666;
display:block;
}
#wrapper>#floating { /*display:table for Mozilla & Opera*/
display:table;
position:static;
}
#floating { /*for IE*/
width:300px;
height:100%;
background:#EAEAEA;
position:relative;
}
#floating div { /*for IE*/
position:absolute;
top:50%;
}
#floating>div { /*for Mozilla and Opera*/
display:table-cell;
vertical-align:middle;
position:static;
}
#floating div div {
position:relative;
top:-50%;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<img src="0.gif" alt="stuff" id="fixed" />
<div id="floating"><div><div>
<p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p>
</div></div></div>
</div>
</body>
</html>
[edited by: engine at 5:38 pm (utc) on Mar. 19, 2005]
[edit reason] examplified [/edit]
Hi Gulliver,
Thanks again, this is giving me a lot of ideas as to how I will be able to centre the various items on my web pages. This is good has the more I understand the better it will be.
Regards,
Robin
That works for other block elements as well, like h1, h2, etc.
Unless you float them.
