Hi everyone, I’m currently working on my tribute page but I’m a bit stuck at the moment.
-
Currently trying to add social media buttons to the right hand side of the page and have them hide until the user hovers over the icons. When I try applying the code for the buttons nothing shows/they don’t show properly
-
Also trying to apply three pictures in the background and have them lined up vertically.
https://codepen.io/Ferbet/pen/OZLYbJ -Editor View
https://codepen.io/Ferbet/full/OZLYbJ/ -Full Page
P.S. Haven’t been coding for long so I might not grasp some terminology. Any feedback to the two above issues would be gladly welcomed.
Hey There! I’m by no means a pro, but I’ll help you as much as I can
-
What code are you using for the social media buttons? I don’t see it in your pen.
-
I don’t believe you can achieve the effect you’re looking for with the css background-image property. Rather, you might try including the images directly in the html, and then using the css properties z-index, position, top, and left to get it to go to the right place behind your other content. Here’s an example, followed by a quick explanation
html: <img class="img1" src = "https://i.pinimg.com/736x/de/a5/f5/dea5f554f366e6d1aea175f9f7f463ce--female-photographers-private-investigator.jpg">
css: .img1 { top: 0px; /*Put this image 0px from the top of the site*/ left: 0px; /*Put this image 0px from the left of the site*/ position: absolute; /*Required to make the 'top' and 'left' properties work*/ z-index: -1; /*Make this element appear behind other */ }
This will work the same way for your other 2 images, except that you’ll change the ‘top’ and ‘left’ values to make them show up in the right place. I forked your pen and got this working for one image here: https://codepen.io/Gkleinerva/pen/mLaBpP
You should be able to modify it without too much work to make it work for all 3!
Good Luck!
@Gkleinereva your a legend, I appreciate the help. I’m going to reveiw the code you added and apply the other two images immediately. Also going to see what I can do about the buttons.
P.S. The buttons I tried using before are like these: https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
Hmmm…why don’t you try putting the buttons back into your pen and I’ll take a look?
Sure thing. Give me 10 mins
Can someone take a look at my code? There are two main things that I’m trying to do but not sure how to.
-
Trying to make the tabs responsive in the sense that a new page with different content appears when a different tab is selected but I don’t want the page to reload/refresh.
-
I want to get rid of the tail that’s attached to the navigation bar, also trying to bring the “Dynamic Studios” text on the same level as the tabs.
Here’s a link to my code: https://codepen.io/Ferbet/pen/OZLYbJ
P.S. Any and all feedback is welcomed.
Can someone take a look at my code? There are two main things that I’m trying to do but not sure how to.
Trying to make the tabs responsive in the sense that a new page with different content appears when a different tab is selected but I don’t want the page to reload/refresh.
I want to get rid of the tail that’s attached to the navigation bar, also trying to bring the “Dynamic Studios” text on the same level as the tabs.
Here’s a link to my code: https://codepen.io/Ferbet/pen/OZLYbJ 1
P.S. Any and all feedback is welcomed.