Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am making a website and though of a cool navigation bar that is suppose to look like this:
Edit - accidentaly erased the all the css code, only had the nav fixed at the bottom - Edit
I managed to make it look like this: http://pokemasters.freeiz.com/bare.html
I just ran out of ideas.... i got the images that i made seperatly, a navbar:
& buttons:
I'm looking for a full width navbar that adjusts itself to different screens, is located at the bottom of the screen, red buttons while active or hovered and white buttons while normal, with that pokeball line right on top of it and overlaying the buttons
Can someone point me in the right direction please??
what you want to do? it is not clear. you doesn't need to use image in #navigation li a.profile instead of it you can use background colour.
#navigation li a.profile {
width: 240px;
background-color:#ffffff;
text-decoration: none;
}
#navigation li a.profile:hover {
background-color:red;
background-position: -240px;
text-decoration: none;
}
#navigation li a.profile:current {
background-color:#cccccc;
background-position: -240px;
background-repeat: no-repeat;
text-decoration: none;
}
or if you want to full width navigation bar.
#navigation ul {
list-style: none;
text-align: center;
width:100%;
}
#navigation li {
display: inline;
width:16.6%;
border-right:1px solid #ccc;
}
#navigation li:last-child{
border-right:none;
}
if you want the 'ball' image above the navigation bar. please use a <span> just above of the #navigation 'div' and set its background image 'ball' image.
property of <span class=ball_Img>
.ball_Img{
background:url('whatever');
position:relative;
z-index:5;
}
#navigation{
.......//property previous define please write here.
position:relative;
top:-50px; // you can change according to your situation.
}
So you want to have a full width nav bar? with elements stretching auto? or? And why are you using images to have a color? you can just use background: red; on hover or active, and background: white on normal states
Related
I am making a navigation list, and I was wondering if there is a way to use the background property in CSS to place an image on both sides of the link when the user hovers over it. Here is what I currently have:
nav.vertical li a:hover {
background: #D4CD00 url(wnaderknight.png) right/25px 25px no-repeat;
color: black;
}
You may use multiple backgrounds or pseudos
.bg {
display:inline-block;
padding:30px;
background:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) right/25px 25px no-repeat,url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) left/25px 25px no-repeat
}
.psdo:before,
.psdo:after {
vertical-align:middle;
display:inline-block;
content:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png)
}
link with bg image on both sides <br/>
link with bg image on both sides
Best way to understand what I want is to watch this short six second video. Please ignore the font change in the video. http://www.youtube.com/watch?v=7KM78DKoVZU
What's the best way to go about making that rounded rectangle to show up behind the navigation link on hover? On hover, I could have the navigation button's background change to a background image with a rounded rectangle in the image, but before I go about that, I want to ensure there's no cleaner or easier way to go about this.
Thoughts? Thanks!
The rectangle isn't really showing up behind the nav link. What's really happening is the nav link's style is changing during the hover state.
#menu {
list-style: none;
display: inline-block;
background: #eee;
margin: 0;
padding: 0;
}
#menu li {
float: left;
padding: 10px 5px;
margin: 4px;
color: #222;
cursor: pointer;
}
#menu li:hover {
background: #ccc;
border-radius:6px;
}
Check out the jsFiddle for a live example.
http://jsfiddle.net/kGa67/
EDIT- I suppose the cleanest way is style both the ul and li as inline-block instead of floating the the li like I did. Use ems if you have a responsive design but beware that it doesn't always scale perfectly on very small and very large widths.
Check out this fiddle: http://jsfiddle.net/8PqkH/
It's easy to do.
nav a:hover{
background: #902;
color: #fff;
border-radius: .5em;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have this problem with my drop down menu I cant seem to figure out how to move the drop down menu that shows when you hover above the "support" button, I would like to move it little bit to the left,the other half is sticking out of the screen and can't be seen.
here is the link to it.
[jsfiddle] http://jsfiddle.net/3ZzVT/1/
All replies and help will be very much appreciated!
http://jsfiddle.net/3ZzVT/3/
Adding a right: 0px to the .head_menu ul selector makes the element position itself better underneath the nav item.
Like this .head_menu ul give position:relative; and right:0;
DEMO
CSS
.head_menu ul
{
padding:0px;
margin:0;
list-style:none;
position:relative;
right:0;
}
.head_menu ul li ul
{
display: none;
width: auto;
position:absolute;
top:30px;
padding:0px;
margin:0px;
right: -15px; // I added this
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have this menu:
home
Pictures
Picture 1
Picture 2
Sounds
Videos
I want Picture 1 and Picture 2 to be hidden except when I move the mouse over "Pictures"
You would have to use javascript here, CSS itself doesn't have any logic.
Set display property of picture 1 and picture 2 to none, then set it to block with javascript when mouse is over Picture.
With PrototypeJS you'd do something like
$("pictures").observe("mouseover", function(){ $("Picture 1").setStyle({display: "block"}) } )
$("pictures").observe("mouseout", function(){ $("Picture 1").setStyle({display: "none"}) } )
Because there's a distinct lack of information in your question, and despite my own comment to that question, I'm going to make a guess at your HTML and assume you're using a ul element to contain your list:
<ul>
<li>home</li>
<li>Pictures
<ul>
<li>Picture 1</li>
<li>Picture 2</li>
</ul></li>
<li>Sounds</li>
<li>Videos</li>
</ul>
If that's the case, then I'd suggest the following CSS:
ul ul {
display: none;
}
ul li:hover ul {
display: block;
}
JS Fiddle demo.
Given that I suspect you're trying to make some kind of menu structure (again, a wild guess based on the lack of information), I'm updating the above CSS to demonstrate a fly-out style CSS menu:
ul {
/* adjust to taste */
width: 6em;
}
ul ul {
display: none;
/* to more easily show the connection between the parent li and child ul
adjust to taste, of course */
background-color: inherit;
}
li {
/* to position the child ul element relative to its parent */
position: relative;
}
li:hover {
/* just to identify which li element is currently hovered */
background-color: #ffa;
}
li li:hover,
li:hover li:hover {
/* so the hovered li is differentiated from its parent ul's background
and the background of its grandparent li. Adjust to taste */
background-color: #dda;
}
ul li:hover ul {
/* so that it's visible on the page */
display: block;
position: absolute;
/* to be level with its parents top-edge */
top: 0;
/* so that the li appears on the right of the parent li */
left: 100%;
}
JS Fiddle demo.
I am working on this : Menu List
What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.
So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.
Has anyone any ideas on the best way to approach this?
Thanks in advance.
Give image inside anchor. Write like this:
.menu-header ul li a{
display:block;
padding: 70px 55px;
text-indent:-9999px;
}
#access .menu-header ul li#menu-item-26 a{
background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;
}
#access .menu-header ul li#menu-item-24 a{
background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}
#access .menu-header ul li#menu-item-23 a{
background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}
Check this http://jsfiddle.net/FN6f5/2/
I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.
http://jsfiddle.net/FN6f5/3/