anchor tag not responding - css

My anchor tag is not responding (my mouse does not respond to the link as a link, for example) within the #contentAboutMe... through research I found that the z-index may affect this... However, I commented out anything with a z-index, and it doesn't seem to be the issue.
Any ideas? I would appreciate any help. (anchors are working else where in my mark-up)
#logo {
position: absolute;
top: 50px;
left: 20px;
/*z-index: 50;*/
}
#mainHeader > h1 {
font-size: 18px;
}
#wrapperAboutMe {
position: absolute;
width: 525px;
left: 400px;
top: 40px;
/*z-index: 2;*/
}
#placeHolder {
position: relative;
}
#topAboutMe {
background-image: url(../images/aboutTopBackground.png);
width: 525px;
height: 47px;
}
#contentAboutMe {
width: 525px;
background-image: url(../images/aboutMainBackground.png);
}
#contentAboutMe p {
padding: 0 40px 0 40px;
text-align: justify;
}
.firstCharacter {
display: block;
float: left;
color: #155763;
font-size: 330%;
line-height: .5em;
padding-top: 10px;
padding-right: 2px;
}
#bottomAboutMe {
background-image: url(../images/aboutBottomBackground.png);
width: 525px;
height: 71px;
}
#aboutImage {
width: 220px;
height: 45px;
background-image: url(../images/graphicAbout_03.png);
background-repeat: no-repeat;
float: left;
padding: 30px 0 0 0;
position: absolute;
top: -25px;
left: -100px;
}
#aboutImage span {
display: none;
}
#aboutBackground {
position: absolute;
background-image: url(../images/graphicAboutBackground.png);
width: 462px;
height: 125px;
left: -260px;
top: -110px;
z-index: 1;
}
HTML:
<article id="aboutMe">
<div id="wrapperAboutMe">
<div id="topAboutMe"> </div>
<!--End topAboutMe-->
<div id="contentAboutMe">
<p><span class="firstCharacter">M</span>y content</p>
View My Resume
</div>
<!--End contentAboutMe-->
<div id="bottomAboutMe"> </div>
<!--End bottomAboutMe-->
<div id="placeHolder">
<h1 id="aboutImage"><span>About Me</span></h1>
<div id="aboutBackground"></div>
<!--End aboutBackground-->
</div>
<!--End placeHolder-->
</div>
<!--End wrapperAboutMe-->
</article>
<!--End Article_aboutMe-->

Your div with the id of aboutBackground, is over the top of your link, so when you try to click, it's actually registering against that div, isntead of the link.
To fix this, change the #aboutBackground z-index to -1, so it will look like so:
#aboutBackground {
position: absolute;
background-image: url(../images/graphicAboutBackground.png);
width: 462px;
height: 125px;
left: -260px;
top: -110px;
z-index: -1; // this line edited
}
​

just get rid of this style
#placeHolder {
position: relative;
}
This brings the element on top of your link

Related

CSS red square on top

