Need HTML/CSS help with my Text/Icons - GoFuckYourself.com

Tittytweaker · 01-04-2014, 02:58 PM

Hi Guys.

I'm trying to figure out how to get the text on my Model pages to lay -over- the image itself. I plan on getting rid of the current name background and just having the name sit over the image towards the bottom, with a translucent black background.

Something like this:

I've been trying to use the firefox "inspect element" feature to mess with the code and work it out but so far haven't had any luck.

Thanks for your time,
~TT

myleene · 01-04-2014, 03:30 PM

Something like this?

http://stackoverflow.com/questions/8...n-image-in-css

flowing · 01-04-2014, 03:35 PM

Try this:

Code:

.modelicon li {
    background: none;
    position: relative;
    height: 244px;
}
.modelicon .spacer {
    display: none;
}
.modelicon a:first-of-type {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    padding: 2px;
    text-align: center;
}

Tittytweaker · 01-04-2014, 04:49 PM

Thanks, Flowing.

It appears that it's also affecting my pagination, though, and my drop down menus are now hidden behind the icons when they roll out. Can you explain how to fix those?

flowing · 01-04-2014, 05:13 PM

You need to play with the z-index to bring elements back/fwd, when something like that happens. The submenu, for example:

Code:

.navigation ul.menu li ul.sub-menu {
  z-index: 10;
}

The pagination issue: you need to be more specific, if you have other anchors on the same container .modelicon

Change
.modelicon a:first-of-type
to
.modelicon > ul a:first-of-type

Tittytweaker · 01-04-2014, 05:46 PM

Thank you very much for the help. Had a feeling it had something to do with the specificity since I seem to run into similar problems every once in a while.

Thanks again for helping a newbie out :D

~TT

flowing · 01-04-2014, 06:08 PM

01-04-2014, 02:58 PM	#1
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Need HTML/CSS help with my Text/Icons Hi Guys. I'm trying to figure out how to get the text on my Model pages to lay -over- the image itself. I plan on getting rid of the current name background and just having the name sit over the image towards the bottom, with a translucent black background. Something like this: I've been trying to use the firefox "inspect element" feature to mess with the code and work it out but so far haven't had any luck. Thanks for your time, ~TT __________________ www.tittytweaker.com Last edited by Tittytweaker; 01-04-2014 at 03:00 PM..

01-04-2014, 04:49 PM	#4
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Thanks, Flowing. It appears that it's also affecting my pagination, though, and my drop down menus are now hidden behind the icons when they roll out. Can you explain how to fix those? __________________ www.tittytweaker.com

01-04-2014, 05:13 PM	#5
flowing Registered User Industry Role: Join Date: Dec 2013 Posts: 12	You need to play with the z-index to bring elements back/fwd, when something like that happens. The submenu, for example: Code: .navigation ul.menu li ul.sub-menu { z-index: 10; } The pagination issue: you need to be more specific, if you have other anchors on the same container .modelicon Change .modelicon a:first-of-type to .modelicon > ul a:first-of-type

01-04-2014, 05:46 PM	#6
Tittytweaker Confirmed User Industry Role: Join Date: Dec 2012 Posts: 184	Thank you very much for the help. Had a feeling it had something to do with the specificity since I seem to run into similar problems every once in a while. Thanks again for helping a newbie out :D ~TT __________________ www.tittytweaker.com

01-04-2014, 03:30 PM	#2
myleene Confirmed User Industry Role: Join Date: Oct 2013 Location: Canada Posts: 895	Something like this? http://stackoverflow.com/questions/8...n-image-in-css

01-04-2014, 06:08 PM	#7
flowing Registered User Industry Role: Join Date: Dec 2013 Posts: 12