i have some problems with the CSS code below. The problem is that only one of the icons are visible (#maps), guess it is some problem with the positioning? (70%?) i cant find the problem, hope that someone here can help.
Thanks in advance.
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 10px;
left: 70%;
}
#navlist li, #navlist a {
height: 64px;
display: block;
}
#face{
left: 0px;
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
#maps{
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
Html code:
<ul id="navlist">
<li id="face"></li>
<li id="maps"></li>
</ul>
there is definetly an issue with #face! Although I´m not sure if that will make it visible again because I would also need your HTML code. You gave it the attribute left:0px; (btw. you dont need to write "px" if it is 0 anyways). But the browser cant do anything with that because it doesnt know with which kind of positioning you are working! The attribute left:0; makes only sense if you have already given it either position:absolute; or position:relative;. All over all I would advise you to read more about the basic position techniques and upload you HTML for a closer look.
EDIT: Found the problem.You think #face has the attribute left:0;? You are wrong! Because #navlist li { left:70%} beats #face{left:0;} So just remove that attribute at #navlist li and add it at #maps! It will fix it! It was a cascading issue if you are want to read more about it google: CSS cascading system.
Related
I'm working with this free theme : http://demo2.woothemes.com/mystile/
And I would like to change the position (put it on the center) of the main navigation menu. (the one with home, shop ...).
I have traveled through the style.css and layout.css (also tried with firebug) but I can't find where it's indicated that it should be on the right. I guess it's a "float:" ?
The only way I have found to change its position is to put this in the custom.css :
body #navigation {
position:absolute;
top:165px;
left: -50%;
right: 0;
margin: auto auto;
}
But that's not exactly centered ...
Can someone help me?
Try adding this css properties in your stylesheet:
#navigation {
position: absolute;
width: 100% !important;
text-align: center;
}
#navigation ul {
float: none !important;
display: inline-block;
}
Just copy and paste the above css code in your css stylesheet.
Try to add this properties to the following classes:
nav#navigation{
width: 100%;
}
ul#main-nav{
position: relative;
right: 50%;
transform: translateX(50%);
}
This code will center that menu.
well it depends how you have it set up with your entire code.. try this and see how it helps
#navigation {
width:100%;
left:50%;
position:absolute;
text-align:left;
margin-left:-601px;
My submenu is not working properly. It's showing up, but if you click on the parent of the submenu, the color doesn't change. It's not even clickable, which makes me think that there's something that's blocking it. I know where the problem lies, a bit, but I don't know how I should solve it.
ul li ul {
display: none;
float: right;
position: absolute;
right: 0;
top:-5px;
padding-top:2em;
padding-bottom:5px;
z-index: 99999;
}
The top:-5px breaks it down. When I comment it out, the submenu's working, but it doesn't stick to the parent li. Someone else made this, and I am trying to solve it. Since I can't contact him, it's my job to fix this.
Link to site
Try clicking on "teams", or hover over it, then you'll see what I mean...
Edit: I have made a JSFiddle, trying to tidy the things up a bit.
It can be found here
It's because the ul is over the anchor element you can change it like so:
ul li ul {
display: none;
position: absolute;
right: 0;
padding-bottom: 5px;
z-index: 999;
top: 12px;
padding-top: 15px;
}
I am trying to get my nav element to center but it won't work for the older versions of Internet Explorer or Chrome. It also won't change style. How can I get this to center and change? Here is the code:
The nav:
<nav id="Nav">
Library |
Contact |
About
</nav>
The CSS
#Nav {
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
There are many ways to centre elements:
Margin way:
With a set width or display: inline-block; you can use:
margin-left: auto;
margin-right: auto;
text-align way:
With a set width or display: inline-block; you can add this to the parent:
text-align: center;
Absolute way:
position: absolute;
left: 50%;
margin-left: width/2;
or
position: absolute;
left: 50%;
transform: translate(0, -50%);
Also don't worry too much about ie7 and below as the the majority of people use higher versions of ie or a different browser though this should work up until ie6
Another thing to watch out for is that you want to use a ul for your navbar. I know, from experience, that it works fine though if you ever want to add a drop-down to the navbar then it is much harder.
Use the below:
text-align: center;
instead of
margin 0 auto;
Sample Fiddle
Note: My assumption was that you did not want to specify a width. Otherwise, you can just use the margin as already stated in the other answers.
EDIT: To use the <nav> and other HTML5 tags with lower version of IE, you can use the HTML5shiv.js (by including the below script).
<script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js' type='text/javascript'></script>
margin: 0 auto; has no meaning without specifying the width.
Since it is a block element it will spread 100% across the page, try giving it a width
#Nav {
display:Block;
width:500px;
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
Use:
#Nav
{
margin-left:auto;
margin-right:auto;
width: 12em;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
I got a sprite picture which is a breadcrumbs menu. I want to change the y position of this sprite when the mouse is hover the menu's elements.
There is no problem to do it with a fixed width website, but i can't resolve this with a responsive one...
Here is the live version : http://jsfiddle.net/RtqkD/
and my CSS code :
.services {
height: 64px;
width: auto;
background: transparent url('https://dl.dropboxusercontent.com/u/3894287/sprite.png') no-repeat 0 0;
background-size: 100%;
}
.services #Et1 {
margin-left: 60px;
}
.services #Et1, .services #Et2, .services #Et3, .services #Et4 {
height: 65px;
}
.services li {
float: left;
width: 210px;
position: relative;
background: none;
}
.services li a {
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
.services li:first-child a {
padding-left: 10px;
}
Any tips ?
EDIT
After the #Sven comment i made a more complete live version of my issue here with CSS, HTMLand Javascript: http://jsfiddle.net/RtqkD/2/
Right, lets start with the fact that the way you're spriting that is totally unnecessary. I see why, but with some careful coding it can be gotten around.
Using the :before pseudo element, I created the triangles after each item. Now each item reacts to the hover on the anchor using CSS rather than jQuery (much neater). Browser support won't go down to IE7, but neither do most things.
Here's the fiddle: http://jsfiddle.net/robsterlini/RtqkD/5/ (EDIT sorted the padding issues http://jsfiddle.net/robsterlini/RtqkD/6/)
And here are the elements used: arrow sprite, background sprite (and if you wanted to be really tight with the sprites, you could even sprite them together, just be careful with how you do it.
Took me a little while to figure it out, so if you need any explaining then give me a shout :) Hope that helps!
Live site.
The <li> items in the far right Twitter feed have excess spacing between them and I can't figure out why- there aren't any weird padding or margin issues that I can find.
The site is Wordpress, but here is the rendered HTML:
<li>
<h2>Recent Tweets</h2>
<div id="twitter-feed">
<ul>
<li>
RT #LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership</li>
<li>
What you do in small doses becomes big doses in your life.</li>
<li>
RT #ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9</li>
</ul>
</div><!-- end twitter-feed -->
<div class="forward-link">
<p><span style="color:#b8bf33">Follow #Growing_Edge</span></p>
</div><!-- end forward-link -->
</li>
And the CSS
#landing-brief #twitter-feed {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 75%;
line-height: 1.5;
color: #333333;
margin-left: -28px;
}
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: 200px;
}
#landing-brief .forward-link {
position: absolute;
left: 0;
bottom: 0;
}
Any ideas as to what's causing this?
There are two lines that are the culprits here. Both of these specify an explicit height of 200px. I'm guessing it comes from the template you are using.
/* On line 2836 in style.css */
#landing-brief #twitter-feed ul li {
height: 200px;
padding-bottom: 5px;
}
/* On line 2814 in style.css */
#landing-brief ul li {
display: inline-block;
height: 200px;
padding-bottom: 20px;
padding-right: 20px;
position: relative;
vertical-align: top;
width: 250px;
}
To fix it, you need to override the explicit height of the li blocks to auto !important;, or remove the height of the li altogether.
How I came to this conclusion:
I used Firefox with FireBug and inspected the individual Twitter post. After disabling the 200px height on both of the style blocks, it looked correct.
Please let me know if this works :-)
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: 200px; <--- here is your problem.
}
Using an element inspector allows you to see where the defined styles of an element come from. and can help you spot problems like this quickly.
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: 50px;
}
The height:200px on #landing-brief #twitter-feed ul li is causing this. Make it something smaller or make it auto by removing the height completely.
Not sure if you are aware of this, but using the developer console to debug HTML/JS/CSS in Safari/Chrome is very useful, as you can change fields in real time and see how the browser will render them.
The height of the li's are height:200px, change to height:auto;
I'd say it's the height you gave to '#landing-brief #twitter-feed ul li'. Try this:
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: auto;
}