Web Design Forums

sanchopansa · 21-07-2006, 09:09

Hello!

I am just starting off with web design, so please excuse me if I am wasting your time with some elementary stuff.
I got this task to create a 2-column layout with header and footer and right navigation. It should basically look like this

http://i.data.bg/06/07/21/35293_orig.jpg

(the lighter blue being the content section)
My problem is that when a very wide image is displayed in the content(e.g. width="2000") the whole layout has to strech. And this is how mine looks

http://proba45.free.bg/HTMLPage.htm

while it should look like in the initial state.

Could anyone please help?

Kindest regards,
Valentin

datahound · 21-07-2006, 09:14

Resize the images so they are all the correct size for the page?

If you want a larger version available give the visitor the option to enlarge and have a second larger version open in a new window.

.Ryan · 21-07-2006, 09:15

use % not px

width: 850px;

is why it is staying as small and not extending.

sanchopansa · 21-07-2006, 09:30

@datahound
I don't know the size of the images that will be displayed. It has to work irrespective of that.
@.Ryan
I am working with % and it still wouldn't stretch

Do you have any other ideas why it might be so?

.Ryan · 21-07-2006, 09:40

div.container {
width: 850px;
border: 1px solid red;
}
div.header {
height: 20px;
width: 850px;
background-color: #666666;
}
div.right {
width: 200px;
float: left;
}
div.left {
background: #ccc;
width: 640px;
float: left;

}
div.footer {
width: 100%;
clear: both;
background: orange;
}

the only one that is a % is the footer, which is inside the container so it's 100 percent of 850px, making it 850 pixels wide lol.

sanchopansa · 21-07-2006, 10:05

It won't work like this either.
Here is the source I'm using right now, and here http://proba45.free.bg/HTMLPage.htm you can see how the page looks like with the big image.
Do you have an idea why this might be so?
Thank you for your 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>Task</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
div.container{
width: 850px;
border: 1px solid red;
}
div.header {
height: 20px;
width: 850px;
background-color: #666666;
}
div.left {
width: 200px;
float: left;
}
div.right {
background: #ccc;
width: 640px;
float: left;

}
div.footer {
width: 100%;
clear: both;
background: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="left">
<p><img src="images/1.jpg" alt=""/></p>
</div>
<div class="right">
<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 class="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>

pgo · 21-07-2006, 10:06

Sigh. He already told you twice. Stop using pixel measurements and start using percentages.

sanchopansa · 21-07-2006, 10:23

Sorry, I've mispasted the code. Here is the one with the percentages, but it still won't work.

<!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#wrapper
{
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="wrapper">
<div id="content">
<img src="images/1.jpg" alt="" />
</div>
</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>

The page looks exactly the same as the one with the pixels. Any suggestions?

weldo · 21-07-2006, 10:30

there's no #container code in your css - but that's the first thing that needs a % width specifying - all your elements are contained within it ...

sanchopansa · 21-07-2006, 11:08

Sorry to bother you with my lamer questions again. I added the div#container section with width:100% but the problem I had before still persists. I hope I'm not making you nervous...

<!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
{
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>

misterphotoshop · 22-07-2006, 00:08

Theres no way for your page not to stretch if you put an image that large on, thought this was common sense...

21-07-2006, 09:09	#1 (permalink)
sanchopansa Registered User Join Date: Jul 2006 Posts: 7	new to css- how to strech the whole layout when a very wide image is loaded. Hello! I am just starting off with web design, so please excuse me if I am wasting your time with some elementary stuff. I got this task to create a 2-column layout with header and footer and right navigation. It should basically look like this http://i.data.bg/06/07/21/35293_orig.jpg (the lighter blue being the content section) My problem is that when a very wide image is displayed in the content(e.g. width="2000") the whole layout has to strech. And this is how mine looks http://proba45.free.bg/HTMLPage.htm while it should look like in the initial state. Could anyone please help? Kindest regards, Valentin

21-07-2006, 09:14	#2 (permalink)
datahound Spare Parts Join Date: Jan 2005 Location: Bracknell Forest Posts: 4,997	Resize the images so they are all the correct size for the page? If you want a larger version available give the visitor the option to enlarge and have a second larger version open in a new window. __________________ poochmedia \| Computer Spare Parts \| Computer & Telephone Disposals

21-07-2006, 10:30	#9 (permalink)
weldo now with added beard Join Date: Mar 2004 Location: Liverpool Posts: 5,440	there's no #container code in your css - but that's the first thing that needs a % width specifying - all your elements are contained within it ... __________________ fuck signatures

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

21-07-2006, 09:15	#3 (permalink)
.Ryan Senior Member Join Date: Jun 2006 Posts: 295	use % not px width: 850px; is why it is staying as small and not extending.

21-07-2006, 09:30	#4 (permalink)
sanchopansa Registered User Join Date: Jul 2006 Posts: 7	@datahound I don't know the size of the images that will be displayed. It has to work irrespective of that. @.Ryan I am working with % and it still wouldn't stretch Do you have any other ideas why it might be so?

21-07-2006, 09:40	#5 (permalink)
.Ryan Senior Member Join Date: Jun 2006 Posts: 295	div.container { width: 850px; border: 1px solid red; } div.header { height: 20px; width: 850px; background-color: #666666; } div.right { width: 200px; float: left; } div.left { background: #ccc; width: 640px; float: left; } div.footer { width: 100%; clear: both; background: orange; } the only one that is a % is the footer, which is inside the container so it's 100 percent of 850px, making it 850 pixels wide lol.

21-07-2006, 10:05	#6 (permalink)
sanchopansa Registered User Join Date: Jul 2006 Posts: 7	It won't work like this either. Here is the source I'm using right now, and here http://proba45.free.bg/HTMLPage.htm you can see how the page looks like with the big image. Do you have an idea why this might be so? Thank you for your 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>Task</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <style type="text/css"> div.container{ width: 850px; border: 1px solid red; } div.header { height: 20px; width: 850px; background-color: #666666; } div.left { width: 200px; float: left; } div.right { background: #ccc; width: 640px; float: left; } div.footer { width: 100%; clear: both; background: orange; } </style> </head> <body> <div class="container"> <div class="header">Header</div> <div class="left"> <p><img src="images/1.jpg" alt=""/></p> </div> <div class="right"> <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 class="footer"><p>Here it goes the footer</p></div> </div> </body> </html>

21-07-2006, 10:06	#7 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Sigh. He already told you twice. Stop using pixel measurements and start using percentages.

21-07-2006, 10:23	#8 (permalink)
sanchopansa Registered User Join Date: Jul 2006 Posts: 7	Sorry, I've mispasted the code. Here is the one with the percentages, but it still won't work. <!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#wrapper { 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="wrapper"> <div id="content"> <img src="images/1.jpg" alt="" /> </div> </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> The page looks exactly the same as the one with the pixels. Any suggestions?

21-07-2006, 11:08	#10 (permalink)
sanchopansa Registered User Join Date: Jul 2006 Posts: 7	Sorry to bother you with my lamer questions again. I added the div#container section with width:100% but the problem I had before still persists. I hope I'm not making you nervous... <!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 { 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>

22-07-2006, 00:08	#11 (permalink)
misterphotoshop Senior Member Join Date: Jul 2004 Location: Canada Posts: 141	Theres no way for your page not to stretch if you put an image that large on, thought this was common sense...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)