Here is a preview of some coding http://jsfiddle.net/joelupet/9NKzU/.
I would like to see my menu centered. Also, if there is alternative way like add id$class to UL elements structure.
What to do?
There are a number of ways to do this! Here's what I'd recommend.
Change your CSS to the following:
#footer_menu {
text-align: center;
border: 2px solid black;
background-color:red;
}
#footer_menu ul{
width:auto;
overflow:hidden;
display: inline-block;
}
Check this fiddle for an example implementation.
Related
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;
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>
Here's link to the code JsFiddle
The problem is when mouse over the <ul> in "service & support" , the <li> below it didn't go down,
Can someone help me fix it????
thanks
Please look at this JsFiddle.
Some alterations in the css of:
#menu li {
height:auto;
float:none;
clear:both;
width:89%;
min-height:60px;
height:auto;
margin-left:5.5%;
border-bottom:thin solid #f8aa5a;
padding-bottom:15px;
This includes the use of height: auto;
as well as using padding instead of margins.
I have created one Fiddle based on your jsFiddle.
I made some change in jquery and css.
Added in your css.
#menu li > ul{
float:left;
width:100%;
}
and made some other changes.
your fault because you put the height of li 53px, and it should be min-height.
#menu li {
border-bottom: thin solid #f8aa5a;
clear: both;
float: none;
margin-bottom: 12px;
margin-left: 5.5%;
min-height: 53px;
width: 89%;
}
#menu ul{
.
.
.
.
top:2px; //instead of 5..
}
I have added some code in your jsFiddle.
http://jsfiddle.net/wayzz/vrf4jxpy/2/
Using animate() I have added margin-bottom so it looks like the whole li is animating down.
You can find comments on where I added or changed the code. :)
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 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;}