I'm using the following template.
Click here
I need to reduce the height of each item on the list from left-sidebar so that they can all be visible. I need to show 25 items total.
No matter what I change so far, I does not affect the look of the list.
Can you help?
You could add this to your CSS:
.nav li a{
padding:0px 15px;
}
However note that this will overwrite padding for all <a> tags that are child elements of <nav> and <li>
Related
I have the following page with some HTML / CSS : http://jsfiddle.net/Hf6dB/1/
For some reason the buttons of the toolbar at the top of the screen have a margin right. Margin left, top and bottom is ok because the container has a padding, but where is the margin right from ?
Also in the real version of the page, which you can't see on the fiddle bbecause there are no icons, i have a similar problem in each of the menu entries :
<li>
<div class="draggable">
<input id="tb-btn-search" title="Search" type="button">
<p>Search</p>
</div>
</li>
When the mouse is out of the button, the <p> has a width that gets animated from 0 to something like 2 using CSS transitions. For some reason, when the width of the <p> is zero, the icon is not centered anymore because, here too, there is an extra margin that comes from nowhere.
Would this be related to the usage of inline block display property ?
Thanks for yor help !
display: inline-block creates a gap between elements. Further reading here.
Edit:
bjb568 mentioned in the comments re 4px gap:
NO! 4px gap depends on the font and size. You cannot use negative margins to solve this, since you don't know how big the gap is. -4px is a magic number, and thus should be avoided. Use font-size: 0, instead
You can delete inline-block in the <ul> and add float: left; to the li
#toolbar ul,
#toolbar li
{
display: inline-block; /* delete this
}
#toolbar ul,
#toolbar .tb-separator,
#toolbar li
{
float:left;
}
Updated JsFiddle
The line breaks between the elements are treated as whitespace, because the elements are inline-block, so they are part of a line of text. You can solve this by removing spaces and line breaks between the elements. If you want to keep the indenting in your document, you can choose to add a line break inside the element itself:
<outer
><inner
></outer>
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 making a NavBar out of images.
The images are inside a list item li which is inside an unordered list ul which is inside a div.
The problem I'm having is that when I make an unordered list displaying inline, it doesn't align to the left of the div like it should, it starts about 40 pixels in. I tried setting position:absolute;left:0; on the ul but it doesn't make a difference.
position:absolute; is supposed to make it align relative to its parent element, but it's not doing that.
Here is a JSFiddle displaying the problem.
(The red block is the div, it's red just to show you where the side of the div is so you can see how far off the ul is)
Is there something I'm missing? Why does the image start 40 pixels to the right of where it should?
CSS
#navbar ul{
position:absolute;
left:0px;
margin:0 0 0 0;
padding: 0 0 0 0;
}
You need to add padding: 0;
#navbar ul{
padding:0;
}
Also, 2 things you might want to look into that will cause you similar problems:
1) Inheritance
Inheritance is something where if you don't specify certain values, it will simply take the value of the same elements from the parents.
2) CSS reset
All browsers have their own default values for certain things. you want to make sure that you reset some of those values, if you want full control. It will likely impact the speed of your website loading minimally.
ul and other lists have 40px padding-left by default, in older IE it is margin, so just remove padding and margin.
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/
I am trying to solve this issue for a few days now. I am unable to place the Child1, 2 and 3 between the 25px orange spot. The parent and child menu is a CSS based ul - li menu, where I set the <a> as an inline-block and set the width and height but it still ignores those parameters. I am out of ideas on how to solve this matter. Thank you for your help in advance.
Due to the length of the code I decided to upload the "whole" source code:
source.zip
The problem is that your <a> tags on the sub-menu have the padding:15px from the main menu. You will need to set it to 0. You can then set the line-height of the element to match the orange bar's height to center it vertically.
Add this to fix it:
#header .cssMenuA a{
padding:0;
line-height:25px;
}
It looks like the Child 1, 2, 3 a tags have padding applied to them, which is pushing them down past the orange. See screenshot:
Try removing the padding from the a tags (bodystyle.css, line 78), and reapplying it only to the parent menu items.
You have 15px of padding around all of the <a> elements in the nav list (including PARENT), but this also applies to the "Childs." Add the rule:
#header li li a {
padding-top: 0;
}
This may not look exactly like you want because the <a> is set at 25px high, but the font is smaller than that. Also add
#header li li a span {
line-height: 25px;
}