I have a navigation that I have styled as I like, but there is a small flash as you go over the border, where the background hover effect still applies but the text color change does not. I have tried various ways of resizing the "a" element (which triggers the text change), and it always stays within the border area no matter how I resize it. I have also tried adding the color change to the li:hover section with no effect.
Here is the nav bar:
<div id="leftmenu">
<ul id="sidenav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
And this is the CSS (probably overly complex - I have tried lots of different things that didn't seem to make a difference and didn't remove them all):
#leftmenu{
float: left;
width: 300px;
margin: 10px 0 0 10px;
}
ul#sidenav{
list-style-type: none;
padding: 0;
margin: 0;
}
ul#sidenav li{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid medium #898E95;
border-radius: 5px;
text-align: center;
margin: 5px 0 5px 0;
background: #898E95;
font-size: 11pt;
}
ul#sidenav li a{
width: 295px;
text-align: center;
line-height: 25px;
text-shadow: 1px 1px 0px #283744;
text-decoration: none;
font-size: medium;
font-weight: bold;
color: #FFF;
display: block;
}
ul#sidenav li:hover{
background-color: #E5ECF9;
}
ul#sidenav li a:hover{
color: #5C5E64;
text-shadow: none;
}
#contentright{
margin-left: 320px;
padding: 0 20px 0 20px;
}
Thanks for any help you can provide - this is my first question, hopefully I asked it correctly!
http://jsfiddle.net/b8M6e/
The problem is created by this line
border: solid medium #898E95;
I just removed that line and it fixes the issue.
Also, by removing that line you'll notice it makes the menu items a little smaller than what you had. To fix that add the following line to the a- like so:
ul#sidenav li a {
padding: 4px;
}
updated fiddle http://jsfiddle.net/b8M6e/1/
Related
Is there a way to hide the separator in the first element on each line?
I have a responsive horizontal menu that adds extra lines when the window becomes smaller.
To make matters worse, the end user can add and remove items from this menu, or just change the order of the menu items.
Using first-child is not an option, because that only works for the first line. When the screen becomes too small the following lines will have the separator on their first li element.
#block-views-solutions-block{
box-sizing: border-box;
text-transform: uppercase;
font-weight: bold;
width: 92%;
max-width: $maxWidth;
margin: 20px auto 0 auto;
padding: 15px 0 0 0;
background-color: $colorBlue;
.content{
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
ul{
margin: 0 !important;
padding: 0 40px;
text-align: center;
}
li{
display: inline-block;
padding: 0 !important;
&:before {
position: relative;
top: 0.125em;
display: inline-block;
width: 1px;
height: 1em;
border-left: solid 2px #fff;
content: " ";
}
&:first-child{
&:before{ border-left: none; }
}
}
a{
display: inline-block;
padding: 0 10px;
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h2{
color: #fff;
font-size: smaller;
padding-bottom: 5px;
}
}
Looks fine here:
Does not work for the 2nd or following lines:
Looks horrible on very small screens:
I've been trying out solutions on here and other websites, but none seem to do the trick.
I found a solution to this issue, with a couple of caveats:
The solution requires that the list be left- or right-aligned, and won't work with a centered list.
The solution requires that the ul element's overflow be hidden, which could pose a problem if you're also hoping to have dropdown menus.
The solution itself is very simple:
Use ::before or ::after to add the separator, depending on whether your nav is left- or right-aligned.
Position the separator relative to its initial position such that it sits outside its list item.
Use padding on the opposite side of the list item to create the space for its adjacent list item's separator.
Set overflow: hidden; on the ul element so that any separators which fall outside the container are hidden.
Here it is in action:
ul {
font-size: 0;
overflow: hidden;
padding: 0;
}
li {
font-size: 16px;
display: inline-block;
margin: 0;
padding: 0;
color: gray;
position: relative;
padding-right: 2rem;
}
li::before {
content: "|";
position: relative;
left: -1rem;
font-weight: bold;
color: black;
}
<ul>
<li>Item 1</li>
<li>Another Item</li>
<li>This Is Nice</li>
<li>Another</li>
<li>And Another</li>
<li>And Yet Another</li>
</ul>
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/
This the link http://jsfiddle.net/a6K3f/1/.
I need to have one link in right aligned in the navigation menu. Below code is fine in all major browser except in ie7. Right aligned 'Link4' is breaking down. I know it works if i add floated:right li as first li in ul. But i cannt add as first li. Becasue i have written pseduo classes first-child for that.
I tried many trials but not yet resolved. Can anybody please help in my concern issue. Thanks
HTML:
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li class="f-Right">Link4</li>
</ul>
CSS:
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*display:inline;
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
Like this
please write *float:left; and remove
*display:inline;
demo
css
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*float:left; /* <--hack for IE **/
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
I'm lost... I tried the other answers given in the questions with no results.
Here, my CCS:
ul.nav { padding-top: 5px; font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif; float: left; }
ul.nav li { margin-left: 7px; }
ul.nav a { font-size: 17px; color: #918f8f; text-decoration: none; text-shadow: 1px 1px 0px #fff; padding: 15px 6px 18px; }
ul.nav a:hover { color: #000000; text-shadow: 1px 1px 0px #fff; }
How can i center my navigation bar?
You can give your UL a fixed width and center like this:
ul.nav {
width: 200px;
margin: 0 auto;
}
If this navigation isn't supposed to be a sidebar, then remove the float: left;
Try this
body{ text-align:center;}
{And rest of your code...}
and it will be in center.
Remove float:left;
add a width.
add margin:0 auto;
`
css
ul.nav {
padding-top: 5px;
font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif;
width: 300px;
margin: 0 auto;
}
Remove the float first of all - it will throw your list over to the left of the screen. Then, you have two options:
Give the List a fixed width, then use margin:0 auto.
ul.nav {
width: 40em;
margin: 0 auto;
}
This if fine if you will always have a set amount of links in your nav bar. Not so useful if this changes frequently, or even dynamically. I would prefer the following solution, although an additional bit of markup is required
Use a wrapping element, styled display:table
The HTML:
<nav class="my-class" role="navigation">
<ul>
...
</ul>
</nav>
Then your CSS:
.my-class {
display: table; /*centers its contents*/
width: 100%; /*make sure it doesn't collapse*/
margin: 0 auto;
}
ul {
whatever /*just don't use text align!*/
}
Now it doesnt matter how much you put in that list, it will always center for you.
I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/