unordered list is not in center - html

i am making business company website, there is a menu bar at top of the page. Now this menubar contains four li tags (below code), these li sticks at left of the page. i want to make it to distribute equally horizontal. Help!
<div id="wrapper-menu">
<div id="menu">
<ul>
<li>home</li>
<li>about us</li>
<li>news</li>
<li>contact us</li>
<li>links</li>
</ul>
</div>
</div>

You need to make the li inline-block items, and don't forget to apply a text-align to the ul:
li {
display: inline-block;
}
ul {
text-align: center;
}
example here:
http://jsfiddle.net/evmDv/

I'm assuming with no other example that your problem is that you want them to be horizontal instead of vertical (you say they are all on the left). If this is not the problem then this answer will not apply.
You probably want something in your css along the lines of:
li {display: inline-block;}
You may want to look up exactly what inline blocks do but in a nutshell it means the block is not the full width of the screen but just wide enough and the blocks act like inline elements meaning you don't start a new line with each one.
You will of course want further styling to make it look good but this should do the trick I think.
http://jsfiddle.net/NqgZ4/ for a jsfiddle example.
As a followup to your comment to have them spread out then the easiest way is to apply a width to them.
li
{
display: inline-block;
width: 19%;
}
Note that I use 19% instead of 20% to avoid rounding issues that may cause the width to exceed the pixels (eg if the width available is 999 px then 20% would make each of them 200 pixels which would then add up to too much).
If you have a dynamic number of menu items then its a bit trickier and I'd start thinking about a bit of script to equalise them (by setting the widths dynamically) though there may be a pure CSS method that will work with variable number of items.
Updated fiddle: http://jsfiddle.net/NqgZ4/1/

Related

Stretching <a> tags across a sidebar while vertically aligning its contents to the center

I want to put a bunch of clickable links in a sidebar with a hover effect that covers the entire width of the sidebar. Some of these links also include an image that needs to be aligned so that it's vertically centered in relation to the text. Here's what I currently have:
As you can see, the hover effect and the <a> tag don't cover the entire width of the sidebar yet. That's bad because of big link targets are easier to click. I've tried tinkering with horizontally stretched CSS-based table cells, but then the text parts didn't stay aligned properly.
What's the proper way to do it? ~I could post my current HTML if it's helpful, but I was planning to rewrite my markup based on this answer's solution anyway.~
Edit: here's the relevant HTML snippet.
<nav id="sidebar">
<ul>
<li>Home</li>
</ul>
<header>Recently Added</header>
<ul id="recents">
<li><img src="http://media.radiantstreamer.net/stations/q2music.png" alt="Artwork"> <span>Q2 Music</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtmoclassic.png" alt="Artwork"> <span>Mostly Classical</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtpitrios.png" alt="Artwork"> <span>Piano Trios</span></li>
</ul>
</nav>
Putting display: block; on the relevant links should make them full width. Or if it doesn't, display: block; width: 100%;. width: 100% on its own doesn't seem to be much use on inline elements.
…And some positioning to fix the alignment, e.g.
ul li a {
display:block;
text-decoration:none;
position:relative;
}
ul li a span {
position:absolute;
top:50%;
}
Have you tried position: absolute; width: 100% (or something like that) on your links? That should make it the parent's full width.
How I solved it
First I made my <a> tags render as a one-row CSS table by setting them to display: table and its children to display: table-cell. You'll need to add width: 100% to the table tag to make it stretch horizontally. But then the text didn't align properly:
Adding a width: 100% to <span> containing the text does the trick:
Uh oh... the 5 pixels of left padding on my links are causing spillover on the right. The fix was fairly easy: wrap the link tags in another <span> tag and adjust the CSS display rules so that the new <span> renders as a table. Bam!
Summary
I've prepared a minimally working HTML5-compliant example for the benefit of future readers.

Making images take up all space available in a div

Say that I have images contained inside a list, as below.
<ul>
<li>
<img src="http://placehold.it/250x400">
</li>
<li>
<img src="http://placehold.it/250x200">
</li>
<li>
<img src="http://placehold.it/250x200">
</li>
<li>
<img src="http://placehold.it/250x400">
</li>
</ul>
This fiddle shows what the setup would look like on a page. Is it possible using only CSS to make the second and third list items take up space to the right of the first? If not possible within a list structure, what changes would I need to make to the HTML to make it possible? The solution would ideally work no matter how many images were present in the list.
edit: the image below shows the sort of thing that I'm looking for. The left is what I currently have (as shown in the fiddle), but I would like to have it look like the right hand side of the image.
You can use the float property and set li to float: left;
ul li {
float: left;
}
DEMO
I'd warmly recommend the following article about floats
Eplanation:
Adding a float property to these images basically sets their behavior to the following:
They will get block display type ( display: block; )
They won't take up as much space as block elements (or li) would normally do, but they will shrink to:
a size explicitly set to them (if there is such)
to a size that fits their !non-floated! content
If the floated element has space near a previously floated element, it will be displayed near it (on the same "row") rather then displaying it on the next "line" as block elements normally behave
On the other hand
I guess you are more like after a mosaic layout, to cover your available space regardless of image sizes.
This you can only accomplish with js. One of the libs I'd recommend are masonry
http://jsfiddle.net/VpcBY/5/
You need something like that?
ul li
{
float: left;
}
You can use the vertical-align property and set img to vertical-align: top:
img {vertical-align: top;}
Please view the DEMO.
Try this:
ul li {
list-style: none;
float: left !important;
}

How to horizontally align a ul element to center

I'm not able to align a menu, contained within a ul, to the horizontal center of its container. how to do that?
See a live demo of the menu on jsFiddle.
<li>AboutUs
<ul class="sub">
<li>About Square Innovations</li>
<li>Our Vision</li>
<li>Our Mission</li>
<li>Trainer Profiles</li>
<li>Fun In Our ClassRooms</li>
</ul>
</li>
You can address the ul element as an inline-level element within the page flow, while retaining its block-level characteristics (using the inline-block display value) — after applying this, it can be simply aligned within its container like any inline-level element, using text-align.
To implement this, add the following rules:
#container {
text-align: center;
}
ul {
display: inline-block;
}
Here's the updated demo.
Reference
display on Mozilla Developer Network
Disclaimer: Support for inline-block is somewhat limited nope! it's actually very wide by now, see the compatibility table on caniuse.com.
There is a very neath, fully cross-browser and dynamic 'trick' to achieve this, as long as the menu stays on one line. It is very well explained here: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
The inline-block often suggested for this problem is not very well supported in legacy browsers in my experience. To be honest, I never use it. I always go for the clever method that Matthew James Taylor describes.
Edit:
As requested I will briefly describe the technique.
Your html should look like a normal list of links, with an extra wrapping div around it. Something like this:
<div class="menu-wrapper">
<ul>
<li><a ...>link</a></li>
<li><a ...>link</a></li>
<li><a ...>link</a></li>
</ul>
</div>
Now the rest is css work. The steps are as follows:
Float the wrapper to the left and give it a width of 100% to make it take up the full viewport width
Float both the ul and the li to the left and don't give them any width to make them adjust to their content.
Give the ul a position: relative of left: 50%. This will make it's left edge move to the center of it's parent, and this means the center of the viewport.
Finally you should give your li a position: relative of left: -50%. This will make them move past the left edge of the parent ul and makes the center of the list of li's line up with the left edge of the parent ul. Since we made that edge the center of our viewport in the previous step, the menu is now effectively centered.
As I said before, all credits to Matthew James Taylor, and definitly check out his thorough explanation. The drawings he made make it much easier to understand.
edit
As requested I set up a little fiddle to demonstrate the technique:
http://jsfiddle.net/fDmCQ/
Change the margin on the <ul> to 0 auto and give it a width (~575px or larger).
jsFiddle example
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
width:600px;
list-style: none;
text-align: center;
}

In search for a perfect dropdown menu: stretching to full width, equal width items, pure CSS. Please help resolve a glitch

I'm trying to implement a menu with the following features:
horizontal;
equal width menu items;
menu items spread across the whole page width (not just crowd at the left side);
dynamic (css rules should not rely on predefined number of items);
drop-down second level with vertically aligned items;
pure CSS (no JS!).
This seems to describe a perfect menu as i see it.
I have almost succeded making it using the beautiful display: table-cell; technique ( tags are omitted for simplicity):
<ul>
<li>Menu item</li>
<li>
Expandable ↓
<ul>
<li>Menu</li>
<li>Menu item</li>
<li>Menu item long</li>
</ul>
</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
ul {
display: table;
table-layout: fixed;
width: 100%;
}
li {
display: table-cell;
text-align: center;
}
li:nth-child(even){
background-color: lightblue;
}
li:nth-child(odd){
background-color: lightskyblue;
}
li ul { display: none; }
li:hover ul {
display: block;
position: absolute;
}
li:hover ul li {
display: block;
}
The only problem is that submenu items appear full-page width and partially outside the browser window, forcing a horizontal scrollbar to appear:
Gah! StackOverflow won't let me post images. Test it out live on JSFiddle: http://jsfiddle.net/6PTpd/9/
I can overcome this by adding float: left; clear: both; to li:hover ul li. But when i do, submenu items have different widths:
Fiddle: http://jsfiddle.net/6PTpd/10/
...or width width: 15%;: http://jsfiddle.net/6PTpd/12/
Both fixes are ugly and resolve neither the equal width issue nor the horizontal scrollbar issue.
UPD While brushing up this post i've found some solution of the scrollbar problem: set li:hover ul width to 0. But this forces to spectify the width of submenu items in an absolute value. :( See http://jsfiddle.net/6PTpd/13/
Also, this solution may suck hard when the last menu item is expanded. Depending on the screen width, it may still blow the page wider than the window: http://jsfiddle.net/6PTpd/15/
Questions:
How do i make submenu items appear same widths as their parent and without enabling the horizontal scrollbar?
Is there another CSS technique that allows creating a menu with ALL the prerequisites described in the beginning of the post?
I've found a lot of examples, but each of them either is non-stretching (floats items to the left) or non-dynamic (uses sizes taken from a predefined number of items, e. g. width: 20% for each of five first-level items or, even worse, uses absolute sizes!).
This isn't the best way to do this, but here's your solution: http://jsfiddle.net/6PTpd/17/
The funny thing about CSS is that even the masters are always finding new things that you can do with it. It's an amazing language in that way. Which is why I gave you that fiddle, so that you could learn what you were doing wrong (It was mainly the absolute positioning, BTW). BUT there are also some loopholes that you should be aware of.
So let me explain why you probably shouldn't use the code in that JSFiddle. The first problem is that it uses display: none. That's a problem because screen-readers don't read text that isn't displaying. (more on that over here: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/)
The second problem is that it displays on hover. In a world where touch screens are becoming more and more prevalent, hover is no longer the best option.
You can still use it if you want to, just thought you should know about the drawbacks.
TL;DR: If screen-reader and touch screen support is an issue, then I would encourage you to search out another option.
There are a lot of ways to make a perfect menu either using HTML and CSS coding, especially if you are using HTML5 & CSS3, and you can find a lot of examples by searching the internet.
The second easy way is by using programs which will make the coding easier for you like Sothink DHTML Menu, or http://css3menu.com

