Menu
Community /Pin to ProfileBookmark
@NogDogDec 09.2004 — #You could play around with absolute positioning, something like:
Positioning several images
I’m trying to position several images and a couple of attached documents on a web page which I’m creating – painfully, because I’m a content manager, not a programmer – within Microsoft Content Manager. I can see from numerous messages in the forum that CSS is advocated as the way to go and I’ve tried to get my head around the “float” property, but I can’t seem to adapt it to my requirements.
I’ve attached a gif showing how I want the section of the page to look. The alignment is:
– image 1: top left
– image 2: top, spaced slightly right of image 1
– object 1: aligned with bottom of image 1; centred with image 2
– image 3: top right
– image 4: top, spaced slightly left of image 3
– object 2: aligned with bottom of image 3; centred with image 4
Any thoughts, advice or – better still – solutions gratefully received.
Sign in
to post a comment3 Comments(s) ↴
0
@NogDogDec 09.2004 — #You could play around with absolute positioning, something like:<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Absolute Positions</title>
<style type="text/css">
div.bigimg {
border: 2px blue solid;
width: 150px;
height: 200px;
position: absolute;
}
div.smallimg {
border: 2px blue solid;
width: 60px;
height: 80px;
position: absolute;
}
div.object {
border: 2px red solid;
width: 50px;
height: 50px;
position: absolute;
}
p {
margin: 10px 2px;
width: 100%;
text-align: center;
font-size: small;
}
</style>
</head>
<body>
<div class=bigimg style="left: 15px; top: 15px;"><p>Image 1</p></div>
<div class=smallimg style="left: 200px; top 15px;"><p>Image 2</p></div>
<div class=smallimg style="left: 300px; top 15px;"><p>Image 3</p></div>
<div class=bigimg style="left: 400px; top: 15px;"><p>Image 4</p></div>
<div class=object style="left: 206px; top: 164px;"><p>Object1</p></div>
<div class=object style="left: 306px; top: 164px;"><p>Object2</p></div>
</body>
</html>