Member Avatar for s0312001

Guys I am trying to do the following in html
can you please help :cry:
I am having problems positioning images as follows


[IMG][/IMG]

  • 2 Contributors
  • 5 Replies
  • 100 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by s0312001

Dani AI

Generated

Quick recap and practical next steps based on what happened in this thread.

The symptom here was a stylesheet block being treated as plain HTML, so the browser ignored the rules. For debugging, check three common gotchas: forgotten units on nonzero offsets (for example, 3 is not valid — use 3px or 3%), a containing element with no size so positioned children appear in unexpected places, and stacking/overlap when multiple items occupy the same area. Use the browser inspector to view computed styles and see which rules actually apply.

If the goal is simply to place images in the four corners of a box, a modern approach avoids fragile absolute offsets and makes layouts responsive. Example using CSS Grid (different technique than absolute positioning):

<div class="box">
  <img src="a.jpg" class="tl" alt="">
  <img src="b.jpg" class="tr" alt="">
  <img src="c.jpg" class="bl" alt="">
  <img src="d.jpg" class="br" alt="">
</div>

.box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16/9;
}

.tl { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
/* tr, bl, br follow the same idea */

Other practical tips: use alt for accessibility, use srcset/sizes for responsive images, validate HTML/CSS (for example with the W3C Validator), and include a proper DOCTYPE so layouts behave consistently. If you must use absolute positioning, give the ancestor a reliable size and watch z-index stacking.

Thanks to for the quick pointer that revealed the root cause, and to for posting the test markup — once the CSS is moved out of the HTML and units/containment are corrected, placement should behave predictably.

Member Avatar for sbmarsh

theres a couple of ways to do it.

the easy way is to just use a table, or else you could do it via css.
img.whateveruwanttocallit
{
position:absolute;
left:0px;
top:0px;
}


<img class="whateveruwanttocallit" src="whatever.jpg" width="100" height="180" />

Member Avatar for s0312001

Thanks man i will try it and let you know if it works

Member Avatar for s0312001

what is wrong with this??

<html>
<head>
<title>images positioning</title>

<body>
<div.container { position:relative; /* etc. */ }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:3; }
img#topright { top:0; right:6; }
img#bottomleft { bottom:0; left:7; }
img#bottomright { bottom:0; right:0; }>

<div class="container">
<img src="pic1.jpg" class="positioned" id="topleft">
<img src="pic2.jpg" class="positioned" id="topright">
<img src="pic3.jpg" class="positioned" id="bottomleft">
<img src="pic4.jpg" class="positioned" id="bottomright">
<!-- etc. -->
</div>

</body>
</html>

Member Avatar for sbmarsh

place your css in your head part
<style>
div.container { position:relative; /* etc. */ }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:3; }
img#topright { top:0; right:6; }
img#bottomleft { bottom:0; left:7; }
img#bottomright { bottom:0; right:0; }
</style>

</head>

take away the <> parts in the css u done.

then it should work fine

Member Avatar for s0312001

Thanks a million it works fine, now i will try to figure the right numbers

Thanks again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.