I am using the following (simplified) code to vertically center a hyperlink within a UL. I know it may appear strange that I am applying the style to the hyperink rather than the li, but I require the entire list element to be clickable.
My code works just as intended, however as you can see on this jsFiddle the vertical centering is a little off.
Can anyone advise why this is? Thanks in advance.
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}
The line-height on your "ul" is whats moving the link up and down, if you increase it to about 120px it centers it.
Get rid of display:inline-block; on li a.
Demo
Related
I'm trying to create a navigation menu for my website, with the links aligned horizontally near the top of the page, and I want each link to have a short description underneath. When a user clicks on either the main link text or the description underneath, it should take them to the right page. Additionally, each menu item should have a triangle-shaped icon as the bullet. This is a picture of what I'm trying to achieve.
I can make a list align horizontally when it's just one line. But it breaks down when I try to add more.
<nav id = "header-navigation">
<ul>
<li>
<a href="/">
Home
<span class = "subnavigation">Foo!</span>
</a>
</li>
<li>
<a href="/contact">
Contact
<span class = "subnavigation">Bar</span>
</li>
</ul>
</nav><!-- header-navigation -->
And in the CSS:
nav#header-navigation {
margin-top: 160px;
display: block;
}
nav#header-navigation ul li:before {
content: url("../images/main-navigation-bullet.png");
vertical-align: top;
}
nav#header-navigation ul li {
display: inline;
text-transform: uppercase;
min-height: 22px;
}
nav#header-navigation ul li span.subnavigation {
display: block;
color: #999;
font-size: 90%;
margin-top: -10px;
margin-left: 15px;
}
This is what I get.
I've also tried putting a float: left on nav#header-navigation ul li, but that causes the list items to float all over the place, like to the top of the screen, outside of the containing div where they belong.
Another problem I've found is that Chrome doesn't display the vertical-align: top; attribute correctly, so the subnavigation text displays in the wrong place on that browser.
Is there a way to get this to work across browsers, or is this still the sort of thing that's best done using images?
It appears the only changes you need are:
nav#header-navigation ul li{
display: inline-block;
}
nav#header-navigation ul li a{
display: inline-block;
vertical-align: top;
}
And get rid of
nav#header-navigation ul li span.subnavigation {
margin-top: -10px;
margin-left: 15px;
}
After making these changes, it appears correctly in Firefox and Chromium on Linux Mint 15.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
When I have an unordered list formatted as inline-blocks, the last list element in the list appears to have extra top margin if the other elements have any block content. Take a look at this HTML:
<div id="report_builder">
<ul id="report_layout_1" class="report_layout ui-droppable">
<li rel="recid">Id
<div><input type="text" class="report-column-value"></div>
</li>
<li rel="street1">Address
<div><input type="text" class="report-column-value"></div>
</li>
<li>
Last Field
</li>
</ul>
</div>
Here is the CSS:
#report_builder li {
font-size: 8pt;
}
#report_builder > ul {
float: left;
}
.report_layout {
height: 150px;
}
.report_layout > li {
display: inline-block;
padding: 5px;
margin-left: 2px;
border: 1px solid #ccc;
border-top: 10px solid #ccc;
height: 100px;
background-color:#fff;
}
.report_layout > li:last {
cursor: default;
}
.report_layout > li a {
cursor: pointer;
}
.report_layout > li:nth-child(even) {
background-color:#eee;
}
#report_builder input.report-column-value {
width: 95px;
}
Why does that last list element drop down? Here is a fiddle to demo what I'm doing.
It is weird, but you should force your list items to align to the top using vertical-align: top;. See working version on jsfiddle.
That's because inline-block elements will align as inline, i.e., siblings will use the baseline as the alignment reference.
Elements with inline-block set on them render with a 4 pixel margin to the right.
See this.
It is an issue with the white space between the <li> elements. If you remove the white space, the issue will be resolved.
You could make the li float left and display: inline. They are lined up in your jsfiddle then.
http://jsfiddle.net/eHmtR/1/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Navigation hyperlinks only work when mouse is on the text
Can you set a link to the whole width of an < li > instead of just where the text is?
This is what I mean, I want the user to be able to click on anywhere on the button and go to the link and not just the text: http://jsfiddle.net/b7S4L/
One of the problems is that I cannot use display: block; because I have a number after the < a > link for example (1)
Don't style the LI at all, (other than float:left and clearing padding, marging and list-style-type) if needed. Put all styling on the A (and use display:block).
I don't want the number on the right to be on a seperate line that's
the problem, it should be on the right of the Text
I think I understand what you're trying to do here. Though, I'm not sure because your question has been quite confusing..
First, do set display: block on the a. That is the right thing to do here.
Then, move the number inside the a, and add a span inside:
<li class="cat-item cat-item-147">
<a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indlæg i kategorien Food">
<span>Food</span> (4)
</a>
</li>
Then, some extra CSS is needed. You should merge the new CSS with what you already have - for the demo, I've added it within the HTML pane for simplicity (marked with <!--new css right here-->):
http://jsfiddle.net/thirtydot/b7S4L/3/
div.gg_newscats li a {
display: block;
padding: 16px 0;
color: #333
}
div.gg_newscats ul li {
padding-top: 0;
padding-bottom: 0
}
div.gg_newscats li a span {
color: #cc0014
}
div.gg_newscats li a:hover {
text-decoration: none
}
div.gg_newscats li a:hover span {
text-decoration: underline
}
The messing around with span and :hover is to keep the colour and underline exactly as you had it.
Anchor tags by default are inline boxes, which means that they don't fill their parent entirely (they don't take all the space) and they shrink only to fit their content. Thus you should use this CSS to make'em fill the space of li element:
li a
{
display: block;
height: 100%;
}
Also keep in mind that you should remove any padding from the li elements and remove margins of a elements. This way, border of anchor tags meet borders of li tags. For an example, look at links of Thought Results.
One solution I tend to use is to make the <a /> element within a <li /> element blocklevel with
display: block;
After that removing any padding you specified on the <li /> element and add it on the <a /> element instead and you should get the same visual output, but with the entire <li /> as a link
While you can manage this with jQuery, you can also use simple CSS for most browsers:
<style>
ul { width: 200px; background: #ccc; }
li { line-height: 3em; }
a { display: block; width: 100%; height: 100%; padding: 5px; }
</style>
<ul>
<li>This is a link</li>
</ul>
Add display:block; to the style and you're all set!
EDIT
Eh, didn't see the jsFiddle example. If you remove the top/bottom padding from the LIs and put it on the As, plus put the count in a SPAN within the As, these rules will achieve the desired result:
div.gg_newscats a {
display: block;
height: 100%;
padding: 10px;
}
div.gg_newscats a span {
color: black;
}
div.gg_newscats ul li {
float: left;
font-size: 13px;
margin-left: 2%;
margin-top: 2px;
text-align: center;
width: 30%;
padding: 2px;
}
Sample HTML:
<li class="cat-item cat-item-148">
<a title="Vis alle indlæg i kategorien Electrical" href="http://test.vps.graenseguiden.dk/newscat/electrical/">
Electrical
<br>
<span>(1)</span>
</a>
</li>
Edit 2
new code... a lot simpler... only thing that didn't go the way I liked was that the text-decoration of the link had to go.
.cat-item
{
padding: 0px;
}
.cat-item a
{
padding: 13px 0px 13px 0px;
}
.cat-item span
{
margin-left: 5px;
color: black;
}
.cat-item a:hover
{
text-decoration:none;
}
I had to change the markup just a little (put the numbers in a span) but other than that it wasn't too much
demo here: http://jsfiddle.net/ZW6uV/1
had to tack on !important because of a conflicting imported style sheet.
Edit
Readers Digest version: Don't put your padding on the <li> ... ever. Put padding on the <a> within the <li> and then it will fill the empty space and have the same effect but be able to handle the click also. -snip-
Yes just remove any padding from the LI element and push out the padding as needed on the anchor tag
<li class="link-wrapper">
<a href="http://this.com" >Go Here</a>
</li>
CSS
.link-wrapper{
margin: 0;
padding: 0;
}
.link-wrapper a{
display: block;
padding: 3px 5px;
}
Since you are using jQuery, you can do it this way:
$("li.cat-item").click(function () {
$("a", this).click();
return false;
});
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>