I use a zoom tools with javascript and I have an issue with the CSS part because of the lens.
I would like the red square (a video link) to always be on top by modifying only the CSS if possible. But I am not able to do it, the lens hide always the element no matter the z-index attribute I affect to each class...
Have you some idea?
You can see the code HTML and CSS on the following link :
http://jsfiddle.net/8scpq7vz/
.cloudzoom-blank {
z-index: 10;
width: 465px;
height: 465px;
}
.cloudzoom-lens {
border: 1px solid #000;
width: 200px;
height: 200px;
cursor: move;
z-index: 10;
}
.product-essential {
position: relative;
top: 0;
left: 0;
}
.product-essential-b1 {
float: left;
}
.product-img-box {
position: relative;
z-index: 3;
float: left;
width: 465px;
margin-left: 16px;
background: #FFF;
}
.product-img-box .product-image {
width: 465px;
height: 465px;
padding: 0px;
border: 2px solid #E8E8E8;
background: #FFF;
}
.product-img-box .product-image div {
position: relative;
}
.product-img-box .product-image img#image {
position: relative;
width: 465px;
height: 465px;
opacity: 0.85;
}
.product-img-box .video {
position: absolute;
left: 10px;
top: 10px;
z-index: 100;
cursor: pointer;
}
.v2 {
float: left;
width: 41px;
height: 41px;
text-indent: -9999px;
background: #F22;
}
<div class="product-essential">
<div class="product-essential-b1">
<div class="product-img-box">
<p class="video" id="video-btn">
<a target="_blank" class="v2">Video</a>
</p>
<div class="ldesktop">
<div id="product-media">
<div class="product-image">
<div>
<img src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg" id="image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cloudzoom-blank" style="position: absolute; top: 28px; left: 29px;">
<div class="cloudzoom-lens" style="overflow: hidden; position: absolute; top: 27px; left: 15px;">
<img style="position: absolute; left: -18px; top: -46px; max-width: none; width: 465px; height: 465px;" src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg">
</div>
</div>
Thank you.
Simply remove z-index from product-img-box to avoid creating a stacking context and be able to place the red square on the top:
.cloudzoom-blank {
z-index: 10;
width: 465px;
height: 465px;
}
.cloudzoom-lens {
border: 1px solid #000;
width: 200px;
height: 200px;
cursor: move;
z-index: 10;
}
.product-essential {
position: relative;
top: 0;
left: 0;
}
.product-essential-b1 {
float: left;
}
.product-img-box {
position: relative;
float: left;
width: 465px;
margin-left: 16px;
background: #FFF;
}
.product-img-box .product-image {
width: 465px;
height: 465px;
padding: 0px;
border: 2px solid #E8E8E8;
background: #FFF;
}
.product-img-box .product-image div {
position: relative;
}
.product-img-box .product-image img#image {
position: relative;
width: 465px;
height: 465px;
opacity: 0.85;
}
.product-img-box .video {
position: absolute;
left: 10px;
top: 10px;
z-index: 100;
cursor: pointer;
}
.v2 {
float: left;
width: 41px;
height: 41px;
text-indent: -9999px;
background: #F22;
}
<div class="product-essential">
<div class="product-essential-b1">
<div class="product-img-box">
<p class="video" id="video-btn">
<a target="_blank" class="v2">Video</a>
</p>
<div class="ldesktop">
<div id="product-media">
<div class="product-image">
<div>
<img src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg" id="image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cloudzoom-blank" style="position: absolute; top: 28px; left: 29px;">
<div class="cloudzoom-lens" style="overflow: hidden; position: absolute; top: 27px; left: 15px;">
<img style="position: absolute; left: -18px; top: -46px; max-width: none; width: 465px; height: 465px;" src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg">
</div>
</div>
Related:
Why can't an element with a z-index value cover its child?
I have position but z index is not working
Have you tried this adding position:fixed to you .v2 class? Like this:
.v2 {
float: left;
width: 41px;
height: 41px;
text-indent: -9999px;
background: #F22;
position: fixed;
}
Not sure if that's what you looking for, but seems to be.
The video element's parent element product-essential is having lower z-index (0 as default) to it's sibling cloudzoom-blank. So elements in cloudzoom-blank is displayed above any element inside product-essential. (also if both have equal z-index, then one specified last will be on top)
You can change the arrangement of the elements if it is possible

How can I make another skew container inside a skewed parent container using css

