#mainMenu {
float: right;
margin-top: 70px;
padding: 0;
list-style: none;
// position: relative;
}
#mainMenu li {
box-sizing: border-box;
width: 250px;
height: 70px;
background-color: rgba(0, 168, 107, 1);
border: rgba(76, 76, 76, 0.2) 1px solid;
}
#mainMenu li:hover {
background-color: rgb(2, 100, 59);
margin-right: 50px;
}
<ul id="mainMenu">
<li value="1"></li>
<li val="2"></li>
<li val="3"></li>
<li val="4"></li>
<li val="5"></li>
<li val="6"></li>
</ul>
As you can see, I want the menu item to get wider on hover, and it does, but the problem is it gets wider on the right side and all other menu items move to the left. I want only the hovered item to be wider and move to the left while the others stay still.
I may try this to do this with JavaScript later for slow-mo opening.
For now I'm trying css hover because its faster to test.
See the live demo http://jsfiddle.net/d4zow6px/
This did the job,
#mainMenu li:hover{
background-color: rgb(2,100,59);
width: 300px;
margin-left: -50px;
}
Related
For example I have fixed nav, is there a way to anchor the list items to the bottom of the nav? I attempted to give the list items a fixed position too but this messes up their layout as you can see at fiddle
here is my code:
#nav {
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav>ul>li {
display: inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: fixed;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
Any suggestions on how this can be done?
When you use a fixed or absolute position it takes an element out of the flow of the document and hence they stack up on top of each other when you apply those positions to the li elements.
Instead you should be absolutely positioning the ul block to the bottom of the #nav:
#nav > ul {
list-style: none;
margin: 0;
position: absolute;
bottom: 0;
}
#nav > ul>li {
display: inline;
}
As I understand your question, you wish to have the list elements at the bottom of your header. Just change position: fixed; to position: relative;. This keeps the elements flow along with the flow of the page.
Here is your solution:
#nav{
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav > ul{
list-style: none;
margin: 0;
}
#nav > ul>li{
display:inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: relative;
top:50px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
If you want something to be anchored to the bottom of an element, but still remain in the flow of the page, try using relative positioning. That essentially means you give the #nav element relative positioning, and you give the li elements relative positioning as well:
#nav {
height: 75px;
width: 100%;
position: relative;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav ul li {
display: inline;
position: relative;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
This seems to work pretty well, please tell me if it doesn't.
The problem you encountered was that fixed positioning put them all in a mess. Fixed positioning positions ALL the items relative to the viewport, so if you had all the lis with
position: fixed;
top: 45px;
They would all go in the same spot.
I'm creating a vertical menu that can have submenus. For these, I'm trying to add a vertical line with the use of CSS pseudo-element ::before and border.
The issue that I'm facing is that CSS is being applied to the entire menu instead of the specific submenu.
I think the issue lies with the use of position: absolute;, but without it, the border is never displayed.
Below is the code and you can check the issue in this JsFiddle.
<ul id="test-ul">
<li><a>one</a></li>
<li>
<a>two</a>
<ul class="submenu">
<li><a>sub one</a></li>
<li><a>sub two</a></li>
<li><a>sub three</a></li>
</ul>
</li>
<li><a>three</a></li>
<li><a>four</a></li>
<li><a>five</a></li>
</ul>
<style>
/* reset defaults */
ul { list-style: none; }
/* apply style to menu */
#test-ul {
background-color: #eee;
border-color: #ccc;
position: absolute;
}
/* style links */
#test-ul > li a {
color: #2b7dbc;
border-top-color: #e4e4e4;
background-color: #fff;
display: block;
padding: 7px 0 9px 20px;
border-top-width: 1px;
border-top-style: dotted;
}
/* do CSS3 magic and show a vertical border on the left of each submenu item */
#test-ul > li > ul::before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 18px;
top: 0;
bottom: 0;
border: 1px dotted;
border-width: 0 0 0 1px;
}
</style>
Simply give .submenu a position of relative
.submenu{
position: relative;
}
I am trying to get a left menu and a right banner and have them stay fixed in place when the centre panel scrolls text - the banner will have to be on top of the centre panel due to size - the colour scheme is white text on black background except for the menu which is an <ul> with its own colour scheme
I am rather new to css so may have already made a prat of myself - I have tried but currently the top right banner does stay fixed when scrolling but the text overlays it and the top left menu shoots off the screen
JS Fiddle
<head>
<style>
#container {
width:90%;
height 100%;
background-color:Black;
margin: 0 auto;
text- align: left;
}
#banner {
float: right;
background-color:black;
width:40%;
top:1;
right:1;
position:fixed
}
#sidebarmenu {
float: left;
width: 10%;
background-color:Black;
padding: 15px 10px 15px 20px;
top:1;
left:1;
position:fixed
}
#mainContent {
background-color: Black;
color:White;
position: absolute;
left: 120px;
width: 50%;
top:220;
margin: 0 0 0 15%;
}
body {
color: white;
background-color: black;
}
.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px;
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
display: block;
overflow: auto;
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
color: white;
}
.sidebarmenu ul li a:hover {
background-color: black;
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Home</li>
<li>Info</li>
<li>Contact Us</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
</div>
</body>
any help /comments / guidance on what I should be learning /looking at is appreciated
Phew! Where to start? lol Your code needed to be fixed pretty much on every line. I have a reworked demo here but basically, you must pay attention to site architecture when you are positioning elements. Organization is everything is front end development.
See DEMO
First of all, once you start using position: absolute; or position: fixed;, using float and margin becomes irrelevant.
Also, when using top: x;, left: x;, right: x;, or bottom: x; always make sure to add a size unit to your value, i.e. top:1; should be top: 1px;
If I understood correctly from the css you posted, something that'll get you closer to what you want to achieve is this:
html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;}
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }
Take a look at this jsfiddle I made to see what this css does: http://jsfiddle.net/beYuC/
NOTE: You might have noticed I made the html and body have a height of 100%. This is because unless you set a height for the html and body, any other element on the page you want to make 100% will simply be flattened out.
NOTE 2: Be sure to check out this website and its CSS for an example of a well done content container and sidebar menu with 100% height: http://www.jlescure.com/
All,
I have a horizontal menu bar. When the user hovers over each link in the menu bar, I want to show a small triangle underneath the link.
This small triangle is not an image but is rendered by CSS border syntax. Image and code below:
Here is the CSS code for the triangle:
#css_arrow {
border-color: transparent transparent rgba(111,46,11,0.0) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
top: 34px;
left: 78px;
I want to add the triangle to the menu item in hover state.
Can someone please advise how to go about adding this id to the hover state. I thought about using two classes for the items in the menu bar but its not working out. Here is the html code:
<div id="main_bar">
<ul>
<li class="maintabs maintabs_tri">Overview</li><li class="maintabs maintabs_tri">Collar/ Neckline</li><li class="maintabs maintabs_tri">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs maintabs_tri">Body</li>
</ul>
</div>
And the CSS, which doesnt work:
.maintabs_tri:hover {
border-color: transparent transparent rgba(111,46,11,1) transparent;
border-style: solid;
border-width: 8px;
position: absolute;
height: 0;
width: 0;
top: 32px;
left: 78px;
}
You are going to need to place it on all items, but only display it on hover, i.e.
<ul>
<li>
Whatever <span></span>
</li>
<li>
Whatever <span></span>
</li>
<li>
Whatever <span></span>
</li>
</ul>
In this case, span is going to be the triangle. I'm assuming you've already styled your ul an li appropriately. So, in your css:
ul li a {
display: block;
width: 100px;
height: 32px;
float: left;
position: relative;
}
ul li a:hover span {
display: block;
}
ul li a span {
display: none;
border-color: transparent transparent rgba(111,46,11,1) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
bottom: 0;
left: 50%;
}
I'm nesting it within the anchor because that maximizes the clickable area.
Well, I'm working an an ul - li multilevel menu and have problem.
Firstly, some code (I know it's not perfect but the crappy div is automatically added by Wordpress):
<nav id="page-navigation">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Pages
<ul class="sub-menu">
<li>One Column</li>
<li>Two Columns</li>
<li>Three Columns</li>
</ul>
</li>
</ul>
</div>
In my stylesheet I'll be pointing only to page-navigation id & sub-menu class so you can totally skip other ids/classes.
The problem is I can't change WIDTH of links in sub-menu. I don't know how. I'm totally lost.
As far as I can see this code overwrites them:
#page-navigation ul li {
float: left;
padding: 0;
font-size: 1.2em;
line-height: 1.2em;
background-repeat: no-repeat;
width: 200px;
height: 65px;
}
#page-navigation ul li a {
display: inline-block;
text-align: center;
padding: 10px 0 0 0;
text-shadow: #222 1px 1px 1px;
width: 200px;
height: 65px;
}
And here's the code for sub-menu items:
.sub-menu {
border-radius: 5px;
border: solid 1px #000;
box-shadow: 0px 0px 25px #000;
background-color: #222;
height: 200px;
width: 500px; /* THIS LINE DOESN'T WORK */
}
.sub-menu li {
width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */
}
.sub-menu li a {
font: 10px Verdana;
tex-shadow: 1px 1px 0px #000;
width: 100px; /* doesn't work :) */
height: 100px; /* doesn't work :) */
}
I know the whole sub-menu is inside of a <li>, but can do nothing with that (default Wordpress behavior).
What now? :(
Thaanks
You need to specify the full path, the higher level items are currently more specific. Try this:
#page-navigation ul li .sub-menu li {
width: 100px;
}
Your .sub-menu width, the first of your "doesn't work" actually does work for me. For the second, you can do two things.
Make it width: 500px !important so it overrides anyway. But I would advise to instead...
Put the ID at the beginning of the selector. .sub-menu li is overridden by any selector with an ID in it. So change it to #page-navigation .sub-menu li.
The selector #page-navigation ul li is more specific than .sub-menu li, so it takes precedence.
You can either work this out by adding an !important annotation to your CSS rules like this:
.sub-menu li {
width: 500px !important;
}
or specify the rule as more specific:
#page-navigation ul.sub-menu li {
width: 500px;
}
For problems like this, please resort to Firebug - you'll have a nice view of what is overwritten by what. This helps a lot :)