The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Question about building a specific web page design.
kmckown
post Aug 26 2024, 08:40 AM
Post #1





Group: Members
Posts: 2
Joined: 26-August 24
Member No.: 29,228
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 26 2024, 03:48 PM
Post #2


Advanced Member
****

Group: Members
Posts: 226
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there kmckown,

and a warm welcome to these forums. IPB Image

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

This post has been edited by coothead: Aug 26 2024, 04:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kmckown
post Aug 27 2024, 07:35 AM
Post #3





Group: Members
Posts: 2
Joined: 26-August 24
Member No.: 29,228
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 27 2024, 06:50 PM
Post #4


Advanced Member
****

Group: Members
Posts: 226
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there kmckown,

check out the attachment to see a working example. IPB Image

Attached File  kmckown.zip ( 95.72k ) Number of downloads: 14



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 28 2024, 04:59 AM
Post #5


Advanced Member
****

Group: Members
Posts: 226
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there kmckown,

use this coding improved attachment instead...

Attached File  kmckown_revised.zip ( 95.78k ) Number of downloads: 10



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 7th October 2024 - 12:35 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC