Any ideas how to get the social icons clickable? I know if I remove the main #artistheader the icons become clickable, however that #artistheader has the header BG image.
<!--Begin Artist Header-->
<div id="artistheader">
<div id="artistimage"><img src="../images/ykmfull.png" alt="YKM"></div>
<div id="artistname"><center><img src="../images/ykmName.png" alt="YKM"></center></div>
<div id="artistSocial"><center>
<img src="../images/fb.png" alt="fb" width="50" border="0"><img src="../images/twitter.png" alt="tw" width="50"><img src="../images/insta.png" alt="insta" width="50"></center></div>
<!--artist header end--></div>
I added the relative positioning and z-indexes trying to find a solution weren't originally there.
#artistheader {
position: relative;
z-index: -45;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#artistimage {
clear: both;
float: left;
margin-left: 8.4249%;
width: 24.1758%;
display: block;
}
#artistname {
clear: none;
float: left;
margin-left: 9.5238%;
width: 41.0256%;
display: block;
margin-top: 7%;
}
#artistSocial {
position: relative;
z-index: 5000;
clear: none;
float: left;
margin-left: 9.5238%;
width: 41.0256%;
display: block;
}
#fb {
position: relative;
z-index: 5000;
clear: none;
float: left;
margin-left: 26.3736%;
width: 32.6007%;
display: block;
}
#tw {
clear: none;
float: left;
margin-left: 1.0989%;
width: 15.7509%;
display: block;
}
#insta {
clear: none;
float: left;
margin-left: 1.0989%;
width: 15.7509%;
display: block;
}
Double instances of #artistheader existed. 1 in the source code on the page and 1 in the CSS. Upon deleting the rule on the CSS and leaving the one in the source code the links worked again. Not sure where the second instance came (one in source code) and I'm it didn't matter which I left but because I have blur effects on the one in source code I kept it. I assume both were conflicting with each other and then just "froze" that section.
Related
I tried the solutions here and here with no luck. My css file as it is:
.JFK {
position: relative;
left: 250px;
height: 200px;
width: 200px;
bottom: -45px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
}
.JFK a p{
position: relative;
top: -130px;
display: none;
}
.JFK a:hover p{
display: block;
}
.JFK:hover{
opacity: 0.6;
display: block;
}
My html:
<div class = "JFK">
<p>JFK</p>
<p>to</p>
<p>from</p>
</div>
I'm trying to have links appear at the bottom of the image upon hover. The solutions in previous posts have not worked. With my current setup, I cannot see "TO" or "FROM" at all when I load the page.
The hover should be on the .JFK not the .JFK a When you hover over the .JFK it should make the .JFK a p visible.
.JFK:hover a p {
display: block;
}
Here is a link to a jsfiddle with the change: https://jsfiddle.net/efv8ch70/
Hope this helps
.JFK {
position: relative;
top: 50px;
left: 250px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
}
.JFK,
.JFK > p {
height: 200px;
width: 200px;
}
.JFK > p {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.link-wrapper {
display: none;
}
.JFK:hover .link-wrapper {
display: block;
}
<div class="JFK">
<p>JFK</p>
<div class="link-wrapper">
<span>to</span>
<span>from</span>
</div>
</div>
There are lots of ways to solve this problem. This solution is just an example. The actual paragraph has the same hight as the .JFK so it pushes the .link-wrapper down to exactly the spot you want in the normal flow. Hope this helps or gives you some ideas.
Honestly - CSS and Divs aint the thing i'm most familiar with. However, I thought that I had managed to make the template for my later design, but it turns out that everything tends to move a bit around for me..
In Chrome, things seems to work at first, but after refreshing a few times, the text "your position on page" jumps down to the next line. In firefox, things are just at the wrong places to begin with.
If possibly, I would also like a nod on, how to get a padding/margin between the position text and again between each line. When adding it now, it just moves everything to completely wrong places.
Demo: http://cityroast.dk
CSS:
section {
width: 100%;
height: 100%;
background: #e8ebef;
padding: 5px;
}
div#catcontainer {
width: 10%;
height: 100%;
float: left;
}
div#categories {
width: 100%;
height: 100%;
float: left;
}
div#ads {
width: 100%;
height: 100%
float: left;
display: box;
}
div#ads span {
font-family: Verdana;
font-size: 12;
text-align: left;
}
div#one {
width: 10%;
height: 80px;
float: left;
}
div#two {
width: 70%;
height: 80px;
background: aqua;
float: left;
text-align: center;
}
div#three {
width: 10%;
height: 80px;
background: red;
float: left;
text-align: right;
line-height: 80px;
}
div a {
text-decoration: none;
color: #000000;
font-family: Verdana;
font-size: 12px;
}
HTML:
<section>
<div id="catcontainer">
<div id="categories">
<ul>
<b>A menu</b>
<li>Something</li>
<li>Something2</li>
<li>Something3</li>
</ul>
</div>
</div>
<div id="ads">
<span>Your position on page</span>
<div id="one">A picture</div>
<div id="two"><b>Title</b></div>
<div id="three"><b>Details</b></div>
</div>
</section>
Obviously, the latter part of the code is echoed 5 times at the moment, to get the 5 lines.
Thanks already!
i am working on this grid gallery where List items are set to width 20% so that they can be like 5 in one row using float left.
Now i am using a div with class overlay so that hen someone hovers over Li the overlayis shown.
the problem is
when i give overlay 100% width and height 100% it covers the whole screen and not just that Li.
here is my HTML code
<ul id="thumbsList">
<li>
<div class="overlay">Hello</div>
</li>
<li><div class="overlay">Hello2</div></li>
</ul>
And here is my Css
#thumbsList {
margin: 0px;
padding: 0px;
}
#thumbsList li {
list-style: none;
float: left;
height: 100px;
width: 20%;
background-color: gainsboro;
}
.overlay {
text-align: center;
z-index: 2;
height: 100%;
width: 100%;
position: absolute;
background-color: red;
}
Please help me fix the problem.
thanks.
You need to add position: relative to the li item, the absolute positioning in the overlay wil take this as reference.
#thumbsList li {
position: relative;
list-style: none;
float: left;
height: 100px;
width: 20%;
background-color: gainsboro;
}
Also you need to add a display: none to the overlay and a hover on li that change the display: none to display: block on the overlay, like this:
#thumbsList li:hover .overlay {
display: block;
}
Demo: http://jsfiddle.net/HPJ8v/
I'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.
Issue:
The dots are supposed to be over the phone.
My HTML:
<div class="content-top"><div class="cwrap">
<motto>Become Famous On Vine.</motto>
<img id="phone" src="./images/phone.png">
<img id="dots" src="./images/dots.png">
</div></div>
My CSS:
.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
#phone {
z-index: 999;
}
#dots {
z-index: 1000;
}
.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}
Try this. position: absolute;, top: 0;, left: 0;
The the red div is semi-transparent to reveal the blue div below.
Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.
Link to example: jsFiddle
Use on #phone and #dots elements these css attributes: position, z-index, top, and left.
Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.
I'm having a bit of trouble keeping the topnav on my Web site (if you'll see the link below, the "Home," "Archive," and "About" buttons) aligned with where I'd like to keep it on browser resizing, which is at the right edge of my banner. Originally, I had four buttons and managed to keep everything in order, but things got a little wonky after I dropped one button.
Thanks for all your help.
You can fix it - get your nav to be aligned to the right side, by applying the following changes to your website:
#container-inner {
margin-left: auto;
margin-right: auto;
width: 940px;
}
.topnav {
/*Reset things that are unnecessary*/
margin-left: 0;
margin-right: 0;
position: static;
/*Set things to fix the problem*/
margin-bottom: 20px; /*This accounts for the 20px space between this and the content.*/
float: right;
}
#content {
clear: both;
}
if you put the topnav inside the banner element, and use this css:
.banner {
position: relative;
display: block;
overflow: visible;
margin-left: auto;
margin-right: auto;
width: 930px;
height: 349px;
margin-bottom: 32px;
}
.topnav {
position: relative;
display: block;
top:100%;
width: 930px;
height: 32px;
}
.topnav a{
float: right;
}
The topnav will be constant margined.