Hi so I am creating a website, but I am troubled a bit with the footer menu - It only becomes horizontal when I use float:left (but after crossing a certain point it creates a new line). If I use anything other than float:left it becomes vertical. My goal is to make it all on a single line. Example in the image (my goal is to make the footer menu horizontal like my top menu) https://i.gyazo.com/61f2f5f7c0e6d98ad181364365163dd4.png
Here is the code I used. Footer code based on menu code:
#menuPan{width:736px; height:36px; position:relative}
#menuPan ul.menu{position:absolute; top:0; left:0; width:736px; overflow: hidden; background-color:#3f3f3f;}
#menuPan ul.menu li{height:36px; margin-right:5px; float:left; font-size:large; }
#menuPan ul.menu li a{height:36px; display:block; display: inline-block; color: white; text-align: center; padding: 8px 10px; text-decoration: none;}
#menuPan ul.menu li a:hover{height:36px; background-color: #6d6d6d;}
And my footer code:
#footer ul.footertest li{height:20px; float:left; font-size:large;}
#footer ul.footertest li a{height:20px; display:block; display: inline-block; color:darkslategrey; text-align: center; padding: 8px 10px; text-decoration: none;}
#footer ul.footertest li a:hover{height:20px; background-color: #6d6d6d;}
Try applying
display: inline-block;
Related
I am working on a website which has a centered horizontal navigation bar. This bar has to have round corners on the end parts along with a hover effect. All of this is sort of working, but the issue is that the hover of the nav bar is overflowing the actual size of the bar. Along with that there is a slight white space between every element. As you can see in the following jsfiddle it doesn't look quite right. Another important note, is the fact that the navigation bar has to work with Bootstrap and the responsive functions. Which means nothing can be positioned absolute or float etc. Underneath I have also attached the html and css code.
HTML
<div class="navTopRight">
<ul class="naviTop">
<li class="first">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</li>
</ul>
</div>
CSS
.navTopRight{
text-align:center;
list-style-type: none;
margin-top: 30px;
padding: 0;
}
ul.naviTop li {
border:1px solid black;
display: inline;
overflow:hidden;
background-color:#003340;
}
.navTopRight li:last-child {
border-right: none;
}
.navTopRight li a{
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
}
ul.naviTop li a:hover {
background-color:#0099bf;
}
li.first{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
li.last{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
So i think you basicly had everything right here there is just some small details.. if I understood your question correctly you wanted to just fill your li background without the blue color overflowing everything.. This is easiest done by changing the padding:14px 16px; to padding:0px 16px;
after that you wanted the empty white space removed and that can be achieved pretty simple by changing your html codes structure like this:
<li class="first">Home</li
><li>Item1</li
><li>Item2</li
><li>Item3</li
><li class="last">Item4</li>
Notice how all the li tags ends just before the new one starts. Here is a working fiddle aswell! So no use of position or float needed!
https://jsfiddle.net/nfztdxr2/3/
If you want to fix overflow hover just change this part of your css
ul.naviTop li {
border:1px solid black;
display: inline; -> *display: inline-block;*
overflow:hidden;
background-color:#003340;
}
here is the result https://jsfiddle.net/nfztdxr2/
Let me know if that is what you try to achieve, or maybe there is another concern?
You can also set hover without "a"
ul.naviTop li:hover. {...}
It also looks better.
The problem is you have padding: 14px 16px; on .navTopRight li a, which is set to display: inline;. You can't give vertical margin/padding/etc to an inline element and have it affect the elements before/after it. So when you hover over those links, and the background color is applied, it looks really weird because the vertical padding becomes visible. Assuming that the navigation menu looks like you want it when the links aren't hovered, just remove that vertical (top/bottom 14px) padding from the links.
.navTopRight{
text-align:center;
list-style-type: none;
margin-top: 30px;
padding: 0;
}
ul.naviTop li {
border:1px solid black;
display: inline;
overflow:hidden;
background-color:#003340;
}
.navTopRight li:last-child {
border-right: none;
}
.navTopRight li a{
color: white;
text-align: center;
padding: 0 16px;
text-decoration: none;
}
ul.naviTop li a:hover {
background-color:#0099bf;
}
li.first{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
li.last{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<div class="navTopRight">
<ul class="naviTop">
<li class="first">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</li>
</ul>
</div>
I'm doin' a navigation bar for a website. I created it etc. but when I go to one of the sub menu's it disappears..
here's my HTML:
<ul id="menu">
<li>Welcome</li>
<li>Review
<ul>
<li>Customer Reviews</li>
<li>Leave a Review</li>
</ul>
</li>
<li>Gallery</li>
<li>Discounts
<ul>
<li>Refer us!</li>
<li>Claim discount</li>
</ul>
</li>
<li>Send me an email!
</li>
</ul>
</nav>
and my CSS:
/* nav */
nav{
text-align:center;
}
nav a:visited{
color:black;
}
nav a{
text-decoration:none;
color:black;
}
#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
border:1px solid black;
margin-left:10px;
margin-top:5px;
border-radius:4px;
}
#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}
#menu li a:hover {
color:orange;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:6px;
margin-right:1px;
padding: 2px;
}
/*#menu, #menu ul {
margin:0 auto;
padding: 0;
}*/
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
and a little JSFiddle for ya: http://jsfiddle.net/nv741s01/
If you hover your mouse over a menu option [that has a sub-menu] long enough and then do it, it works, but people won't be willing to wait three seconds every time they want to visit a sub menu, so how do I resolve it so that it works as soon as you go to it?
any help would be much appreciated, thanks in advance :)
It was because there was a little gap between the sub menu and the menu, here is the fixed JSFiddle:
http://jsfiddle.net/nv741s01/3/
And here is what I changed:
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top: 1px;
margin-right:1px;
padding: 2px;
}
I changed the margin-top to 1px.
The margin of an element doesn't capture hover events. Use padding instead. Make these changes:
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
padding-left:10px;
padding-top:5px;
margin:0;
}
/* add this rule */
#menu li a {
border:1px solid black;
border-radius:4px;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:0px;
margin-right:1px;
padding: 2px;
}
Fiddle: http://jsfiddle.net/nv741s01/2/
You are using margin to position the submenu away from the main item. Since margin isn't part of the actual element it doesn't trigger any hover behaviours. Instead, use padding on the child ul element, since padding is actually considered part of the child's box. This will make the hover behaviours trigger consistently when moving the mouse from parent to child.
You also describe that there's a 3 second delay somewhere - that's impossible from this code, and I cannot reproduce it obviously.
Your dropdowns are disappearing because as you move your mouse cursor down, there's a gap between the parent menu item and the child menu item.
When the mouse leaves the parent li space, it no longer applies to the hover state, and so the CSS rule is ignored, leaving the child menu hidden.
If it helps, I tend to use a combination of margins and padding, to 'bump together' the parent and child menus, to help navigation.
I want to do this with CSS only. I have an unordered list and some hyperlinked list items and I want to limit the width and height of the links (list items) to width:300px and height:1.5em. So, no matter what the length of the links are, only up to 300px of the links will be showing and the rest will be hidden because of height limit and overflow:hidden. I want to show the rest of the link on mouse hover.
I can partially do this and hover over links shows the rest of the content BUT it also pushes down the content below it.
Is it possible, to show the rest of the content on mouseover WITHOUT pushing down the content below it?
Please see this fiddle 'http://jsfiddle.net/3VyaC/'
Looks a little clunky, but it's close to the effect you're shooting for. Only changed your CSS:
body {font-family: arial; font-size: 0.8em;}
.news-entry ul {
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
width: 300px;
}
.news-entry li {
border-top: 1px solid #dcdcdc;
width:300px;
height:1.5em;
overflow:hidden;
position:relative;
}
.news-entry li a.itemtitle {
display: block;
width: 100%;
padding: 4px 0 3px 0;
line-height: 1.5em;
text-decoration: none;
}
.news-entry li:hover {
color: #333;
background-color: #fafafa;
overflow:visible;
z-index:10;
}
.news-entry li:hover a{
position:absolute;
width:100%;
background-color:#fafafa;
border:1px solid #555;
}
Fiddle: http://jsfiddle.net/y3Vkt/
Might need to tweak the margins when the link changes to absolute position, there's a 1-2px glitch.
Hope this helps!
There would not be a way to do this. The only way you could actually do that is by setting position: absolute; but that would make the link sit on top of the next one. So to basically answer your question, there is not a way to do this with the width set as you have it.
I have some CSS and HTML for horizontal tabs that works perfectly in jsfiddle. However, in both Firefox 13 and IE6 (the browser I most need this to work in) the tabs are displayed as a vertical unordered list.
Here is the CSS:
.tablist
{
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
}
.tablist li
{
display:inline-block;
float: left;
}
.tablist li a
{
float: left;
margin-right:0.13em;
padding:0 1em;
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
color:#000;
background-color:#ccc;
/* CSS 3 elements */
webkit-border-top-right-radius:0.50em;
-webkit-border-top-left-radius:0.50em;
-moz-border-radius-topright:0.50em;
-moz-border-radius-topleft:0.50em;
border-top-right-radius:0.50em;
border-top-left-radius:0.50em;
}
.tablist li a:hover
{
background:#3cf;
color:#fff;
text-decoration:none;
}
.tablist li#current a
{
background-color: #777;
color: #fff;
}
.tablist li#current a:hover
{
background: #39C;
}
And here is the HTML:
<div class="tablist">
<ul>
<li><strong>Tutorialsphere</strong></li>
<li><strong>Photoshop</strong></li>
<li><strong>Illustrator</strong></li>
<li><strong>Fireworks</strong></li>
<li><strong>Flash</strong></li>
<li><strong>CSS</strong></li>
<li><strong>PHP</strong></li>
</ul>
</div>
For a while this was working in Firefox and I don't remember changing anything -- but I must have.
Any advice is appreciated.
Regards.
IE6 doesn't support inline-block. As such, it's just ignoring your display property and leaving it at its default.
I don't have IE6 handy, but try display: block; float:left to this selector: .tablist li a
I am trying to center vertically the text in my menu bar. I have tried editing the HTML and CSS, but had no luck making it work.
The webpage is located at: http://www.xuanyinwen.com/test4.html
The CSS is at: http://www.xuanyinwen.com/css.css
Could anyone give some idea, please! Many thanks!
Instead of giving the anchor elements specific width and height (which is useless anyway, because they are given display: block already), you can give them a padding:
#menu li a {
padding: 1em 0;
}
To your .vertical li a rule, add:
line-height: 4em;
vertical-align: middle;
change .vertical li a to
.vertical li a{
border-color:-moz-use-text-color;
border-right:1px solid;
border-style:none solid solid;
border-width:0 1px 1px;
display:block;
line-height:4em;
padding:0.2em 10px;
text-decoration:none;
width:200px;
text-align:center;}