Forum Moderators: not2easy
I am new to your community and I am not very experienced, but I was on this interview for web designer and they gave me a task I can't deal with, so I am asking for your help.
Here is my problem:
I have to make a 2-column layout with header and footer, which basically has to look like this <snip> with the navigation bar at the right. I made the layout, but it fails one of the requirements. When a very wide image is put in the content area the whole layout has to strech, i.e. the header and footer should cover the whole width of the page and the navigation block has to be to the right of the content (everything should look as in the initial state).
What I get is the header&footer not extending their widths and covering only half the width of the page, and the navigation bar not changing its position, i.e. it is placed on top of the image.
The task has to work in Firefox 1.5 and IE 5.5+.Can anyone give me a hint as to how to fix this? I would be really grateful.
Thank you,
Valentin
[edit reason] please no personal URLs, see this thread [webmasterworld.com] for more details [/edit]
[edited by: SuzyUK at 11:09 pm (utc) on July 20, 2006]
My layout must have a header&footer, content and right navigation.
My problem is: when I put an image wider than the content area, the whole layout has to expand. In my case only the content area expands, and all the other divs(h,f,nav) remain with fixed width.
Can anyone help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 1</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
html,body
{
margin:0.5% 0.5% 0.5% 0.5%;
padding:0;
display:inline
}
body
{
font: 76% arial,sans-serif
}
div#header h1
{
height:80px;
line-height:80px;
width:100%;
margin-bottom:0.5%;
padding-left:10px;
background-color:#ff9999
}
div#container
{
float:left;
width:100%
}
div#content
{
float:left;
width:74.9%;
margin-bottom:0.5%;
background-color:#00ccff
}
div#news
{
float:left;
height:100%;
width:25%;
margin-left:-25%;
background:#0099cc
}
div#footer
{
clear:left;
width:100%;
margin-top:0.5%;
background-color:#ba3f3f
}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="content">
<img src="images/1.jpg" alt="" />
</div>
<div id="news">
<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
Earlier, I did a "smiley art" picture demonstrating your layout, but I've had to shut down and reboot today due to thunderstorms and might have lost all my hard work....
... oh aren't you glad I found it :) ... the picasso I came up with based on your description in your first post.
:o:o:o:o:o:o:o:o:o:o
:):):):):):):):););)
:):):):):):):):););)
:):):):):):):):););)
:):):):):):):):););)
:(:(:(:(:(:(:(:(:(:(
Now I'm confused so I've taken your code posted above, and recolored it, yukky, but lime, yellow, blue it is ~ so which color is meant to be the right hand navigation?
I've done some code that I've recolored:
<style type="text/css">
html,body
{
margin:0.5% 0.5% 0.5% 0.5%;
padding:0;
display:inline
}body
{
font: 76% arial,sans-serif
}div#header h1
{
height:80px;
line-height:80px;
/* width:100%; */ /* removed 'til we see what you want */
margin-bottom:0.5%;
padding-left:10px; /* this adds to width per Box model rules */
background-color:#ff0; /* yellow */
}div#container {
float:left;
width:100%;
}div#content
{
/* float:left; */ /* removed 'til we see what you want */
/* width:74.9%; */ /* removed 'til we see what you want */
margin-bottom:0.5%;
background: #0f0; /* lime */
}div#footer {
clear:left;
/*width:100%;*/ /* removed til we see */
margin-top:0.5%;
background-color:#00f; /* blue */
color: #fff; /* white */
}
</style>
with the same HTML as you have above ~ which bit(color) are you trying to get on the right hand side?
Suzy
[edited by: SuzyUK at 12:43 am (utc) on July 22, 2006]
div#news
{
float:left;
height:100%;
width:25%;
margin-left:-25%;
background:#0099cc
}
So if I can sketch the thing I want using your method ;-) it would be sth like this
hhhhhhhhhh
cccccccnnn
cccccccnnn
cccccccnnn
ffffffffffffffff
of course the being header, f- footer, n-navigation. What I want to achieve is the following. When a very wide image is displayed (i.e. wider than the browser width) in the content area the layout has to look like this:
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
ccccccccccccccccccccccccccccccccccccccnnn
ccccccccccccccccccccccccccccccccccccccnnn
ccccccccccccccccccccccccccccccccccccccnnn
ccccccccccccccccccccccccccccccccccccccnnn
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
and what I get in my case is
hhhhhhhhhh
cccccccnnnccccccccccccccccccccccccccccccc
cccccccnnnccccccccccccccccccccccccccccccc
cccccccnnnccccccccccccccccccccccccccccccc
ccccccccccccccccccccccccccccccccccccccccc
ffffffffffffffff
header and footer remaining keeping initial width and navigation not changing position, nor expanding height.
Here are some of the requirements: no resizing of image, no overflow (the whole image has to be displayed), image width unknown (will be tested with various pictures), and it also has to work if a wide text abstract is displayed in the same way.
If you could help me, I would be more than grateful.
Thanks for your time,
Valentin
Unfloat the #container. It's at 100% width, so there's no need to float it anyway.
Set #header attributes in your stylesheet, and put your background color in there. <h1> is a text element, and the background color will only show up as wide as the text the way it's set now.
Set uour #content at 100% width, and place your #news *within* the content area.
That should get you started :)
