[css-d] Aligning elements in a 'grid'
Hi all, I have a series of elements (marked up as a UL) that I'd like to display in rows. Each LI has the same width, but a variable height. I'd like a solution for the case in which there are a fixed number of 'columns', and when the number of columns is variable; for the latter, each LI is a fixed width, but the UL's width is variable. Floats aren't suitable for this, due to the variable heights involved. I don't want to add a containing element to represent each row, partly because it's not very 'clean', but also because that isn't possible in the 'variable number of columns' case. Inline-blocks are almost perfect for this scenario (even IE issues can be hacked around) but whitespace then becomes an issue: such space between elements has an effect on the layout. Is there either a solution to the inline-block/whitespace problem, or another approach that will achieve the same layout? Example here: http://www.fiveminuteargument.com/layout-testing.html Note that, in this example, I've removed whitespace around elements in the inline-block example in order to demonstrate the desired layout. But I'd like a solution that doesn't require that. Thanks everyone, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning elements in a 'grid'
On 11/26/10 3:18 AM, Bobby Jack wrote: Hi all, I have a series of elements (marked up as a UL) that I'd like to display in rows. Each LI has the same width, but a variable height. I'd like a solution for the case in which there are a fixed number of 'columns', and when the number of columns is variable; for the latter, each LI is a fixed width, but the UL's width is variable. [...] Inline-blocks are almost perfect for this scenario (even IE issues can be hacked around) but whitespace then becomes an issue: such space between elements has an effect on the layout. Is there either a solution to the inline-block/whitespace problem, or another approach that will achieve the same layout? Example here: http://www.fiveminuteargument.com/layout-testing.html Note that, in this example, I've removed whitespace around elements in the inline-block example in order to demonstrate the desired layout. But I'd like a solution that doesn't require that. I don't have a CSS solution, and will likely have my head chopped off for suggesting this-- but I would note that removing all the closing /li tags gives the same result, and validates... :) Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning elements
Hi Peter, Thanks, floating left and changing some padding and margins have now produced the desired effect. I used an image just because its not a standard font. All the other fonts on the site are quite bland and the bog standard ones you find on most peoples computers. Haven't finished doing all the missing alt tags yet. I really don't want to use verdana or Geneva for the header as well. So next question: If i need to align two elements then the way to do it is to float one of them? Is there a css equivalent to for example align=absmiddle in HTML? Thanks Lisa On Wed, Nov 25, 2009 at 9:35 PM, Bradley, Peter pbrad...@uwic.ac.uk wrote: Float it left. At the moment it's sitting on top of the ul. I don't understand why you're using an image. By doing so you've just guaranteed that users with sight problems won't know it's there (especially since the alt attribute is blank) and that search engines won't index it. I would have thought that having the name indexed would be important to you on a site like this. The page looks nice though. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning elements
Lisa Frost wrote: Hi Peter, Thanks, floating left and changing some padding and margins have now produced the desired effect. I used an image just because its not a standard font. All the other fonts on the site are quite bland and the bog standard ones you find on most peoples computers. Haven't finished doing all the missing alt tags yet. I really don't want to use verdana or Geneva for the header as well. So next question: If i need to align two elements then the way to do it is to float one of them? Is there a css equivalent to for example align=absmiddle in HTML? Thanks Lisa I'm not the most expert person on this list by a long chalk, Lisa, but my experience is that there are always about half a dozen ways to do things. For example, in this situation you could have floated both elements left, or you could have floated the menu to the right. On the other hand you could have made them display inline, I suppose! You could even have used the CSS2.1 table-like display values, or even set the display to inline-block: http://www.w3schools.com/css/pr_class_display.asp Or you could use CSS positioning... (See what I mean? It's endless) A lot of it depends on the decisions you make in the structure of your HTML. For instance here, you'd decided to make your menu an unordered list (IIRC), which is another block element, so in the natural flow of things it's going to come below the block element immediately preceding it in the HTML - which was an image in this instance. On other occasions, you might not be dealing with two block elements - in which case the problem would be solved differently. I guess that most people have their own pet ways of doing things like this. Using a float like this just happens to be mine. The most important thing is to make sure you can envisage what's happening, I think. This means being thoroughly familiar with the CSS box model. Once you can envisage that, you'll understand what's happening and be able to think of ways of tackling it. And there are tools. I take it that you develop in Firefox (if not, why not?). Assuming that to be the case, you are spoilt for choice. The Web Developer toolbar comes with element outlining facilities, which can be invaluable. Then there is Firebug. The best thing about Firebug, for me, is the fact that it allows you to right-click on any element and select Inspect element. You can then see all the style rules that apply and how they are affecting the layout on your page. HTH Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning elements
OK I misunderstood you. Try this:
1) Create an extra div called logo01 and enter your logo in it as follows:
div id=logo01
img alt=villa_phuket height=39 src=villaphuket_300.gif width=308 /
/div
2) create an additional css rule as follows:
#logo01 img {
padding: 0;
margin-top: 0;
margin-bottom: auto;
float: left;
vertical-align: middle;
}
This should center the Villa Phuket logo.
3) I created the following code to test it:
div id=container
div id=header
div id=logo01
img alt=villa_phuket height=39 src=villaphuket_300.gif
width=308 //div
div id=menus
ul
lia href=#Gallery/a /li
lia href=#Contact/a /li
lia href=#Location/a/li
lia href=#Reservations/a /li
lia href=#Rates/a/li
lia href=#Facilities/a /li
lia href=#Property Details/a/li
/ul
/div
/div
/div
I used your CSS file BUT added the additional style I mentioned in (2) above.
Hope this helps.
--- On Thu, 11/26/09, Lisa Frost birdiefr...@gmail.com wrote:
Hi Jay,
Sorry my description was probably a bit misleading, i
didn't want to align my menu items vertically but to
align the menu with my website name, a bit like aligning
middle in table cells if you know what i mean.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] aligning elements
Hi, How do I go about vertically aligning the name of the villa in my header div with the menu. Is there a css property to do this? And do I put this property on my img? Page is here: http://www.villaphuket.com/dev/ Css: http://www.villaphuket.com/dev/css/mainstyles.css Thanks Lisa __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning elements
Lisa Frost wrote:
How do I go about vertically aligning the name of the villa in my
header div with the menu.
Page is here: http://www.villaphuket.com/dev/
Better to do it backwards :-)
Style the ul to...
#header ul {
margin : 15px 0 6px 0;
padding: 0;
float: right;
}
...and see if that's close enough for comfort. Modify the top margin if
you want the menu higher or lower.
regards
Georg
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning elements
Lisa, Try this example from STU's website (copy paste the link to visit): http://www.cssplay.co.uk/menus/vertical.html Let me know if you want any more help. the code and CSS is at the bottom of the page --- On Wed, 11/25/09, Lisa Frost birdiefr...@gmail.com wrote: Hi, How do I go about vertically aligning the name of the villa in my header div with the menu. Page is here: http://www.villaphuket.com/dev/ Css: http://www.villaphuket.com/dev/css/mainstyles.css Thanks __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
