/    Sign up×
Community /Pin to ProfileBookmark

cut up large image and code in css

Copy linkTweet thisAlerts:
Jan 29.2006

I have a large image at the top of my site that I have cut up to 6 smaller images.

I am trying to code without using tables for layout purpose.

What is the best way to code this in css.
Not I tried it in div’s or just with the image tag with no margin or paddign but there is still showing a small space between the lines.
What’s the best way to do it?

Is it better to just do it as one big background image with text and links in appropriate places? What do you css experts suggest?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 29.2006 — Either method works, but I would go for the seperate images:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>align images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
#topimages {
width:375px; /* width of 3 images*/
overflow:hidden; /* clear the float */
}
#topimages img {float:left;} /* remove image gaps */
</style>

</head>
<body>
<div id="topimages">
<img alt="apple" src="apple.jpg" height="83" width="125">
<img alt="apple" src="apple.jpg" height="83" width="125">
<img alt="apple" src="apple.jpg" height="83" width="125">
<img alt="apple" src="apple.jpg" height="83" width="125">
<img alt="apple" src="apple.jpg" height="83" width="125">
<img alt="apple" src="apple.jpg" height="83" width="125">
</div>
</body>
</html>
Copy linkTweet thisAlerts:
@estheraauthorJan 29.2006 — that put each one on a separate line...

for example let's take teh following:


<img src="images/2_1.jpg" width="426" height="71" border="0"><a href=freequote.asp><img src="images/2-2.jpg" width="284" height="71" border="0"></a><img src="images/3_1.jpg" width="284" height="55" border="0"><img src="images/3-2.jpg" width="434" height="55" border="0">

between the 2 lines is about a pixel of space -- how can i get rid of that
Copy linkTweet thisAlerts:
@FangJan 29.2006 — <style type="text/css">

#topimages {

[COLOR=Green]width:XXXpx; /* change this width 710px ??? */[/COLOR]

overflow:hidden; /* clear the float */

}

#topimages img {float:left;} /* remove image gaps */

</style>
Copy linkTweet thisAlerts:
@estheraauthorJan 29.2006 — when i do that -- it puts the first one on it's own line (although 710 is enough) adn then then the next 2 on the next line. and last one on it's own line.

(i'm starting with just 2 lines.)
Copy linkTweet thisAlerts:
@FangJan 29.2006 — width:718px;
×

Success!

Help @esthera 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.25,
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,
)...