I have two buttons. For now i can only move the position of all of them, but i want to move the specific button "HOME" to the left.
Here is my html code
<ul class="fullsize-nav-ul">
<li class="nav-main-item menu-home">
<a href="http://atlanticsleeptherapeutics.com/?page_id=11">
<span>Home</span>
</a>
</li>
<li class="nav-main-item menu-who-we-are">
<a href="http://atlanticsleeptherapeutics.com/?page_id=15">
<span>WHO WE ARE</span>
</a>
</li>
</ul>
and css code that i move these two buttons
.fullsize-nav-ul {
position: relative;
right: 20px;
bottom: 150px;
}
I tried this way, but it does not work
#fullsize-nav-ul li.nav-main-item menu-home a{
position: relative;
right: 30px;
}
In your example you changed your selector from a class selector (.fullsize-nav-ul) to an ID selector (#fullsize-nav-ul). Not sure is that was just a typo, but based on your code you want the class selector.
Then you introduced a space between the classes on the same element in (li.nav-main-item .menu-home), which instead turns into a selector for a descendant element (although you're missing the period too so maybe that's just another typo?).
This should work:
.fullsize-nav-ul li.nav-main-item.menu-home a {
position: relative;
right: 30px;
}
jsFiddle example
You're missing a . before your menu-home css class:
#fullsize-nav-ul li.nav-main-item .menu-home a{
position: relative;
right: 30px;
}
This isn't really much to go on, you should float the li.
Don't use positioning like this especially on an anchor.
I've attached a working fiddle
http://jsfiddle.net/0gzx2bru/
.fullsize-nav-ul li{
list-style-type:none;
float:left;
padding:10px;
}
I do not think you can use top, right, bottom or left declaration when position is set to relative on an element i.e {position:relative}.
To achieve what you want, you might need to set position to absolute i.e {position:absolute}, then play around with the top, right, bottom, left values.
Goodluck!
Related
http://jsfiddle.net/xw0vvo9e/4/
I'm attempting to set a background color for my navBar. As you can see in the jsfiddle, I have:
div .navBar {
width: 100%;
height: 45px;
background-color: #FF0000;
top: 0px;
position: fixed;
}
and it doesn't work. However, if I remove it, and change the HTML to:
<div class="navBar" style="background-color:#FF0000;">
it works just fine. I've been scratching my head on this for quite some time now.
You should remove the space in your selector, i.e. it should be div.navBar. Your current selector which is a descendant combinator selector tries to find .navBar descendants of the div elements. As the .navBar element doesn't have any div parents/grandparents the selector fails to select the target element.
i have some child based hovering effect on my project.
My codes are
<ul>
<li>
<a href="">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook"></i>
</a>
</li>
<ul>
so my css are
a i:first-child{
position: absolute;
top:0px;
}
a i:last-child{
position: absolute;
top:30px;
visibility:hidden;
}
when hovering on first child i want to take it top:-30px and visibility:hidden and last child to vice-versa
I have tried
ul.socials.jump a i:first-child:hover ul.socials.jump a i:last-child{
position: absolute;
visibility: visible;
top: 0%;
transition:all .4s ease;
}
but not working :(
If you want to modify both elements on hover, you will need two separate :hover rules.
One for the first child:
ul.socials.jump a i:first-child:hover {
visibility: hidden;
top: -30px;
}
And one for the last child, but to target the last child on first child hover, you don't need to repeat the first portion of your selector — just use a sibling combinator:
ul.socials.jump a i:first-child:hover + i:last-child {
visibility: visible;
top: 0%;
}
You don't need to redeclare position: absolute, and your transition ought to be declared on a i:first-child, a i:last-child and not on the hover state unless you expect the transition to only apply when the elements leave hover.
Actually, the hover is better served on the anchor tag.
a:hover i:first-child {
position:relative;
top:-30px;
}
a:hover i:last-child {
visibility:visible;
}
It's much more legible, and the hover is more likely to stay active even with the shifting position of the children.
It would also help if you added a class to the link and set its display to inline-block, such as
a.hoverchild { display:inline-block }
That causes the 'blank' space inside the link to be hoverable as well, so that when the children move, the cursor (being inside the link's block, still) is still keeping the :hover active.
If you're trying to do what I think you're trying to do, you might actually be better off using float:left like this:
a.hoverchild {
display:inline-block;
}
a.hoverchild:hover i {
position:relative;
float:left;
clear:left;
visibility:visible;
}
Here's a fiddle to demonstrate.
Hello i think you can use sibling option in css using "~" sign to solve this problem.
Check out following JSfiddle to see your requirement
I would like to have part of <li> content aligned to the left ("Title") and rest of it ("[button]") to the right. For each item.
I'm using following HTML code:
<ul class="dual-align-list">
<li><div>Title</div><div>[button]</div></li>
<li><div>Title</div><div>[button]</div></li>
</ul>
and styles:
ul.dual-align-list li
{
display: block;
height: 25px;
}
ul.dual-align-list li div:first-child {float: left}
ul.dual-align-list li div:nth-child(2) {float: right}
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
The only problem is your classes and use of pseudo-elements aren't very semantic. A better approach would be to give classes to your divs that describe what their content is, and style them that way.
<ul class="title-content-list">
<li><div class="title">Title</div><div class="content">[button]</div></li>
</ul>
And CSS
ul.title-content-list > li { display: block; height: 25px; }
ul.title-content-list > li > div.title { float: left }
ul.title-content-list > li > div.content { float: right }
Or something along those lines.
It's very bad practice to use "left" or "right" as class names - what if you later decide you want your title on the right and button on the left? You'd have to change all your HTML, or have weird CSS where .right positions elements on the left and .left on the right.
What you are doing seems to be working (at least per how you describe what you are looking for here). I'm assuming that your issue is the complexity of your selectors? If so, one thing you could try is moving the selector to the individual element. I know for bootstrap they call this pull-right so I went ahead and did that:
<ul class="dual-align-list">
<!-- Title really only needs to be in a div if you
plan on styling it further -->
<li> Title <div class="pull-right">[button]</div></li>
<li> Title <div class="pull-right">[button]</div></li>
</ul>
See this JSFiddle for a working example with that in it. Hopefully this addresses the actual question!
Edit
By the way, if the issue is just how far the button goes to the right you can put everything in a fixed width container or you can add a margin-right to the "pull-right" class. For the fixed width container, just wrap your ul in:
<div class="container"> <!-- "ul" here --> </div>
You will also need the following style rule as well:
/* edited to use percents for a responsive layout */
.container { margin-left: 5%; margin-right: 5% }
I put this in an update to the previous fiddle you can find here. Hopefully that helps some as well. Good luck!
EDIT (2)
Changed fixed width layout to responsive layout with 5% margins. These could be adjusted per the desired result or even styled with the #media element to vary based on screen size!
Try this:
HTML
<ul class="dual-align-list">
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
</ul>
CSS
ul.dual-align-list li {
display: block;
height: 25px;
position: relative;
}
ul.dual-align-list li .left {
text-align: left;
position: absolute;
left:0;
}
ul.dual-align-list li .right {
text-align: right;
position: absolute;
right:0;
}
Hopefully this helps :)
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.