I have the following list in HTML:
<ul>
<li><span class="button">A</span></li>
<li><span class="button">B</span></li>
<li><span class="button">C</span></li>
</ul>
The accompanying CSS. Understand that I want to use differently sized buttons for different lists.
.button
{
background: blue;
padding: 0.5em;
}
The li's do not expand to fit the spans inside of them. This has the effect of throwing off the margin of the whole list, which will be especially important when I turn the list into a horizontal menu.
Also, the reason I have styled spans inside the li's instead of styling the li's themselves is because some of those spans will actually be links.
This great article is drilling into your problem and showing what a good practise is: http://css-tricks.com/keep-margins-out-of-link-lists
That is, if I understood what you were aiming for, your question could be a bit clearer. :)
You must declare the span as an Blockelement with display:block;
Is it the solution for you?
Related
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I have the following HTML:
<ul class="baseList">
<li>
<ul class="baseListColumn">
<li>10.09</li>
<li>My title is here</li>
<li>Author</li>
</ul>
</li>
</ul>
with the following css:
.baseList {
border: 1px solid #F00;
}
.baseListColumn {
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
}
My problem is, that this centers the content of every li of baseListColumn and gives every column the same width. I would like to make the columns fit it's content apart from the last li element (Author) and float the content of the last li element right.
This is what happens with the current code: http://jsfiddle.net/aLGRJ/1/
10.09 My title is here Author
asdfasdfasdfasdf My title is here abababa Author
In fiddle you can even see what happens if the width of the root li is big enough while the equal splitting of the columns is too small to contain some of the content.
This is what I would like to have:
10.09 My title is here Author
asdfasdfasdfasdf My title is here abababa Author
I can't guarantee that all the columns will always have the same length otherwise I would use absolute positioning and at the same time I don't want to reserve too much unnecessary space for the first column for example. Note I'm planning to use this for lists with more columns than just 3 as well.
Is this one of the cases where a table would be the better solution? Anyways I hope someone can help me, and if there is a better solution to this, I'm always open for suggestions.
It looks like a table would be a better solution, not because of the display properties, but because of the nature of your content (remember, organizing content is still the responsibility of HTML).
Take a look at this page.
While most of the points are generally agreeable, I tend to focus on two things:
Don’t Use Faux Tables (<p>, <div>, etc.)
Tables Should Be Filterable & Sortable (If more then just a few rows)
You can generate all of the CSS yourself... or, use your favorite ECMAScript library to make short work of styling.
I'm running into a weird issue that I've never noticed before. I have the following code:
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li>
<li>
No
</li>
<li>
No
</li>
</ul>
</div>
Very simple block of code. Ignore the second no, as it's literally only there to give me a third li to help me figure this out. Now, here's the CSS...
div.feedback {
position: relative;
}
span {
float: left;
}
li {
display: inline-block;
padding: 0;
margin: 0;
border-left: 1px solid #000
}
Now, here's what's happening:
See the extra spacing that's seemingly coming from nowhere? I moved to border-right just to test it, and got even more inconsistent results:
Now, the 3rd LI has 0 padding and margin, as it should. The other two still have a spare space.
Lastly, the browser comprehends the proper height and width of the li, and attributes no margin or padding to it. According to the browser, the text should be smashed up against the border, as I also expect.
Can someone please explain what this extra 3-5 pixels of spacing is on the right of the text?
That's because linebreaks are treated as a space in HTML. You've specified your inner elements to be inline-block, which means that spaces between them are displayed.
You can either:
Set the font-size on the parent to 0, and then back to normal on the <li>,
Simply eliminate the linebreaks between <li>s.
A third (lesser) option exists, it's the use of float.
float was originally meant to allow for elements to be pushed to the edges of the container, while having text flowing around it freely (like images in a newspaper). That feature was exploited used for layout as well, when people discovered it would make block level elements stack horizontally.
Using float would mean you need to clear after yourself, by either using a clearfix, or having an element with clear: both set on it.
This option is lesser, because much like tabular layouts, it's not the original purpose of float, implementation may differ between browsers and between time periods, but most importantly, it adds the overhead issues of clearing. (So stick with display: inline-block if you can help it!)
It's from white space in your code. See this jsFiddle example
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li><li>
No
</li><li>
No
</li>
</ul>
</div>
Somewhere you have a display:inline-block.
The inline-block display behaves like this. It shows any space in the code and newlines as spaces.
You have to either manually remove spaces and returns in the HTML or to change the display to something else.
I am debugging one tricky alignment problem. Here is the jsfiddle. The problem is that the Rating "Thumbs" Up & Down are present in a single image. I am using background-position to generate different images.
The visual looks is looking well, but I need to show all four features in one line with background images along with them.
Does anyone know how to fix it ?
Ok from what I think I understand you want to have your rating class in a seperate span to the actual text in the li.
<li><span class="rating up"></span>Courteous Staff</li>
Then set the span to display: inline-block; and you should get what I think you're after.
http://jsfiddle.net/spacebeers/U2Wax/35/
You need to do a bit more work to get it aligned right but it will give you a good idea.
have you tried adding this css style?
white-space: nowrap;
On a website i'd like to show products in the following structure:
[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]
Resulting in a product display such as:
Now, the thing is that there are multiple products on display, just like this one, but sometimes they are aligned next to one another.
The problem is that i would like to make the price appear at the same position (vertical wise) in all blocks. Of course i see only one solution at first - overflow:hidden on the detail text / feature listing. But then i'd end up having content cut off, right?
Another problem is that there should also be a more>> button (expander) that appears if the UL/LI-listing is longer than 4 entries. Just like this:
I thought this through quite often, but i seem to find no proper solution. For one i will never know if an LI will be multiline, as the content might be longer or shorter - and i cannot calculalate this serverside, as the font width/height might vary.
I'd appreciate any constructive input here.
Thank You!
As long as you have a fixed width you could use inline-block mixed with negative margins : http://jsfiddle.net/bymaK/11/
The sad thing is that it works in Chrome, Opera and IE 9 but completely break Firefox as it's management of with:0 and negative margin seem buggy (Added issue #709014 to Bugzilla following this post). The solution is to detect this browser and set the width to 1px for it...
It create a small bug as when you resize there is 1 pixel where the price warp to the next line but not the block but it's a lot less visible that the result otherwise :
<div id="container">
<p>texttexttext</p>
<ul>
<li>texttexttext</li>
<li>texttexttext</li>
<li>texttexttext<Update/li>
<li>texttexttext</li>
<li>more »</li>
<li class="more">more text</li>
<li class="more">Even more text.</li>
</ul>
</div><p class="price">$3993.99</p>
.price
{
height:40px;
display:inline-block;
margin-left: -200px;
margin-right: 200px;
vertical-align: bottom;
font-weight: bold;
}
#container
{
display: inline-block;
margin-right:10px;
position:relative;
width:200px;
padding-bottom:40px;
vertical-align: top;
}
ul
{
list-style-type:disc;
margin-left:30px
}
li.more
{
display: none;
}
$(function(){
$('a.more').click(function(){
$(this).parent('li').hide().nextAll('li').show(200);
});
});
Maybe have the containing div set to position: relative, and then price set to position: absolute; bottom:0? That way, no matter how much text is in the box, the price is always at 0 (or whatever number you set).
Here's a rudimentary example: http://jsfiddle.net/PFwJ6/1/
You might want to use javascript to find the height and display a "click to view more link".
First, create a div over the price div that would contain your "click to see more" link and set it to display:none. Then you can use offsetHeight in javascript to find the height of the div. If the height is over what is acceptable then you would set the div to display:block. That means you can set all of your containing divs to the same height with the price div pinned to the bottom using positioning.
I'm sorry I don't have concrete code for you. I might be able to put some together shortly. But this should point you in the right direction.