I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
Related
I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.
#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}
I'm trying to center my dropdown menu without it affecting the functions of the menu. Any help is much appreciated! Thanks!
#menu_container { padding: 1px 0; border-bottom: 1px solid #FFF; }
#menu_container ul { list-style-type: none; }
#menu_container ul li { float: left; font-size: 12px; position: relative; }
#menu_container ul li a { display: block; padding: 5px 15px; color: #808080; text-decoration: none; }
#menu_container ul li a:hover { background-color: #333; color: #808080; }
#menu_container ul li ul { display: none; position: absolute; top: 25px; left: 0; z-index: 150; border: 1px solid #ddd; }
#menu_container ul li ul li { width: 310px; float: none; }
#menu_container ul li ul li a { background-color: #fff; }
It depends on your layout and page structure. It might be as simple as assigning #menu_container a fixed-width and automatic margins:
#menu_container { width: 640px; margin: 0 auto; padding: 1px 0; border-bottom: 1px solid #FFF; }
/* Depending on your layout, you may also need to assign a full-width and/or relative positioning to a parent/container/wrapper element */
You could set the #menu_container element to center by adding
margin:0px auto;
In order for that to work, you will also have to set a width for the container.
I just installed drop down menus on my website: http://www.squeakybooks.com/ On Mozilla they work like a dream. I haven't had a chance to check safari or Chrome yet, but in IE the drop down menus actually drop to the right. This is a HUGE pain because when you try to click on something in the drop down menu, it'll make the NEXT drop down menu activate even farther to the right.
However, it does work on this website: http://squeakytestblog.blogspot.com/ Even though I uploaded the exact same .xml file to both.
Here's the CSS I'm using:
#jsddm {
width:960px;
margin: 0;
padding: 0px;
z-index:1000000000;
position:relative;
left:5%
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:0px 0px;
border: 0px solid #AAAAAA;
background: #;
background: -webkit-gradient(linear, left top, left bottom, from(#), to(#));
background: -moz-linear-gradient(top, #, #);
padding: 2px 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 0px 0;
color: #363d1b;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
text-style: center;
}
#jsddm li a:hover {
background: #;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border: 1px solid black;
text-style: center;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #96CDCD;
}
#jsddm li ul li a:hover {
background: #D3DC6E;
}
I followed this tutorial: allblogtools.com/tricks-and-hacks/add-beautiful-drop-down-menu-for-blogger/
Please help!
Your submenu does not have any point of reference from where to load from, to fix it you can define your list menu item as relative and position your submenu absolutely to the left of the menu item being hovered. Try this:
CSS
#jsddm li {
float: left;
font: 12px Tahoma,Arial;
list-style: none outside none;
position: relative;
}
#jsddm li ul {
border: 1px solid black;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
}
I'm stuck on a problem with the drop down menu on this site http://www.leithonthefringe.com/ (hover over performer information to see problem).
Basically a large gap appears between the main menu and the first item in the drop down, it affects FF/IE/Chrome.
Any thoughts greatly appreciated!
CSS is as follows:
#menu-main-nav { margin: 0px; padding: 0px; }
#menu-main-nav li { float: left; list-style: none; height: 40px; font-size: 20px; }
#menu-main-nav li a { display: block; background: #333333; padding: 12px 24px 8px 24px; text-decoration: none; border-right: 1px solid #444444; color: #EAFFED; white-space: nowrap; }
#menu-main-nav li a:hover { background: #222222; }
#menu-main-nav li ul { margin: 0px; padding: 0px; height: 40px; position: absolute; visibility: hidden; border-top: 1px solid white; z-index: +1 }
#menu-main-nav li ul li { float: none; display: inline; }
#menu-main-nav li ul li a { width: auto; background: #750000; color: #FFFFFF; border-right: none; }
#menu-main-nav li ul li a:hover { background: #8d0101; }
//Update
The problem seems to be cufon rendering a white space that doesn't seem to exist as cufon text - any thoughts on why that would happen also appreciated.
The solution turned out to be to render cufon on #main-menu-nav a rather than #main-menu-nav...
Theres a cufon in the way.
<cufon class="cufon cufon-canvas" alt=" " style="width: 4px; height: 20px; "><canvas width="14" height="22" style="width: 14px; height: 22px; top: -2px; left: 0px; "></canvas><cufontext> </cufontext></cufon>
the issue is padding, specifically in #menu-main-nav li a The padding-top value needs to be 0.
I'm on Chrome/Firefox. I've read several tutorials and questions here too on this topic.
I have a UL containing LI. I set the LIs to "display: inline;", but they won't. They're still vertical.
What am I doing wrong?
Thx.
Here's my css:
.menu{
width: 100%;
padding: 0px;
margin: 0px;
outline: 1px solid grey;
background-color: #f6f6f6;
font-size:100%;
}
.menu ul{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
background-color: #f6f6f6;
}
.menu li ul{
display: none;
height: auto;
padding: 0px;
margin: 0;
background-color: #f6f6f6;
outline: 1px solid gray;
position: absolute;
z-index: 200;
left: 20px;
top: 30%;
}
.menu li:hover ul{
display: block;
}
.menu li:hover{
background-color: #005ea2;
}
.menu li{
display: inline;
padding: 0;
margin: 0;
border-bottom: 1px dotted grey;
}
.menu ul li:last-child{
border: none;
}
.menu a{
display: block;
color: #333333;
text-decoration: none;
margin: 0px;
margin-left: 5px;
}
.menu a:hover{
color: white;
background-color: #005ea2;
}
.menu .menu_header{
color: #333333;
}
.menu .menu_header a:hover{
color: white;
}
The <li> elements need to have float:left
first of all you might consider adding the relevant HTML to your answer, to help answerers understand your situation better.
I can spot several strange things that might be related to your problem.
First, the li ul selector are not very useful: it's more likely that you meant the opposite, ul li.
Second, I see that on hover you have something changing to display: block. This is a very
strange behavior to have on hover, are you sure?
Third, I see that you have a { display: block }. This does not play nicely if its container is display: inline so you might want to switch to display: inline-block for the container (which is what I would suggest for an horizontal menu anyway)