I am creating a simple layout using skews and my layout is like this:
And what I desired is something like this:
My problem is I can't make another div with skew inside the parent container.
Here's my CSS and HTML:
/*** VCONTENT ***/
#v-container {
position: relative;
background: #000;
}
#homepage-content-banner {
margin-top: 50px;
margin-bottom: 90px;
position: relative;
text-align: center;
z-index: 0;
background: #000;
}
#homepage-content-banner h1 {
font-family: times new roman;
color: #fff;
font-size: 80px;
margin-top: 35%;
}
#homepage-banner-images {
background-image: url('../images/top-banner-full.png');
background-repeat: no-repeat;
position: relative;
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
max-height: 100%;
background-size: 100%;
height: 950px;
min-height: 950px;
margin-bottom: 150px;
}
#scroll-bottom {
color: #fff;
margin-top: 16%;
font-family: blueHighway;
}
#scroll-bottom:hover {
cursor: pointer;
color: #FFF100;
}
#homepage-about-us {
height: 300px;
position: relative;
width: 100%;
padding-left: 0px;
padding-right: 0px;
background: #fff;
}
#homepage-about-us::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: 0;
bottom: 0;
transform-origin: left top;
transform: skewY(-10deg);
}
<div id="v-container">
<div class="container-fluid" id="homepage-content-banner">
<div class="row">
<div class="col-md-12" id="homepage-banner-images">
<h1 class="headline">EVERYTHING IN THE WORLD IS<br />UNDER THE SAME SKY</h1>
<div id="scroll-bottom">
<h4>SCROLL</h4>
<div class="fa fa-long-arrow-down fa-2x"></div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="homepage-about-us">
<div class="inner-line">
<div class="img"></div>
</div>
</div>
</div>
Can you help me with this?
You can create a second item with skewY with ::after:
/*** VCONTENT ***/
#v-container {
position: relative;
background: #000;
}
#homepage-content-banner {
margin-top: 50px;
margin-bottom: 90px;
position: relative;
text-align: center;
z-index: 0;
background: #000;
}
#homepage-content-banner h1 {
font-family: times new roman;
color: #fff;
font-size: 80px;
margin-top: 35%;
}
#homepage-banner-images {
background-image: url('../images/top-banner-full.png');
background-repeat: no-repeat;
position: relative;
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
max-height: 100%;
background-size: 100%;
height: 950px;
min-height: 950px;
margin-bottom: 150px;
}
#scroll-bottom {
color: #fff;
margin-top: 16%;
font-family: blueHighway;
}
#scroll-bottom:hover {
cursor: pointer;
color: #FFF100;
}
#homepage-about-us {
height: 300px;
position: relative;
width: 100%;
padding-left: 0px;
padding-right: 0px;
background: #fff;
}
#homepage-about-us::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: 0;
bottom: 0;
transform-origin: left top;
transform: skewY(-10deg);
}
#homepage-about-us::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: yellow;
z-index: 0;
bottom: 0;
transform-origin: left top;
transform: skewY(-10deg);
}
<div id="v-container">
<div class="container-fluid" id="homepage-content-banner">
<div class="row">
<div class="col-md-12" id="homepage-banner-images">
<h1 class="headline">EVERYTHING IN THE WORLD IS<br />UNDER THE SAME SKY</h1>
<div id="scroll-bottom">
<h4>SCROLL</h4>
<div class="fa fa-long-arrow-down fa-2x"></div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="homepage-about-us">
<div class="inner-line">
<div class="img"></div>
</div>
</div>
</div>

stick one image over another

