PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Sep 26, 2020 3:46 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 3 posts ] 
Author Message
PostPosted: Fri Jun 05, 2015 6:07 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
I have a DIV with an image in it (not as a background image).
A menu that I need to overlap that image, but the menu is longer (taller) than the image.
So I need the menu to push the DIV down where the image <img> tag sits.

Otherwise, the menu overlaps the site's template footer.

The containing DIV is position: relative. The overlapping menu is position:absolute.

HTML and CSS as below.
The m. classes are for mobile, and it is that where the issue is.

Syntax: [ Download ] [ Hide ]
<style>

.loadout
{
position: relative;
text-align: center;
}

.loadout a
{
text-decoration: none;
color: #000000;
}

.loadout img
{
width: 100%;
}

.loadout-helmets
{
display: none;
}

.loadout-goggles
{
display: none;
}

.loadout-masks
{
display: none;
}

.loadout-patches
{
display: none;
}

.loadout-gloves
{
display: none;
}

.loadout-vests
{
display: none;
}


.loadout-pouches
{
display: none;
}

.loadout-pistols
{
display: none;
}

.loadout-holsters
{
display: none;
}

.loadout-clothing
{
display: none;
}

.loadout-scopes
{
display: none;
}

.loadout-accessories
{
display: none;
}

.loadout-guns
{
display: none;
}

.loadout-magazines
{
display: none;
}

.loadout-batteries
{
display: none;
}

.loadout-bipods
{
display: none;
}

.m-loadout-container
{
background: rgba(255, 255, 255, 0.7);
position: absolute;
top: 0;
width: 100%;
}

.m-loadout-boxes
{
border-bottom: 1px solid #ff5500;
padding: 8px;
text-align: center;
color: #000000;
text-transform: uppercase;
}

.loadout-bottom-text
{
background-color: #333333;
padding: 15px;
color: #ffffff;
text-align: center;
}
}
</style>
</div><div class='cat_head'><h1>airsoft loadout</h1></div><div class='mainbodybox'><br/>
<div class='loadout'>
<img src='/images/loadout.jpg' />
<div class='loadout-helmets'>tactical helmets</div>
<div class='loadout-goggles'>goggles and glasses</div>
<div class='loadout-masks'>airsoft masks</div>
<div class='loadout-patches'>patches</div>
<div class='loadout-gloves'>gloves</div>
<div class='loadout-vests'>tactical vests</div>
<div class='loadout-pouches'>pouches</div>
<div class='loadout-pistols'>pistols</div>
<div class='loadout-holsters'>holsters</div>
<div class='loadout-clothing'>clothing</div>
<div class='loadout-scopes'>scopes and sights</div>
<div class='loadout-accessories'>gun accessories</div>
<div class='loadout-guns'>guns</div>
<div class='loadout-magazines'>magazines</div>
<div class='loadout-batteries'>batteries</div>
<div class='loadout-bipods'>bipods</div>

<div class='m-loadout-container'>
<div class='m-loadout-boxes'>tactical helmets</div>
<div class='m-loadout-boxes'>goggles and glasses</div>
<div class='m-loadout-boxes'>airsoft masks</div>
<div class='m-loadout-boxes'>patches</div>
<div class='m-loadout-boxes'>gloves</div>
<div class='m-loadout-boxes'>tactical vests</div>
<div class='m-loadout-boxes'>pouches</div>
<div class='m-loadout-boxes'>pistols</div>
<div class='m-loadout-boxes'>holsters</div>
<div class='m-loadout-boxes'>clothing</div>
<div class='m-loadout-boxes'>scopes and sights</div>
<div class='m-loadout-boxes'>gun accessories</div>
<div class='m-loadout-boxes'>guns</div>
<div class='m-loadout-boxes'>magazines</div>
<div class='m-loadout-boxes'>batteries</div>
<div class='m-loadout-boxes'>bipods</div>
</div>
</div>
</div>

<div class='loadout-bottom-text'>
Text here to explain adsjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau </div><div class='mainbodybox'>

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Jun 05, 2015 7:07 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Absolute positioning removes elements from the normal flow, so this is expected behaviour. Any reason that image can't be a background image?

_________________


Top
 Profile  
 
PostPosted: Fri Jun 05, 2015 7:12 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Yes in the last 5 mins I thought about that.
On the desktop it cannot be like that. Just too awkward.
But on mobile, I can remove the image being shown, set it to a background image, and set thje containedr to be relative instead. Works a treat.

Sometimes just take a bit of lunch break to make your head thing in a different way!

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group