By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

How to lay this out in CSS

P: n/a
I've got a layout that I think is fairly common, and I can do it
easily in tables, but I'm not sure the best way to do it in CSS.
Anyone have some ideas?

Table version:
<table width="100%">
<tr>
<td style="padding-right: 10px;">
<a href=""><img height="107" width="70"
src="images/CCAlogox70.gif" border="0"></a>
</td>
<td width="99%">
<h1>
Site Title<br>
Control Panel
</h1>
</td>
<td style="padding-right: 10px;">
<a href="<%= sRootDirectory %>/logout.asp">Logout</a>
</td>
</tr>
</table>

Here is the closest I cam with CSS:
<style>
#ControlPanelHeader {
width:100%;
background-color: tan;
padding: 5px;
margin: 0px;
}
</style>
<div id="ControlPanelHeader">
<a style="padding-right: 10px; position: absolute; top: 10px; left:
10px;" href="#"><img height="107" width="70"
src="images/CCAlogox70.gif" border="0"></a>
<div style="padding-left: 80px;">
<h1>
Site Title<br>
Control Panel
</h1>
</div>
<div style="position: absolute; top: 10px; right: 10px;"><a href="<%=
sRootDirectory %>/logout.asp">Logout</a></div>
</div>

There are two problems with my CSS solution.
1) I had to specify the left padding on my "title" section and had to
know the width of the image to do so. I want this to be more fluid so
I can plug any image in and keep the layout in tact.
2) Also with the size of the image. The image drops below the
containing div and starts to get into that comes after this content.

Any thoughts on this would be great.

Thanks,
Nate Baxley
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
On 6 Nov 2003 10:44:41 -0800, nbaxley wrote:
I've got a layout that I think is fairly common, and I can do it
easily in tables, but I'm not sure the best way to do it in CSS.
Anyone have some ideas?


Try this:

<div id="ControlPanelHeader">
<a style="padding-right: 10px; float:left;" href="#"><img height="107"
width="70" src="images/CCAlogox70.gif" border="0"></a>
<a style="margin-right:10px; float:right; margin-top:3em;"
href="/logout.asp">Logout</a>
<div>
<h1>
Site Title<br>
Control Panel
</h1>
</div>
<div stype="clear:left; line-height: 0; height: 0;"></div>
</div>
Jul 20 '05 #2

P: n/a
Erik Funkenbusch <er**@despam-funkenbusch.com> wrote in message news:<ys***************@funkenbusch.com>...
On 6 Nov 2003 10:44:41 -0800, nbaxley wrote:
I've got a layout that I think is fairly common, and I can do it
easily in tables, but I'm not sure the best way to do it in CSS.
Anyone have some ideas?


Try this:

<div id="ControlPanelHeader">
<a style="padding-right: 10px; float:left;" href="#"><img height="107"
width="70" src="images/CCAlogox70.gif" border="0"></a>
<a style="margin-right:10px; float:right; margin-top:3em;"
href="/logout.asp">Logout</a>
<div>
<h1>
Site Title<br>
Control Panel
</h1>
</div>
<div style="clear:left; line-height: 0; height: 0;"></div>
</div>


Thanks, I completly forgot about the clear property. Removing the
line-height and height properties fromt he last div left a little less
space in IE 6 for some reason and made no difference in Moz 1.5. One
interesting tidbit is that in IE, the Site Title/Control Panel is top
aligned and in Moz it's bottom aligned. Any idea on how to change
that? Also, your original post had a typo of stype on the last div.
I've changed it above, but I didn't catch it right away.

Thanks for the help,
Nate Baxley
Jul 20 '05 #3

P: n/a
On 7 Nov 2003 06:01:57 -0800, nbaxley wrote:
Erik Funkenbusch <er**@despam-funkenbusch.com> wrote in message news:<ys***************@funkenbusch.com>...
On 6 Nov 2003 10:44:41 -0800, nbaxley wrote:
I've got a layout that I think is fairly common, and I can do it
easily in tables, but I'm not sure the best way to do it in CSS.
Anyone have some ideas?


Try this:

<div id="ControlPanelHeader">
<a style="padding-right: 10px; float:left;" href="#"><img height="107"
width="70" src="images/CCAlogox70.gif" border="0"></a>
<a style="margin-right:10px; float:right; margin-top:3em;"
href="/logout.asp">Logout</a>
<div>
<h1>
Site Title<br>
Control Panel
</h1>
</div>
<div style="clear:left; line-height: 0; height: 0;"></div>
</div>


Thanks, I completly forgot about the clear property. Removing the
line-height and height properties fromt he last div left a little less
space in IE 6 for some reason and made no difference in Moz 1.5. One
interesting tidbit is that in IE, the Site Title/Control Panel is top
aligned and in Moz it's bottom aligned. Any idea on how to change
that? Also, your original post had a typo of stype on the last div.
I've changed it above, but I didn't catch it right away.

Thanks for the help,
Nate Baxley


The title shouldn't be either top or bottom aligned, since the containing
div should only take up as much space as it needs. There must be some
default styles playing tricks here that might need to be cleared out.

Also, there are some variations in how different browsers (and versions of
browsers) deal with padding and margins, and what the content measurements
really mean.
Jul 20 '05 #4

P: n/a
nbaxley wrote:
I've got a layout that I think is fairly common, and I can do it
easily in tables, but I'm not sure the best way to do it in CSS.
Anyone have some ideas?


If it's at all possible, I'd suggest doing what Eric Meyer suggests
for doing a new site. Recode the site in 3 steps:
1. navigation
2. content
3. css

At steps 1 and 2, *ignore the visuals*. Don't try to hammer a css
version of a table layout. I've been there. It's a difficult
journey. Instead, do the navigation. Then take the content from the
table-layout site, and put it in your new pages, making sure to mark
it up sensibly with html 4.01/strict. When 1 and 2 are done, and the
markup is validated, and you are reasonably sure it follows the spirit
of html, only then should you attempt the visual presentation with
css. And, at this point, the document should almost lend itself to
some layout ideas.

Good luck.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #5

P: n/a
Brian <us*****@julietremblay.com.invalid-remove-this-part> wrote in message news:<7m_qb.104052$9E1.510255@attbi_s52>...
nbaxley wrote:
I've got a layout that I think is fairly common, and I can do it
easily in tables, but I'm not sure the best way to do it in CSS.
Anyone have some ideas?


If it's at all possible, I'd suggest doing what Eric Meyer suggests
for doing a new site. Recode the site in 3 steps:
1. navigation
2. content
3. css

At steps 1 and 2, *ignore the visuals*. Don't try to hammer a css
version of a table layout. I've been there. It's a difficult
journey. Instead, do the navigation. Then take the content from the
table-layout site, and put it in your new pages, making sure to mark
it up sensibly with html 4.01/strict. When 1 and 2 are done, and the
markup is validated, and you are reasonably sure it follows the spirit
of html, only then should you attempt the visual presentation with
css. And, at this point, the document should almost lend itself to
some layout ideas.

Good luck.


Well, that's a good way to look at it, but at this point, I'm really
into step 3 and trying to achieve a specific effect with CSS. I know
how to achieve that effect with tables, but wasn't able to get it
quite right in CSS. It seems to be working now after Erik reminded me
of the clear property. I think that the 3 step process you mention is
a good one, but I think verifying that the layout you want can be
accomplished with CSS before coding all of your pages. Code a sample
page and create the CSS to format that sample into the layout you
want, and then continue to code the rest of your pages. This allows
you to make sure that your pages will have all of the neccesary
"structure" to get the layout you want with CSS, and also gives you a
more immediate "pretty picture" to show to the client, which is
unfortunatly a neccesity.

Thanks for the pointers,
Nate Baxley
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.