I have a structure like below:
.a {
display: block;
height: auto;
left: 11px;
top: 89.3px;
width: auto;
position: absolute;
}
.a img {
display: block;
height: auto;
width: 100%;
}
.b1 {
position: absolute;
}
.prev {
background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
border: medium none !important;
height: 25px;
left: -807px;
overflow: hidden;
padding: 0;
position: absolute !important;
top: -220px;
width: 25px;
}
.prev span {
text-indent: -9999px;
}
<div class="a">
<div class="a1">
<img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
</div>
<div class="b">
<div class="b1">
<button class="prev">
<span>previous</span>
</button>
<button class="nxt">
<span>next</span>
</button>
</div>
</div>
</div>
Now the problem is, I need to fixed previous and next button images on my shasta-daisy-3.jpg image. For this I used position: absolute for my nxt and prev classes. But when I resized the window, my previous image continously dragged to its left until it disappears, I am unable to stick it to one place over an image
You need create wrapper with position: relative;.
The main problem is your CSSHere I've created a JSFiddle and updated your CSS slightly as:
.b {
position: absolute;
left: 0px;
right: 0px;
top: 50%;
margin: auto;
width: 100%;
}
.b1 > button {
background: rgba(0, 0, 0, 0) url(http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png) no-repeat scroll 0 0;
position: absolute;
top:0;
height:25px;
width:25px;
margin:0;
padding:0;
text-indent: -999px;
overflow: hidden;
border: none;
display: inline-block;
}
.prev {
left: 0;
}
.nxt {
right: 0;
}
And this will give the output as:
In this position of next and prev buttons won't change if you resize the browser window. Hope it will work for you.
Your problem is that you have not given top and left values to position .b, so it doesn't really get absolutly positioned just by saying: position: absolute. You have to add: top:0; left:0 (or right, bottom) so it gets just over your image, like this:
.a {
display: block;
height: auto;
left: 11px;
top: 89.3px;
width: auto;
position: absolute;
}
.a img {
display: block;
height: auto;
width: 100%;
}
.b1 {
position: absolute;
top: 0;
left: 0;
}
.prev {
background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
border: medium none !important;
height: 25px;
left: ;
overflow: hidden;
padding: 0;
position: absolute !important;
top: 0;
width: 25px;
}
.prev span {
text-indent: -9999px;
}
<div class="a">
<div class="a1">
<img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
</div>
<div class="b">
<div class="b1">
<button class="prev">
<span>previous</span>
</button>
<button class="nxt">
<span>next</span>
</button>
</div>
</div>
</div>

Sticky footer at the bottom

I'm having trouble with my footer, it's not being pushed by the content, I already tried to substitute absolute to relative, but with no success, I'm trying to use bottom:0; but it's not working either, here is my css code:
html, body {
width:100%;
min-height:100%;
background-image: url(../img/bg.png);
background-repeat: repeat;
}
* {
margin: 0px;
padding: 0px;
}
a, img {
border:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
position:relative;
}
#foot {
width: 100%;
height:200px
position:absolute;
bottom:0;
background-image:url(../img/foot.png);
background-repeat:no-repeat;
}
#banner {
min-height: 100%;
margin:0;
padding:0;
position: relative;
top: 24px;
background-image: url(../img/banner2.png);
background-repeat:no-repeat;
width:100%;
height:173px;
}
#navigation {
height: 60px;
position: relative;
left: auto;
width: 100%;
top: 23px;
margin: 0px;
padding: 0px;
z-index:1;
border: none;
}
#categoria {
position: absolute;
width: 710px;
height: 240px;
z-index: 0;
left: -29px;
top:30px;
padding: 0px;
z-index:1;
}
.othergames{
position: absolute;
top: -13px;
width: 740px;
height: 251px;
background-image: url(../img/otherg.png);
background-repeat: no-repeat;
z-index:1;
left: -43px;
}
.othergames-back{
position: absolute;
top: -11px;
width: 730px;
height: 247px;
background-color:#FFF;
left: -37px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#texto{
height: 10px;
text-align:center;
width: 50px;
margin: 0px;
padding: 0px;
left: 34px;
top: 243px;
}
#apDiv1 {
position: absolute;
left: -3px;
top: 3px;
width: 209px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}
#like {
position: relative;
left: -3px;
top: 550px;
width: 215px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}
#apDiv2 {
position: absolute;
left: 220px;
top: 60px;
width: 862px;
height: 482px;
z-index: 0;
padding: 0px;
}
#apDiv4 {
margin: 0;
padding: 0;
position: absolute;
left: -6px;
top: 90px;
width: 201px;
height: 499px;
z-index: 1;
}
And the html code:
<div id="wrapper">
<div id="banner"></div>
<div id="navigation">
<div id="apDiv4">
</div>
<div id="fb-root"></div>
<div id="like">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Legend-of-Games/476628629090111" data-width="215" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>
<div id="apDiv2">
<script>
(function($){
$(window).load(function(){
$("#apDiv2").mCustomScrollbar();
});
})(jQuery);
</script>
<div align="center" id="thumb">
<div id="screen_game">
<img style="border-radius:5px;border:thin solid #FFF;" src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>" width="160" height="130"/>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>
</div>
<div id="apDiv1"><img src="../img/lateralb2.png" width="209" height="592"/>
</div>
</div>
</div>
<footer >
<div id="foot"></div>
</footer>
</body>
Since you had some background images and content that weren't available, I generated and inserted some into a <section> with an ID of container. As you can see in the fiddle, I have just set up the footer as a fixed position block element at bottom: 0;, which means that it will always be at the bottom.
CSS:
footer {
width: 100%;
position: fixed;
bottom: 0;
background: green;
}
Have fun with the rest of the page!
I think you need to change your position to fixed.
#foot {
width: 100%;
height:200px
position:fixed;
bottom:0;
background-image:url(../img/foot.png);
background-repeat:no-repeat;
}
I can't test your code but I was able to get a sticky footer using a similar styling.

