Could you please advise on how to create a navigation menu like this one at the bottom?
https://m1.behance.net/rendition/modules/30754283/disp/e05f3faf8755b4c1892a7e9c66de7627.png
I already have the footer div set, I only need the menu itself. I tried and experimeneted but couldn't get it to display exactly as I want. The images would have to be with CSS background so that I can have the image change when the "tab" is active.
Thank you very much in advance!
I don't really see that it is in any way necessary to do this with background-image attribute.
You could just use a normal <img src="pics/my-img.png" /> in the HTML structure of this navigation bar. Setting the alignment to simply nothing on the image will in most cases drop the text on the same container below the picture, but in case of an exception:
#myNavigation img {
display: block;
padding-bottom: 4px;
}
This should help you with what I understood of your question, that you're trying to create a navigation menu with images and text.
There's also a quite simple and nice hover effect possibilities for this, for e.g:
#myNavigation img {
opacity: 0.6;
}
#myNavigation img:hover {
opacity: 1;
}
Good luck!
Related
I was wondering if it is possible to : when hovering over a toggle menu (has ID 9) in Wordpress to display an hidden image (Lets say has ID 10). It looks like this now https://wortelboeryachting.com/wp-content/uploads/2020/04/Screenshot-2020-04-29-at-20.29.36.png. I want to be able to hover over the toggle menu on the left and make an image, currently hidden behind image on the right, to appear. If possible in CSS addition code because I am not very familiar with JavaScript.
Thanks for the help!
If you only want to use CSS, you can put the images into pseudo-elements of the menu items. Only to show you the concept:
.myMenuItems::after {
width: 100px;
height: 100px;
background-image: url('yourimagepath');
background-size: cover;
opacity: 0;
}
#myMenuItem:hover::after {
opacity: 1;
}
Of course you can use a class and it may better to position the image absolute.
If you want to overlay as you said, you can make this happen with the css property "z-index", instead of "opacity".
I want to create a horizontal nav that sometimes has multiline link text (not always; it's dynamically generated), and that has all the text vertically centered.
The caveat is that I'd also like to make the nav so that the a elements fill up the entirety of their containing element so that the clickable and hoverable area is much bigger for each link.
Is this possible with just CSS? Thank you.
full disclosure: I don't typically use this technique, but if you think that sometimes links will wrap, this is a pretty easy solution. Also, this does not work in ie7 and below
Every frontend developer will tell you that using tables for non-tabular data is a no-no, but using table styles is going to help you here.
If you apply display:table; to your containing div/ul/whatever, and display:table-cell to each item in your navigation, you will then be able to use properties like vertical-align:middle;.
Do you know how many elements you will have in your navigation? If not, create a few css properties that look like something like this:
.container.items-2 .item { width 50%; }
.container.items-3 .item { width 33%; }
.container.items-4 .item { width 25%; }
.container.items-5 .item { width 20%; }
/* ...etc... */
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I have a background image associated with a table column, in the centre of that table column i have a dynamic link, example below .
http://www.qrrw.net/v
As you can see the writing is a php link, Is there anyway to make the whole area of the background image clickable rather than just the text?
Any ideas or suggestions would be appreciated.
Thanks
Just add a display: block; on your <a>s.
By the way, those <div> with a center attribute (brrrrh) invalid your code. Consider remove them and, to not loose your layout, add this rule on your <a>s.
.manu1 a {
display: block;
text-align: center;
line-height: 109px;
}
In addition to the display:block; it might be helpful to put a little padding:10px; on that <a> as well. Adjust the pixel amount as needed to cover the majority of the background image
I have a background image pulling in but it is taking the height of the text not the image, I will eventually do a text-indent: -99999px but I have tried every CSS property to get the whole image to appear. Can anyone help with this, my website is: http://yesiamshow.biz/ it is the buttons under the slideshow, you can see I have the image for previous pulling but it does not show the whole height. All my CSS properties have a height of 60px and nothing is happening.
The button is actually the right height, but your .window class is cutting off it off. Looks like you can change it to 410px and it will fix:
.window {
height:410px;
}
You should also give the button a display:block or inline-block since you're giving it a width and height.
I took a quick look at your CSS and it seems that you are wrapping your link with a span element. You can still do that, however you need to make sure that you are applying all of your styling to the links.
Example. If your HTML was something like.
<a span="prev_btn">Previous</span>
You would have to style like so.
span.prev_btn a { }
And it should look something similar to the following.
span.prev_btn a {
background: [your url];
display: block;
height: [height];
width: [width];
text-indent: -9999px;
}
Hope that helped.