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;}
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;
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 create a navigation menu that is evenly spaced regardless if the menu item is 1 line or 2 lines of text. I have this working with 1 line of text but the vertical spacing of the text is off if an item hits more than one line.
My code that I have so far is below. Any help would be awesome. Thanks in advance.
jsfiddle: http://jsfiddle.net/wnfUC/
Style:
#pageNavigation {
background-image: url('../Images/TIBC_Base/nav-bg.png');
background-repeat: repeat-y;
margin:5px 0;
padding:5px 15px 5px;
min-height:125px;
}
#pageNavigation_bottom
{
clear:both;
background-image: url('../Images/TIBC_Base/nav-bg_bottom.png');
background-repeat: no-repeat;
margin:-5px 0 0 -1px;
min-height:8px;
}
#pageNavigation .navContent{ width:240px; margin:0 -10px; }
#pageNavigation ul { list-style-type: none; margin:0; padding:0; }
#pageNavigation ul li { display: block; height:57px; border-top:0px #E1E1E1 solid; border-bottom:1px #E1E1E1 solid; text-align:center; overflow:hidden; }
#pageNavigation a {
color:#485963;
font-size:16px;
text-decoration:none;
text-shadow: 0px -1px #EEEEEE;
display:block;
height:57px;
}
#pageNavigation a:hover
{
background: #FAE2AD;
color: #485963;
}
#pageNavigation a.NavigationSelected
{
color:#F9F9F9;
background: #A5B5BE;
text-shadow: 1px 1px #485963;
font-weight: normal;
}
HTML
<div id="pageNavigation">
<ul class="navContent">
<li>Services</li>
<li>Analysis</li>
<li>Strategic Planning</li>
<li>International Market and Competitor Research</li>
<li>Budgeting and Forecasting</li>
<li>International Cultural Liaison</li>
</ul>
</div>
You can use CSS table layout (not HTML table element, eh!) to achieve this: http://jsfiddle.net/PhilippeVay/ZszJm/
ul is displayed with the same algorithm as a table, links with the same algorithm than cells and here li are displayed as rows as it's vertical. And then you can play with vertical-align as much as you want :) (in your case middle value)
You can add table-layout: fixed to ul and then browsers will use the other algorithm for displaying tables, the one that doesn't try to adapt widths and heights of cells to their content but will stick to what CSS rules say.
Compatibility: IE8 and above. It won't be centered in IE7 and 6, not a big deal.
EDIT: with this method, you don't need to know in advance which items are longer than others. Browsers will figure that.
Vertical alignment of text is generally accomplished using line-height: http://jsfiddle.net/Shmiddty/wnfUC/1/
#pageNavigation a {
...
height:57px;
line-height:57px;
}
#pageNavigation a.two-line{
line-height:20px;
padding-top:10px;
}
Note that I added the class two-line to the anchor element that spanned two lines.
You could use this method: http://css-tricks.com/vertically-center-multi-lined-text/
There are also some other methods you could use, but they require extra HTML markup, which this one does not.
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.