CSS need div to extend it's containers width

This is my current HTML structure. The footer div is sitting alone in the BODY.
<div id="footer">
<div class="container">
<div id="footer-bg">
<div class="footer1">
<p class="p1">asd</p>
<p class="p2">asd</p>
</div>
<div class="footer2">
<p class="p1">asd</p>
<p class="p2">asd</p>
<p class="p3">asd</p>
</div>
<div class="footer3">
<p class="p1">asd</p>
</div>
</div>
</div>
</div>
Here's the CSS for it:
#footer
{
position: relative;
background: url('../footer-bg-repeat.jpg') repeat-x;
height: 307px;
}
#footer #footer-bg
{
background: url('../footer.jpg') no-repeat top left;
height: 528px;
width: 1587px;
position: absolute;
left: -380px;
top: -221px;
}
#footer .footer1
{
position: absolute;
top: 137px;
}
#footer .footer1 .p1
{
position: absolute;
left: 500px;
background: #dcdcdc;
height: 23px;
width: 80px;
text-align: center;
line-height: 25px;
font-weight: bold;
}
#footer .footer1 .p2
{
position: absolute;
left: 1000px;
top: -20px;
background: url() no-repeat top right;
height: 40px;
width: 249px;
text-indent: -9999px;
z-index: 6;
}
#footer .footer2
{
position: absolute;
top: 159px;
height: 23px;
width: 100%;
background: #000;
}
#footer .footer2 p
{
display: inline;
line-height: 25px;
color: #636466;
height: 23px;
}
#footer .footer2 .p1
{
position: absolute;
left: 500px;
background: url() no-repeat center right;
width: 175px;
}
#footer .footer2 .p2
{
position: absolute;
left: 700px;
background: #dcdcdc url() no-repeat 60px 8px;
width: 75px;
padding-left: 15px;
}
#footer .footer2 .p3
{
position: absolute;
left: 800px;
}
#footer .footer3
{
position: absolute;
top: 190px;
}
#footer .footer3 .p1
{
position: absolute;
left: 500px;
width: 1000px;
}
I'm trying to get .footer2 and .footer3 to extend the width of the container allowing me to have a background colour set for what ever width the screen may be.
Setting 100% width just gets it to the size of the container - As I'd expect. How can I, though, get it to the width of the page?
Try setting both left and right property to 0;
you didn't define question well.
if you want to set it in middle set margins
margin:0 10px;
width:%your pages width%;
if you mean something else download Firebug plugin for Firefox and inspect a page's footer that did what you want to do and take a look at structure and css rules. it always works

Resources