Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Question about building a specific web page design.

Posted by: kmckown Aug 26 2024, 08:40 AM

It has been a while since I stretched my HTML/CSS legs and am trying to figure out how to build something. Basically I want a single row (using divs) that has a gray text box with a transparent image overlaying the box. The gray box does not go all the way across the div, but the image does overlay part of it. I want to achieve this with HTML and CSS. I have attached a crude image of what I am trying to achieve. I also need this to be responsive in mobile where the text box fills the first row, and the image drops below the text box.

Any help would be greatly appreciate

https://ztgd.com/images/test_web.jpg

Posted by: coothead Aug 26 2024, 03:48 PM

Hi there kmckown,

and a warm welcome to these forums.

Here is an example...
HTML
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>Test Page</h1>

<section>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non porttitor lacus. Sed vestibulum felis orci. Cras risus massa, ultricies id efficitur nec, hendrerit semper odio. Ut eget ultricies nisl. Etiam non placerat ipsum. Cras tincidunt, lacus nec iaculis vestibulum, orci arcu pellentesque ex, eu iaculis urna orci id sem. Donec congue, est hendrerit congue vehicula, augue velit convallis erat, nec placerat ante lectus id est. Etiam scelerisque, enim a malesuada malesuada, dolor lorem mattis urna, non venenatis lacus libero non turpis. Morbi nec rutrum ante, ut malesuada est. Sed suscipit turpis nec urna luctus euismod. Ut eu rutrum odio, feugiat feugiat odio. Morbi ullamcorper ornare accumsan. Proin id lacus maximus, finibus odio eget, blandit sapien.
</p>
<img src="https://dummyimage.com/400x248/fd6767/000000&text=image" alt="test image">
</section>

</body>
</html>

CSS - screen.css
CODE

body {
   padding: 1em;
   background-color: #f9f9f9;
   background-image: linear-gradient( to bottom, #eee, #888 );
   background-attachment: fixed;
   font: normal 1em / 1.5  arial, helvetica, sans-serif;
}
h1 {
   font-size: 2em;
   color: #555;
   text-align: center;
}
section {
   padding: 1em;
   border: 1px solid #000;
   border-radius: 1em;
   background-image: url(https://dummyimage.com/400x248/fd6767/000000&text=image);
   background-position: calc( 100% - 1em ) 1em;
   background-size: 25em auto;
   background-repeat: no-repeat;
   background-color: #fff;
}
section p {
   width:calc( 100% - 26em );
   min-height: 16em;
}
section img {
   display: none;
}
@media ( max-width: 50em ) {
section{
   background-image: none;
}
section p {
   width: 100%;
   min-height: 100%;
}
section img {
   display: block;
   margin: auto;
}
}
@media ( max-width: 31em ) {
section img {
   width: 100%;
}
}

View the result here...

https://codepen.io/coothead/full/qBzKpOR

coothead

Posted by: kmckown Aug 27 2024, 07:35 AM

Thanks so much for the welcome, and thanks for the code snippet, this is very close, but I think my mock was bad, this is more what I am trying to achieve. I want the image to overlay the text box in normal mode.

IPB Image

Posted by: coothead Aug 27 2024, 06:50 PM

Hi there kmckown,

check out the attachment to see a working example.

kmckown.zip ( 95.72k ) Number of downloads: 46

coothead

Posted by: coothead Aug 28 2024, 04:59 AM

Hi there kmckown,

use this coding improved attachment instead...

kmckown_revised.zip ( 95.78k ) Number of downloads: 31

coothead