/    Sign up×
Community /Pin to ProfileBookmark

Using space on either side of image

Copy linkTweet thisAlerts:
Jan 17.2007

I am a complete newbie so I need it simple in non-technical language. I have an image in the middle of a page. I would like put in the spaces beside the image, icons as links to other pages. Would tables give me that choice? and if so how would I go about creating the side spaces as panels that would take multiple icon images?

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@henthornauthorJan 19.2007 — Thanks. These look interesting but are way ahead of me at this time.
Copy linkTweet thisAlerts:
@WebJoelJan 19.2007 — Can you explain what you want a bit better? I might be able to write up something and give it footnotes to help you
Copy linkTweet thisAlerts:
@henthornauthorJan 19.2007 — Yes, I have a page with an image centered vertically in the middle 45% (approximately) of the page. The width of the image is a little less than a third of the page. I would like to place small icons or images on either side as links to other sections in the web site. Is that pretty clear? I could probably send a copy if the source code as it is right now. I already have an old web site that I have used for several years and was just going to update it a little. It is pretty simple.
Copy linkTweet thisAlerts:
@WebJoelJan 19.2007 — A bit of a hack this, but do you mean somethng along this line?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}

ul {list-style-type:none;width:226px; padding-left:14px;margin-top:15px; display:block; /*border:1px solid blue;*/}

ul li {display:inline;}

ul li a img {margin:2px;}

</style>

</head>

<body>

<!-- next: WRAPPER for image elements -->

<div style="position:relative; width:700px; height:250px; border:1px solid gray; margin:10px auto;">

<!-- next: the left-hand thumbnail images -->

<div style="width:250px; height:auto; float:left;">

<ul>

<li><a href="#"><img alt="1" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="2" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="3" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="4" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="5" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="6" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="7" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="8" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="9" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="10" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="11" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="12" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="13" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="14" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="15" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="16" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

</ul>

</div>

<!-- next: your centered image -->

<div style="position:relative; width:200px; height:250px; float:left; margin:0px auto;">

<img alt="image: centered" src="images/picture.jpg" style="position:absolute; width:200px; height:250px; margin:0px auto; border:1px dotted blue;" />

</div>

<!-- next: the right-hand thumbnail images -->

<div style="width:250px; height:auto; float:right;">

<ul>

<li><a href="#"><img alt="1" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="2" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="3" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="4" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="5" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="6" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="7" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="8" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="9" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="10" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="11" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="12" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="13" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="14" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="15" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

<li><a href="#"><img alt="15" src="images/picture.gif" style="border:1px solid red; float:left; width:50px; height:50px;"></a></li>

</div>

</div><!-- end WRAPPER for photo image section -->

</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@henthornauthorJan 19.2007 — Thanks. I'll have to study that and see if I can figure out how to use it.
Copy linkTweet thisAlerts:
@WebJoelJan 20.2007 — This can be shrunk down a bit by replacing:

[B]style="border:1px solid red; float:left; width:50px; height:50px;"[/B]

with:

[B]class="thumbs"[/B] in the HTML, and next adding:

[B].thumbs {border:1px solid red; float:left; width:50px; height:50px;}[/B]

in the <style></style> section.

That way, all the images are served from the CSS, allowing caching of this data and reducing bandwidth by creating a smaller document.

-And it saves alot of typing.
Copy linkTweet thisAlerts:
@henthornauthorJan 21.2007 — I haven't tried to shrink it yet, but will give it a try.
×

Success!

Help @henthorn 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.19,
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,
)...