Must Read: New Unified System is officially live Must Read     |   6 Templates Updated (27 April 2018) Read more

Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

div/content over background image

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hello
I have to place content with background-color over a background image.
I tried with a div



<div style="position: absolute; left: 0px; top: 40px; width: 500px; height: 510px; background-color:#ffffff; padding: 10px;">
<p>content</p>
</div>

iyengar-yoga

but the position:absolute isn't responsive.


2. Is there a better solution, perhaps with modules and z-index to place content responsive over a background.

regards
marc
  • marc's Avatar
  • marc
  • 12 Month Developer
  • 101 posts
  • 3 Thanks
  • Karma: 0
Last Edit: 8 months 3 weeks ago by marc.
The administrator has disabled public write access.
Hi Marc,

You could try adding the image to the row via the template settings

In the article use the shortcode syntax to create 2x columns and a class to the left with the background of white

I'm not quite sure what you mean by the image not being responsive as it does appear to be responsive when I view it
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The columns will drop below each other as the screen width decreases so you may want to try the text on the right to see how that looks

If the image doesn't work via the template settings you may want to consider using media queries for different background images
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The images works responsive and for the for divs with background-color and text i gave % for width. It works now. But i have another question:


In chrome and firefox theres still a gap at the right site of the menu. How can justify the .zen-menu-horizontal ul

link

menugap.png


display: flex; or something?

regards marc
  • marc's Avatar
  • marc
  • 12 Month Developer
  • 101 posts
  • 3 Thanks
  • Karma: 0
The administrator has disabled public write access.
hmm not 100% sure how best to handle this

You might need js

You could try something like

ul.first-level li:last-child {margin-right:0;}
ul.first-level li:last-child a {padding:0 2em}

and see how this looks

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
thanks a lot

a litte bit better, but is there a way to align the menus without padding?

regards

marc
  • marc's Avatar
  • marc
  • 12 Month Developer
  • 101 posts
  • 3 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hello Paul

Just one more question (for now..;-))

ul.first-level li:last-child {margin-right:0;!important!}
ul.first-level li:last-child a {padding:0 1.9em;}

works for chrome and firefox bot safari ignores it

webkit-..?

thx marc
  • marc's Avatar
  • marc
  • 12 Month Developer
  • 101 posts
  • 3 Thanks
  • Karma: 0
Last Edit: 8 months 2 weeks ago by marc.
The administrator has disabled public write access.
And how can i adjust the different line-height webkit to moz/chrome:

link

thx for help
  • marc's Avatar
  • marc
  • 12 Month Developer
  • 101 posts
  • 3 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hi Marc,

It is a tricky one to answer as I would do this a different way

With safari are you referring to safari on a mac?
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
There is quite often some minor differences in font rendering unfortunately between browsers

I'd try removing the br tags and using p tags and style them with margin as a test

I'd also test by removing the links to see that is a factor
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
yes i meant safari on mac.
The problem is the letter-spacing in safari
Safari renders it wider than other browsers.
I could fix it for aktuell-workshops wirh some additional line breaks.
But the mainmenu width is still larger in safari as in chrome/ firefox.

menuwidth.png


How can i add a css roule for less letter-spacing in safari?
  • marc's Avatar
  • marc
  • 12 Month Developer
  • 101 posts
  • 3 Thanks
  • Karma: 0
The administrator has disabled public write access.
Does it render ok in ios?

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers