So I used the example given by by w3schools to create a div with a list in it.
http://jsfiddle.net/TBsx8/
#links li {
height: 32px;
width: 100%;
display: block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
is the relevant part.
You can see that everything works fine (I took a random twitter icon for all of them in this example)
Problem is, I want them inline. So, I change it to display: inline;. no problem, right? nope, it makes eveything disappear. inline-block does not do anything either. any solutions?
Edit: sorry, did not make this clear: I want the links horizontally.
inline-block works just fine. You've got your wrapper DIV fixed to 4em in height though. So it gets cutoff:
Fiddle with inline-block and fixed height commented out:
http://jsfiddle.net/TBsx8/2/
For horizontal layout set width of LIs: (width:100% causes the LI to consume all horizontal space available)
#links li {
height: 32px;
width: 32px; /* <<----- */
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
http://jsfiddle.net/TBsx8/8/
Add float:left and width:32px, this will work
You can set the width to 32px and display to inline-block and it should work. Right now you have the width at 100% which will fill in container.
the width of your li's should not be 100%, try an exact width.
code block using 20% width that works:
#links li {
height: 32px;
width: 20%;
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
As an adjunct to the calls for you to use display:inline-block;width:32px, it's worth saying that the reason for this is that you can't apply a width to any element that is displayed inline. Ever.
Alternatively you could use display:block;width:32px;float:left on the li, and overflow:hidden or a clearfix on the containing ul/ol/dl to prevent the margins from collapsing due to the floats
Related
I cant figure out why my list is not vertically aligned. I set ul and li to be 100% height of parent, but it seems to be only 100% of itself.
I dont want to use any margin or padding to make them vertically aligned. How can I force it to be 100% of parent so it would be vertically in the middle?
http://jsfiddle.net/qS5A6/
#nav li a{
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 15px 20px;
line-height:90px; //add this
}
defining your height relative to the parten usually just works with elements that have position:absolute. The reason is, that the height of surrounding elements is usually determined by their children. If you make the childrens height relative to the parent you have an endless loop :)
So using this code would make your li have 100% height but the height of your #nav won't change anymore with increasing length of the ul.
http://jsfiddle.net/qS5A6/5/
Using display: table instead of your inline-block approach would keep that functionality
http://jsfiddle.net/qS5A6/6/
Maybe you can use table-cell for li:
#nav ul{
display: table;
height: 90px;
}
#nav li{
display: table-cell;
height: 100%;
vertical-align: middle;
}
this works fine for ie8+
if you use:
#nav li a{
line-height:90px;
}
there is some problem, you can't have more, than one line in the tag
I have ul where li elements are floating left. I want to align those li elements to center of ul.
Goal:
======>>>
My try:
My try always result this
Jsbin:
http://jsbin.com/EGoVAg/19/edit
EDIT:
width of #wrapper is not fixed ! I use 320px just to show you result pictures !
Firstly, remove the float: left; from .widgetPhotoGallery li.photo. display: inline-block (which is already included) is all you need to correctly position the elements:
.widgetPhotoGallery li.photo{
background-color: blue;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
Then all you need to do is simply give your ul some padding (36px evens out both sides):
.widgetPhotoGallery .photogallery{
background-color: lime;
list-style: none;
padding:0 36px;
margin: 0 auto;
text-align: left;
}
Working JSBin demo.
On a side note, you don't need any of those !important declarations. The styling is identical without them. If you need to override existing styling you should look into CSS Specificity instead.
Your only option is to set a fixed width and do:
#wrapper {
display: block;
margin: 0 auto; /* center it */
width: XXX;
}
You can use media queries to set the fixed width at certain breakpoints, if you like, or you could use max-width instead of width
http://jsbin.com/EGoVAg/23/edit
You may not like this answer (judging by your large font, bolded comment about #wrapper not being a fixed width), but there is no other way to achieve what you want.
You have to set a fixed width to the ul. So in your example, each li has 118px of width and 2px of margin on each side. To fit two li's in a row set this to .widgetPhotoGallery .photogallery:
width: 244px;
Notice that the background will become smaller, so you can simply put it to .widgetPhotoGallery .widgetContent
.widgetPhotoGallery .widgetContent {
background-color: lime;
}
Here's the update JSbin.
I have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!
My header holds a logo image as well as my nav element. I would like my nav to sit at the bottom of the header, but without using absolute positioning or specific top/left pixels because I would like this to be responsive.
Here is my code so far
http://jsfiddle.net/Aiedail/86ZGd/
I had tried adding like a
nav{margin-top: 50%;}
but that used the full page height rather than the containing div height.
Any suggestions or help would be appreciated.
I do think the best way for you to solve this, is to set your parent container to
position: relative;
and in your nav, use
position: absolute;
bottom: 0;
right: 0;
this way, your nav is always in the rightbottom corner of your header, but your header is still relative, so you don't lose the responsiveness.
JSFiddle Here
Basically, I took your logo and the nav and made them both display: inline-block; Removed the float styles.
Then you can use the vertical-align: bottom; for the nav element.
I forked your jsfiddle here http://jsfiddle.net/tQg8d/1/
img{
#extend .layout;
padding: 10px;
width: 30%;
height: auto;
max-width: 300px;
display: inline-block;
}
nav{
position: relative;
margin: 0;
padding: 0;
width: 69%;
height: auto;
border: 5px solid $red;
bottom: 0px;
display: inline-block;
vertical-align: bottom;
I also had to make the width of the nav a little smaller so changed it to 69% so that it shows up to the right of the logo. Might be because of the border.
Hope this is will help, if like to increase header height and and nav width may fine for you
nav { width :100% }
and
header { max-height : 200px; }
I would honestly suggest you follow the position:absolute model that Jamie detailed, but if you want a different way, you can use some negative margins.
For this, though, you need to be able to specify the height of the nav element (use ems, as they work better with responsive designs).
So you would just clear the float after the image--then you can set the top margin to -xxx (whatever the height of the element is).
Here is an example:
http://cdpn.io/bfoyj
Not as pretty as using the absolute positioning, but also works.
I have a sidebar with a set width and height. The problem is, it's supposed to be on the right but it takes up space on the left too like a block. However, I've set the display to inline but that doesn't seem to fix the problem. How can I make the div take up no space on the left?
Part of the CSS:
div#sidebar {
float: right;
width: 256px;
height: 500px;
display: inline;
clear: none;
}
JSFiddle for the whole page: http://www.jsfiddle.net/9tW2U
The width of either #sidebar or #mainbox is 3px to big to fit next to each other in #page. Take 3px of the width of #sidebar or #mainbox and it will fit.
By the way, display: inline doesn't have anything to do with it because you are allready using floats.