Stretching <a> tag to fill entire <li>

Here's a simple menu structure:
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>
I want the <a> to be stretched so that it fills the entire <li>. I tried using something like width: 100%; height: 100% but that had no effect. How do I stretch the anchor tag correctly?
The "a" tag is an inline level element. No inline level element may have its width set. Why? Because inline level elements are meant to represent flowing text which could in theory wrap from one line to the next. In those sorts of cases, it doesn't make sense to supply the width of the element, because you don't necessarily know if it's going to wrap or not. In order to set its width, you must change its display property to block, or inline-block:
a.wide {
display:block;
}
...
<ul id="menu">
<li><a class="wide" href="javascript:;">Home</a></li>
<li><a class="wide" href="javascript:;">Test</a></li>
</ul>
If memory serves, you can set the width on certain inline level elements in IE6, though. But that's because IE6 implements CSS incorrectly and wants to confuse you.
Just style the A with a display:block;:
ul#menu li a { display: block;}
display:flex
is the HTML5 way.
See Fiddle
Useful to hack frameworks buttons, or any other element, but you may need to remove their padding first, and set them to the desired height.
In this case, angular-material tabs, which are kind of tricky to make them work as a "standard" website nav.
Notice that the pointer changes as soon as you enter the tab : the < a > are now stretched to fit their parent dimensions.
Out of topic, notice how flawless angular-material displays the ripple effect, even on a "large surface".
.md-header{
/* THIS IS A CUSTOM HEIGHT */
height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
md-tab{
padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
a{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
UPDATE 2018
AngularJS Material throws a (gentle) warning when using flex on button elements, so don't assume all HTML elements/tags can handle display:flex properly, or have a homogeneous behaviour across browsers.
Remember to consult flexbugs in case of unexpected behaviour in a particular browser.
A different approach:
<ul>
<li>
<a></a>
<img>
<morestuff>TEXTEXTEXT</morestuff>
</li>
</ul>
a {
position: absolute;
top: 0;
left: 0;
z-index: [higher than anything else inside parent]
width:100%;
height: 100%;
}
This is helpful if the link's container also has images and such inside of it, or is of potentially different sizes depending on image / content size. With this, the anchor tag itself can be empty, and you can arrange other elements inside of anchor's container however you want. Anchor will always match the size of the parent, and will be on top, to make the entire li clickable.
I used this code to fill the width and height 100%
HTML
<ul>
<li>
<a>I need to fill 100% width and height!</a>
</li>
<ul>
CSS
li a {
display: block;
height: 100%; /* Missing from other answers */
}
Just changing the display property to block didn't work for me.
I removed the padding of li and set the same padding for a.
li a {
display:block;
padding: 4px 8px;
}
<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>
</body>
</html>
You should try to avoid using a class on every tag so your content remains easy to maintain.
Use line-height and text-indent instead of padding for li element, and use display: block; for anchor tag
I wanted this functionality only on tab view i.e below 720px, so in media query I made:
#media(max-width:720px){
a{
display:block;
width:100%;
}
}
If your <li>s had to have a specific height then your <a>s would only stretch to the <li>'s width and not the height anymore.
One way I solve this is to use CSS display:block and add paddings to my <a>s
OR
wrap the <a>s around the <li>s
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>