I just put back the social sharing buttons to my home page and they look really terrible together :)
You can take a look at it here on the bottom of the page: http://www.comehike.com
How do people usually make them fit so natural together? Mine look so disordered and unprofessional. Is there anything that can be done with styling?
Thanks!
Looking at your code you'll likely have to add individual classes to each one, as they are all in different elements. There are a few approaches, absolute positioning, display:inline but I'd recommend floats
add a ul element and each of your 'share buttons' as an li child element of that ul
<ul class='shareLinks'>
<li>facebook here</li>
<li>twitter here</li>
</ul>
then your css can look something like this
ul.shareLinks { overflow: auto; }
ul.shareLinks li { list-style: none; float: left; margin-right: 5px; }
you can obviously edit the css how ever you wish, the main point is the float: left the overflow: auto; on the ul is a fix for the floated elements not having a real height.
Related
I have tried to make a tabbed navigation element, which looks like this in html:
<ul class="nav">
<li class="selected">Selected Tab</li>
<li>Not-selected Tab</li>
<li>Not-selected Tab</li>
</ul>
You can see a stripped-down version of what I've made here.
My question is: why is the ul not big enough to fit all the li elements? It seems to not be influenced by any border or padding added to the li elements.
Instead of
.nav li {
display: inline;
top: 9px;
}
use
.nav li {
display: inline-block;
}
Demo
Don't use inline if they are blocks, because then they don't generate a box block that pushes <ul>'s bottom.
And don't use top: 9px, because that moves <li> downwards, outside <ul>.
the problem is you're putting padding on the li's while they're still inline elements. Additionally you're using top: 8px which is further complicating the problem. There are a few options to fix. 1: You make the li's display: inline-block and remove top: 8px, OR 2. You float the li's (and use a clearfix on the ul). Hope that makes sense.
option 1 demo
option 2 demo
Is it possible to float an image to the left of an HTML list. Well it seems possible, but can I make it look nice with the bullets not on top of the image? I need the bullets to line up with the text above and below the list.
Here's a jsfiddle with a heading and list underneath:
<img src="http://images.ucode.com/facebook.png"/>
<h1>A heading</h1>
<ul style="float: left">
<li>a point</li>
<li>another point</li>
<li>third item</li>
<li>trying to</li>
<li>get past</li>
<li>floating graphic</li>
</ul>
I love how the list flows around the image. Works great except the bullets for the list items that are to the right of the image should be aligned with the left side of the header.
Another solution would be to add position relative to the list and then give a left: value(ie 20px).
Just a minor addition to Mr Alien's great answer, adding a margin-right to the image will not only push the list but also text that might exist before or after it- the result might seem misaligned.
Here's a fiddle with the relative position approach:
https://jsfiddle.net/egeo/zgf4un7d/1/
img {
float: left;
}
ul li {
position: relative;
left: 20px;
}
By default, the list-style-position is set to outside so make it inside
ul {
list-style-position: inside;
}
Demo
Though, there's a catch here, using inside is appropriate when dealing with single/multiple word list items which do not wrap, as the wrapped text will move below the bullet which you might not need, in that case, remove list-style-position: inside; and use margin on your img tag.
A little padding to the right of the image should be ok?
img {
float: left;
padding-right:10px;
}
#Mr. Alien answered well. Another thing is to add margin/margin-right to img;
http://jsfiddle.net/gQZ3F/10/
I have just added a wrapper to your ul which has float left
div.right {
float:left;
}
take a look
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;
}
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;
}
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