Web Design Forums

Mandy Moo · 16-09-2007, 11:45

Guys... help me!!

I'm building a website and I want a div container which will have a horizontal scroll. I intend to put in this container portfolio images and want it to stretch to accomodate these images.

This is an example of what I want - but only mine contains images rather than text.

BLUE VERTIGO | Web Design Resources Links | Last update SEP.15.2007

So far I have managed to get my images side by side in it's container... however it expand the entire browser window width with a horizontal scroll. I only want a horizontal scroll for that container.

My Html....

Quote:

<!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>
<meta http-equiv="content-type"
content="text/html; charset=utf-8"/>
<title> The Portfolio of Mandy Wong</title>
<link rel="stylesheet" type="text/css"
href="style.css"/>

</head>

<body>
<div id="portfolionav" align="middle">
<a href="page1.html">01</a>
<a href="page2.html">02</a> <a href="page3.html">03</a>
<a href="page4.html">04</a> <a href="page5.html">05</a>
<a href="page6.html">06</a> <a href="page7.html">07</a>
</div>

<div id="container">
<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.jpg"/>
</div>

<div id="title">
<b>Project Title</b>
<br>Exhibition Poster</br>
</div>

<div id="brief">
<b>Brief</b>
<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse massa lacus, vehicula eget, consectetuer sed, hendrerit feugiat, sem.
Nam a felis ut est dictum ullamcorper. Quisque eleifend varius lacus. Vivamus
nec diam ac nisi tincidunt laoreet. Nam a erat. Aenean fringilla.</br>
</div>

<div id="response">
<b>Response</b>
<br>Fusce id risus. Proin libero libero, tempus a, accumsan eu, ultrices ac,
lorem. Aliquam orci. Etiam ut odio nec odio iaculis porta. Donec ante mauris,
ullamcorper a, sagittis vel, placerat vitae, pede. Duis quis leo viverra nisi
faucibus sodales. Vestibulum et mauris. Ut tincidunt feugiat tellus.
Cras gravida orci. Integer vestibulum, leo nec vestibulum aliquet,
pede quam dignissim nulla, in tempor nunc est vitae nisl. In tellus.</br>
</div>

</body>
</html>
</quote>

My CSS Stylesheet...
<quote>
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 8pt;
background-image: url(background_header.gif);
background-repeat: no-repeat;
width: auto;
}

#portfolionav {
position: absolute;
top:110px;
font-size: 10pt;
word-spacing: 10px;
margin: 20px;
padding:10px;
border-bottom:2px solid black;
width: 950px; overflow: hidden;
}

#container {
position: absolute;
Top:170px;
width:3870px; _width:4400px;
height: 500px;
overflow:auto;
overflow-y:hidden;
padding-top:10px;
padding-bottom:10px;
margin-left:20px;
margin-right:20px;
}

a:link, a:visited {
text-decoration: none;
color: black;
}

a:hover {
color: #FF66CC;
}

Anyone got any suggestions? Please forgive me if I've done my CSS completely wrong.

bazzle · 16-09-2007, 13:09

You need to set the container div to be width you want the box to be displayed.

Then create another div and nest it within the container, set the width of this one as 4400px or whatever you want.

Make sure you specify overflow:auto for the container but you don't have to bother writing overflow-y:hidden it does it automatically.

Code:

#container {
position: absolute;
Top:170px;
width:1300px;
height: 500px;
overflow:auto;
padding-top:10px;
padding-bottom:10px;
margin-left:20px;
margin-right:20px;
}

#inner
{width:4400px;
height:500px;
}

Mandy Moo · 16-09-2007, 13:41

Thanks Bazzle... I'm much closer but it isn't quite right.
My images are now contained properly in the div but it's flowing vertical now with a vertical scroll. I need it to be horizontal. Any other suggestion? I don't stand why it's doing that even though I've specified a height.

My new codes...

Quote:

Quote:

#container {
position: absolute;
top:170px;
width:950px;
height:500px;
overflow:auto;
padding-top:10px;
padding-bottom:10px;
margin-left:20px;
margin-right:20px;

#content {
width: 3870px;
height: 500px;
}

bazzle · 16-09-2007, 14:35

I don't understand, it works fine for me.

Can you post your entire modified html and css.

and whats the dimensions of your images?

haku · 16-09-2007, 15:47

A link may be nice too.

pgo · 16-09-2007, 16:33

Code:

<div id="container">
<div id="content">
<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.jpg"/>
</div>

You didn't close both <div>s, maybe?

Mandy Moo · 17-09-2007, 07:58

Quote:

don't understand, it works fine for me.

Can you post your entire modified html and css.

and whats the dimensions of your images?

Bazzle, the height of all my images are 482px and varies in width. I made the content div really wide to accommodate whatever I put in there hoping the container will expand automatically.

I will post my entire revised html and css tonight (at work at the mo)

Quote:

A link may be nice too.

Haku, unfortunately there isn't a link yet... I don't want to pay for hosting until it is finished. I think I'm getting very close to cracking it now that Bazzle has put me in the right direction, it's just a matter of playing around with the css (i hope).

Quote:

You didn't close both <div>s, maybe?

Pgo, would closing both divs stop them from nesting in one another?
Do you mean...

<div id="container">
</div>

<div id="content">
<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.jpg"/>
</div>

Mandy Moo · 17-09-2007, 13:26

AHA!!! I've sussed it out! I accidently deleted the } at the end of the container in my css stylesheet!

Nearly there folks!

The next bit is... the div now stretch to 3870px wide which isn't what I want as it leaves a load of white space after my last image. 3870px is the maximum I need it to stretch with it being an external style sheet. This style sheet will be used for about 10 html page/projects. Is there anyway of making the 3870px a maximum so that the div automatically stretch?

16-09-2007, 13:09	#2 (permalink)
bazzle Senior Member Join Date: Aug 2007 Location: Derby uk Posts: 421	You need to set the container div to be width you want the box to be displayed. Then create another div and nest it within the container, set the width of this one as 4400px or whatever you want. Make sure you specify overflow:auto for the container but you don't have to bother writing overflow-y:hidden it does it automatically. Code: #container { position: absolute; Top:170px; width:1300px; height: 500px; overflow:auto; padding-top:10px; padding-bottom:10px; margin-left:20px; margin-right:20px; } #inner {width:4400px; height:500px; }

16-09-2007, 16:33	#6 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	Code: <div id="container"> <div id="content"> <img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.jpg"/> </div> You didn't close both <div>s, maybe?

17-09-2007, 13:26	#8 (permalink)
Mandy Moo Senior Member Join Date: Feb 2007 Location: Stoke on Trent Posts: 493	AHA!!! I've sussed it out! I accidently deleted the } at the end of the container in my css stylesheet! Nearly there folks! The next bit is... the div now stretch to 3870px wide which isn't what I want as it leaves a load of white space after my last image. 3870px is the maximum I need it to stretch with it being an external style sheet. This style sheet will be used for about 10 html page/projects. Is there anyway of making the 3870px a maximum so that the div automatically stretch? Last edited by Mandy Moo : 17-09-2007 at 14:42.

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

16-09-2007, 14:35	#4 (permalink)
bazzle Senior Member Join Date: Aug 2007 Location: Derby uk Posts: 421	I don't understand, it works fine for me. Can you post your entire modified html and css. and whats the dimensions of your images?

16-09-2007, 15:47	#5 (permalink)
haku shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 1,803	A link may be nice too.

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