/    Sign up×
Community /Pin to ProfileBookmark

Absolute positioning problem

Copy linkTweet thisAlerts:
Jul 12.2004

I’ve been reading a lot of posts saying tables are not good for positioning content. So I tried to read up on CSS and see what I can do (Or in this case what I can not).

Basically I am trying to get 8 images positioned so it looks like one big image. Not a problem with tables but a pain with CSS. I’ve played around with the values and can never get it right on different browsers. The way it stands now, it works fairly well with Firefox, not at all with IE, Netscape, and Opera.

Any input?

<html>
<head>
<style type=”text/css”>
h1
{
position: absolute;
top: 12px;
left: 0px
}
h2
{
position: absolute;
top: 20px;
left: 0px
}
h3
{
position: absolute;
top: 21px;
left: 183px
}
h4
{
position: absolute;
top: 209px;
left: 0px
}
h5
{
position: absolute;
top: 209px;
left: 183px
}
h6
{
position: absolute;
top: 274px;
left: 0px
}
h7
{
position: absolute;
top: 299px;
left: 75px
}
h8
{
position: absolute;
top: 299px;
left: 190px
}
h9
{
position: absolute;
top: 299px;
left: 283px
}
</style>
</head>

<body>

<h1>TESTING POSITIONING</h1>
<h2>
<img src=”http://mmarzejon.web.aplus.net/images/index_image_1.jpg” border=”0″ alt=”none” width=”183″ height=”190″></h2>
<h3>
<img src=”http://mmarzejon.web.aplus.net/images/index_image_2.jpg” alt=”none” width=”187″ height=”190″></h3>
<h4>
<img src=”http://mmarzejon.web.aplus.net/images/index_image_3.jpg” alt=”none” width=”183″ height=”69″></h4>
<h5>
<img src=”http://mmarzejon.web.aplus.net/images/index_image_4.jpg” alt=”none” width=”187″ height=”69″></h5>
<h6>
<img border=”0″ src=”http://mmarzejon.web.aplus.net/images/bpicture_fill.gif” width=”75″ height=”19″ alt=”none”></h6>
<h7>
<img border=”0″ src=”http://mmarzejon.web.aplus.net/images/termsconditions.gif” width=”115″ height=”19″ alt=”none”></h7>
<h8>
<img border=”0″ src=”http://mmarzejon.web.aplus.net/images/siterequest.gif” width=”93″ height=”19″ alt=”none”></h8>
<h9>
<img border=”0″ src=”http://mmarzejon.web.aplus.net/images/contactus.gif” width=”87″ height=”19″ alt=”none”></h9>

</body>
</html>

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@VladdyJul 12.2004 — Before gettting into "how" I'm curious about "why".

First, there are no <h7+>.

Second, I really doubt those images represent headings...

Good CSS presentation starts with a properly marked-up content.
Copy linkTweet thisAlerts:
@ray326Jul 12.2004 — Bad markup. There's no apparent reason for the separate images but anyway here's a way to do it better. Pardon the strange formatting; that's thanks to Tidy as I had it strip out unmatched tags after it hacked it.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;TESTING POSITIONING&lt;/title&gt;
&lt;style type="text/css"&gt;
img { display: block; float:left; }
#imageblock { width: 400px; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;TESTING POSITIONING&lt;/h1&gt;
&lt;div id="imageblock"&gt;
&lt;img src="http://mmarzejon.web.aplus.net/images/index_image_1.jpg" border=
"0" alt="none" width="183" height="190"&gt; &lt;img src=
"http://mmarzejon.web.aplus.net/images/index_image_2.jpg" alt="none" width=
"187" height="190"&gt; &lt;img src=
"http://mmarzejon.web.aplus.net/images/index_image_3.jpg" alt="none" width=
"183" height="69"&gt; &lt;img src=
"http://mmarzejon.web.aplus.net/images/index_image_4.jpg" alt="none" width=
"187" height="69"&gt; &lt;img border="0" src=
"http://mmarzejon.web.aplus.net/images/bpicture_fill.gif" width="75"
height="19" alt="none"&gt; &lt;img border="0" src=
"http://mmarzejon.web.aplus.net/images/termsconditions.gif" width="115"
height="19" alt="none"&gt; &lt;img border="0" src=
"http://mmarzejon.web.aplus.net/images/siterequest.gif" width="93" height=
"19" alt="none"&gt; &lt;img border="0" src=
"http://mmarzejon.web.aplus.net/images/contactus.gif" width="87" height=
"19" alt="none"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@newbie86authorJul 12.2004 — Thanks Ray, that works perfect. This was just something that I was playing around with, however in normal situation do you think it is better not to slice up a larger image?

I was under the impression that a large image should be sliced in order to make it easier for a browser to load it - especially 28k & 56k connections.

Then again I've been doing this for 6-months.
Copy linkTweet thisAlerts:
@David_HarrisonJul 13.2004 — If you slice the image up into little ones, each new image has headers in it, this will actually increase what will need to be downloaded. Also, multiple requests to the server need to be made with many images.

I find it best to just keep the image as a whole, and also if the image is not content I'd set it as a background image for some element (eg. the body).
Copy linkTweet thisAlerts:
@ray326Jul 14.2004 — As lavalamp says, keep the images whole and reuse them as much as possible throughout the site. The browser only loads them once. That's also the reason to outboard generally used styles and javascript.
×

Success!

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