Coding this with CSS

HTML & CSS
1

How would I go about coding this top section with this snippet of code in CSS?


  <table width="800" height="100" background="images/top_banner_background.jpg" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="left" valign="top"><a href="http://mypage.com"><img src="images/top_banner_left.jpg" width="345" height="100" border="0"></a></td>
      <td align="right" valign="top"><a href="http://mypage.com"><img src="images/top_banner_right.jpg" width="405" height="100" border="0"></a></td>
    </tr>
  </table>

Thanks for any help.

2

Do you mean you want to remove the table markup from the HTML? No matter what HTML you use, you can always style it with CSS, so you could just as well style the HTML you have with CSS. Still, though, it would be better to remove the table.

3

Here would be one way to remove the table. It’s not as efficient as it could be, as you could do it without the left and right divs in the header, but meh, it’s no too much extra code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>	
<style type="text/css" media="all">
#header {
width: 800px;
background: url(images/top_banner_background.jpg);
overflow: hidden;
}
.header-left {float: left;}
.header-right {float: right;}
img {border: 0; vertical-align: top;}
</style>	
</head>

<body>
<div id="header">
<div class="header-left">
<a href="http://mypage.com"><img src="images/top_banner_left.jpg" width="345" height="100" alt="content of left image"></a>
</div>
<div class="header-right">
<a href="http://mypage.com"><img src="images/top_banner_right.jpg" width="405" height="100" alt="content of right image"></a>
</div>
</div>
</body>
</html>
4

Thanks for the help.

With this, I could center it and put a #wrap around two columns below it ( #nav and Content ) then at the bottom have a #bottom. That would work, wouldn’t it?

And what exactly is the OVERFLOW about?

Would there be any reason to put height: 100px in the #header with the width, or will the image commands lower make up for it?

5

Yes. Here’s a rough guide:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>	
<style type="text/css" media="all">

#wrapper {width: 800px; margin: 0 auto;}
#header {
	width: 100%;
	background: url(images/top_banner_background.jpg);
	overflow: hidden;
}
.header-left {float: left;}
.header-right {float: right;}
img {border: 0; vertical-align: top;}
#main {width: 100%; overflow: hidden;}
#nav {width: 180px; float: left;}
#content {width: 600px; float: right;}
#bottom {width: 100%;}
</style>	
</head>

<body>
<div id="wrapper">
	<div id="header">
		<div class="header-left">
		<a href="http://mypage.com"><img src="images/top_banner_left.jpg" width="345" height="100" alt="content of left image"></a>
		</div>
		<div class="header-right">
		<a href="http://mypage.com"><img src="images/top_banner_right.jpg" width="405" height="100" alt="content of right image"></a>
		</div>
	</div>
	
	<div id="main">
		<ul id="nav">
		</ul>
		<div id="content">
		</div>
	</div>
	<div id="bottom">
	</div>
</div> <!-- wrapper -->
</body>
</html>

And what exactly is the OVERFLOW about?

It forces a container to wrap around its floated contents. Otherwise there can be undexptected reults. This is the simplest way to “clear floats”.

Would there be any reason to put height: 100px in the #header with the width, or will the image commands lower make up for it?

No real need. Let the inner contents handle that.

6

My question would actually be what ARE those images, or more specifically what content are they? Is that the page heading?

HTML should be dictated by the content – without knowing what that content is, it’s hard for me to say what the markup should be. Could be DIV as shown so far, could be nested DIV, could still be img tags if those images are content… could be a H1 with a few nested SPAN if it’s a heading.

You might even be using images INSTEAD of content, in which case an image replacement method like gilder-levin should be used – or the images could be presentational and as such have no place in the markup in the first place.

Depends on what else is in the page too – this could be presentation that should be applied to an existing semantic element instead of wasting time adding more DIV and classes for nothing.

ASSUMING those images are content and not presentation (I smell presentation), two classes and the anchor with NO div are all it should “need”


<a href="/" class="topImages">
	<img src="http://www.sitepoint.com/forums/images/top_banner_left.jpg" width="345" height="100" />
	<img src="http://www.sitepoint.com/forums/images/top_banner_right.jpg" width="405" height="100" class="second" />
</a>

You’ll notice I also stripped out the border declarations since in MODERN markup there is no such attribute.

The CSS for that would be:


.topImages {
	display:block;
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
	background:url(images/top_banner_background.jpg);
}

.topImages img {
	float:left;
}

.topImages .second {
	float:right;
}

Of course if that’s actually like say… the site heading with presentational images, then the markup is a miserable /FAIL/ since those images shouldn’t even be in the markup… It could end up ‘properly done’ being something like this:


<h1>
	<a href="/">
		Site Title
		<span><span><!-- image replacements --></span></span>
	</a>
</h1>

The text in there being for when images are disabled… the two span being the replacement images. The CSS for that would end up something like:


h1 {
	position:relative;
	width:100%; /* trip haslayout, fix IE positioning */
	padding:34px 0;
	font:bold 30px/32px arial,helvetica,sans-serif;
	/*
		34px top padding + 34px bottom padding + 32px line-height == 100px total height
		no height declaration needed or even desired.
	*/
	background:url(images/top_banner_background.jpg);
}

h1 span {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100px;
	background:url(images/top_banner_left.jpg) top left no-repeat;
}

h1 span span {
	background:url(images/top_banner_right.jpg) top right no-repeat;
}

Technique is a variation of Gilder-levin image replacement – used so that images off users you can feed them pretty text… that’s making a LOT of assumptions about the code though.

Oh, and that 800px on the table, you do know that 800px isn’t 800 pixel wide display friendly, right? (just checking)

If you can link to an actual layout you are trying to make and/or convert, we could probably better answer your question.