/    Sign up×
Community /Pin to ProfileBookmark

image thums problem

im looking to make a small box with six images within, each with a small description to the right,i want them all to be inside this box automatically so when i add a link it will go in the correct position.if this is posible any info will be appreciated.

heres the code i tried to use…

css=

#gamesHolder{
background-color:#6633FF;
width:500px;height:10;
}

#games img{
width:50px;height:50px;
border: solid grey 1px;padding:2px;
}

#games h5{
height:20px;width:200px;
position:relative;left:65px;top: -79px;
}

#games p{
height:40px;width:200px;
position:relative;left:65px;top: -103px;
font-size:14px;
}

HTML=

<!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=iso-8859-1″ />
<title>Untitled Document</title>
<style>
@import “tabTesterCSS.css”;
</style>
</head>

<body>
<div id=”gamesHolder”><div id=”games”>
<img src=”image.jpg”/><h5><a href=”www.dffg.com”>a link blahd</a></h5><p>sdfsdfsdf</p>
<img src=”image2.jpg”/><h5><a href=”www.dffg.com”>a link blahd</a></h5><p>sdfsdfsdf</p>
</div>
</div>

</body>
</html>

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@ray326Jul 01.2007 — Assuming I know what each image package looks like I'd go with
[code=html]<h5><a href="www.dffg.com">a link blahd</a></h5>
<p><img src="image.jpg"/>sdfsdfsdf</p>[/code]
for each one.
Copy linkTweet thisAlerts:
@ttmwauthorJul 01.2007 — i used that but then it just carry's on down the page when i want the first three to go downwards and then the fourth one will start to the right of the first and carry on in the same way down the page as well as across.how would i do this?thanks
Copy linkTweet thisAlerts:
@ray326Jul 01.2007 — I don't know of any simple way to do that. The "natural" layout is down, the second is "left, right, wrap".
Copy linkTweet thisAlerts:
@WebJoelJul 01.2007 — I'm alittle concerned about this:

#games h5{

height:20px;width:200px;

position:[B]relative[/B];left:65px;[B]top: -79px[/B];

}

#games p{

height:40px;width:200px;

position:[B]relative[/B];left:65px;[B]top: -103px[/B];

font-size:14px;

}[/QUOTE]

Being 'relative;', it is in the document flow but you position it 103-pixel 'up' from the actual location, and 'right' by the respective amounts too. The images still resides in the actual location, so other elements are forced to 'bump around' these invisible 'placeholders'. Eventually, you will have trouble with this..
Copy linkTweet thisAlerts:
@ttmwauthorJul 02.2007 — so how do i get it so its not in that place? should i use absolute instead of relative?or maybe something else?
×

Success!

Help @ttmw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...