I am trying to make a simple rollover image for this page - www.radioandweb.com. The CSS Sprite code I've used works fine until I put it into the actual page structure. It then changes from being horizontal to being vertical. I am guessing this is because of interfering with other CSS properties.
Can someone suggest an easy fix for this? The image in question is in the top right corner (facebook, twitter, linkedin). Here is the CSS code:
ul#socialnavigation {
width:109px;
height:34px;
margin-left:auto;
margin-right:auto;
}
ul#socialnavigation li {
position:relative;
float:left;
text-indent:-9999px;
list-style-type:none;
}
ul#socialnavigation li a {
border:0;
display:block;
text-decoration:none;
background:transparent url('http://www.radioandweb.com/wp-content/themes/u-design/styles/style1/images/socialnetworkrollovers.png') no-repeat;
}
li#facebook a {
width:36px;
height:34px;
}
li#twitter a {
width:37px;
height:34px;
}
li#linkedin a {
width:36px;
height:34px;
}
li#facebook a:hover, li#facebook a:focus {
background-position:0px -34px;
}
li#twitter a:link, li#twitter a:visited {
background-position:-36px 0px;
}
li#twitter a:hover, li#twitter a:focus {
background-position:-36px -34px;
}
li#linkedin a:link, li#linkedin a:visited {
background-position: -73px 0px;
}
li#linkedin a:hover, li#linkedin a:focus {
background-position: -73px -34px;
}
And here is the HTML code:
<ul id="socialnavigation">
<li id="facebook">Facebook</li>
<li id="twitter">Twitter</li>
<li id="linkedin">Linked In</li></ul>
Thanks, any help is really appreciated!
In your text.css file you have
li {
margin-left: 30px;
}
which is conflicting with your sprite css. If you just update your "ul#socialnavigation li" to include something like "margin-left:auto" it should fix it.
Long live the okanagan! :)
The parent container isn't wide enough therefore your li's aren't floating left.
ul#socialnavigation{
width: 200px;
}
Related
I have looked all over for this and I can't seem to figure it out. I have a list of links that show an image when hovering over each one. I also have a default image in that same place holder when no links are being hovered over. How do I make that default image disappear when the links showing their images. I don't want to use backgrounds to cover the default image.
https://jsfiddle.net/76tnfh96/2/
HTML:
<div class="links">
<p class="default_img"><a><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></a></p>
<ul id="over" class="links">
<li><a>Link 1<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
<li><a>Link 2<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
<li><a>Link 3<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
</ul>
</div>
CSS:
<style type="text/css">
.links .default_img a {
top:100px;
float:right;
width:100px;
height:100px;
background:#000000;
position:absolute;
display:none;
}
/*Link position*/
ul.links {
list-style:none;
padding:0;
width:100px;
}
.links li {
width:200px;
color:#000000;
}
/*Hover Image Position/transition out*/
.links li a span, .links li a b {
position:absolute;
right:8px;
top:-999em;
display: none;
}
.links li a:hover span {
top:24px;
display: block;
}
</style>
With jquery:
$("li a").mouseenter(function() {
$(".default_img").eq(0).hide();
});
$("li a").mouseleave(function() {
$(".default_img").eq(0).show();
});
You can leave your whole Markup like what you already had, and add this JavaScript code to your page. You do not need to add any frameworks, and this runs on all browsers.
var links = document.querySelectorAll("#over a");
[].forEach.call(links, function(value) {
var default_image = document.querySelector(".links .default_img a");
value.addEventListener("mouseover", function(){
default_image.classList.add("hidden");
});
value.addEventListener("mouseleave", function(){
default_image.className = default_image.className.replace(/\hidden\b/,'');
});
});
Example
(The example might lag a bit because your CSS moves your images like wild)
Example 2
(Moved the images for better testing purposes)
Just changed a couple of things so you don't have to use jQuery/javascript. To be able to hover action another non dependent element you would need javascript as that would be called a disjointed rollover.
<ul id="over" class="links">
<li><a>Link 1<span><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></span></a></li>
<li><a>Link 2<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
<li><a>Link 3<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
<li><a>Link 4<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
</ul>
</div>
<style type="text/css">
/*Link position*/
ul.links {
list-style:none;
padding:0;
width:100px;
}
.links li {
width:200px;
color:#000000;
}
/*Hover Image Position/transition out*/
.links li a span {
position:absolute;
left:200px;
display: none;
}
.links li a span img {
width: 100px; height:100px;
}
.links li a:hover span {
top:24px;
display: block;
background: none;
}
.links li:first-of-type a span, .links li:first-of-type a:hover span{
display:block;
background: url(http://thedeskdoctors.com/Images/LifePreserver.jpg) no-repeat 0 0;
}
</style>
Changed image sizes just so it would fit in view while testing.
This is my full code: https://jsfiddle.net/dv6gxtoh/2/
I want the dropdown box to expand and be the full width of it's content (so it doesn't have to drop things down a line) but I also don't want it to stretch the main dropdown button to the same width.
The best example I can give is something a bit like this:
http://i.stack.imgur.com/w3ym8.png
This is the CSS I am using:
* {
margin: 0;
padding: 0;
}
.click-nav ul {
position:relative;
display: inline-block;
}
.click-nav ul li {
position: relative;
list-style:none;
cursor:pointer;
display:inline-block;
}
.click-nav ul li ul {
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker {
position:relative;
color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background:#196F9A;
}
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display:none;
}
.click-nav .no-js:hover ul {
display:block;
}
The closest I could get it to remove position:relative; from .click-nav ul which does the trick, except the dropdown menu doesn't sit under the button which opened it.
Any help would be appreciated.
Seems to me white-space : nowrap is what you need, i.e
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
white-space: nowrap;
}
forked fiddle -> http://jsfiddle.net/j5ckepbm/
Check the shared fiddle..
you need to make few changes to your css, like adding and width/min-width to your dropdown.
white-space:nowrap
Click to see the fiddle, commented lines are mine changes
You may need to add one more class with a fixed width to get it done.
.click-nav ul li ul li {
width: 150px;
}
Here is a fiddle
I have done this code for a bit of extra study but I can't seem to center the work and I'm not to sure if I need so much code feel like some should be removed, please help!
If some of the code needs to be taken away I understand just dont quite understand and I feel like everything I Read make me more lost and Just keep changing my code with no solution :(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li>Home<span class="nav-sec">Where We Start</span></li>
<li>Gallery<span class="nav-sec">Pure Beauty</span></li>
<li>Contact<span class="nav-sec">Come Book</span></li>
<li>Features<span class="nav-sec">Pure Luxury</span></li>
<li>Location<span class="nav-sec">Where Are We?</span></li>
<li>Rates<span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
sorry I'm just fairly new to all this
I am providing with two solutions guessing its what you need:
Fiddle 1
Change
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
Change
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
change your ul css
#navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}
and give flat:left to your li
If you are trying to center align the #navigationbar-main ul, do this
#navigationbar-main ul{
float:left /*remove this line*/
}
This will get you the ul to the center of the page horizontally.
And if you want to align the li items horizontally apply this:
#navigationbar-main li {
display:inline-block;
}
#navigationbar-main {
width: 100%;
}
Add this to your CSS,
So what i want to happen is for the background of the current link(the link of the page you are currently on) to turn a seperate color and also for the font color to change to white. I also want this same effect to occur on a:hover (for links you are hovering over). I have gotten very close to this effect, however my one issue is that to change the font color of a:hover the mouse needs to be directly over the link and not simply within its container. I understand why this would not work since im giving this property to the link specifically and not the list, but font color changes for the "a" dont work if i put them with #nav li.
The effects i want are similar to those of the NavBar on this page http://www.vitalsmarts.com/
CSS/HTML:
<style>
#nav{
list-style-type:none;
text-align:center;
height:50px;
background-image:url("image/menuBg.png");
}
#nav li {
float:left;
width:155px;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
}
#nav li:hover {
background-color:#143D17;
color:#FFFFFF;
}
#nav li a:hover {
color:#FFFFFF;
}
#nav li a.currentFont {
color:#FFFFFF;
}
.navPadS {
padding:13px 0px;
}
.navPadL {
padding:13px 12px;
}
.navPadLL {
padding-top:13px;
padding-bottom:13px;
padding-right:20px;
}
.current {
background-color:#143D17;
}
</style>
<body>
<!Header and NavBar>
<div id="navCont">
<ul id="nav" class"tbBord">
<li class="navPadS"><a class="currentFont" href="index.html">home</a></li>
<li class="navPadLL">home</li>
<li class="navPadL">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
</ul>
</div>
</body>
</html>
add this to your css
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
display:block;
}
Don't style the li's just float them left and put all your style in the a's. I've created this example on JS Bin but the bit that matters is:
#nav li {
margin:0;
padding:0;
float:left;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
width:155px;
display:block;
padding:10px;
}
#nav li a:hover, #nav li a.currentFont {
background-color:#143D17;
color:#FFFFFF;
}
May be this seems silly question for you guys.. Its about CSS Sprites. I have a navigation which contains 4 menus like.. HOME COMPANY SERVICES SUPPORT although I used a css sprite that have 3 mode/state for static, hover and selected(class called 'current'). I used to call them like..
ul#top-nav-links {list-style:none; background:url(../images/nav-bg.png) no-repeat scroll 0 0; width:508px; height:35px; float:left; margin-left:80px; margin-top:33px; padding-left:4px; margin-right:23px;}
ul#top-nav-links li{float:left; position:relative; z-index:99999;}
ul#top-nav-links li a.home01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
ul#top-nav-links li a.company01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:150px; height:31px; text-indent:-999px; float:left; background-position:-100px 0px;}
ul#top-nav-links li a.services01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:140px; height:31px; text-indent:-999px; float:left; background-position:-250px 0px;}
ul#top-nav-links li a.support01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:115px; height:31px; text-indent:-999px; float:left; background-position:-390px 0px;}
ul#top-nav-links li a.current{background:url(../images/nav.png) no-repeat scroll 0 -62px; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
and here is the image I used
so I need to display the middle colored one on hover state, although the last one for the current state, of course the current state wasn't need hover effect..
I know, It should call like this..
ul#top-nav-links li a.company01:hover{background-position:-100px -31px;}
but I curious if somehow that code should be shortened by avoiding to call each menu as separate instead like this...
ul#top-nav-links li a:hover(background-position:0px -31px;}
the above one I tried but the horizontal positioning of the image wasn't possible..
Any thoughts?
drop down a comment, if this question was confused.. :)
I'm not positive about cross-browser support, but this at least works in Chrome 15.
http://jsfiddle.net/tkZMB/
li:hover {
background-position-y: -31px;
}
You could combine this to simplify your overall CSS too.
/* General list item declaration */
li {
width: 130px;
height: 30px;
border: 1px solid gray;
float: left;
background: url(http://i.stack.imgur.com/m5HOI.png);
}
/* For each child move menu over */
li:nth-child(2) {
background-position-x: -100px;
}
/* On hover slide the background up. */
li:hover {
background-position-y: -62px;
}
Sorry, just modified your code to this, though I hope this will help you to produce efficient markup (semantically-correct) and style sheet codes: hopeful that will also solve browser inconsistencies in your codes.
HTML:
<ul class="section">
<li class="home current">
Home
</li>
<li class="company">
Company
</li>
<li class="services">
Services
</li>
<li class="support">
Support
</li>
</ul>
CSS:
.section li {
display: inline;
}
.section a {
background: url(../images/nav.png) no-repeat;
display: inline-block;
}
.section .home a {
background-position: left top;
}
.section .company a {
background-position: -100px 0;
}
.section .services a {
background-position: -250px 0;
}
.section .support a {
background-position: -390px 0;
}
.section .current a {
background-position: 0 -62px;
}