How to create this using css only

MySchizoBuddy · October 2007

Its looking crap here but you get the idea. How can I create this layout using only CSS. Dunno why is it inserting so many br tags :S

Start	Date	Time

	e.g. 15/1 or Jan 15	e.g. 5pm
End	Date	Time

	e.g. 15/1 or Jan 15	e.g. 5pm

WallPhone · October 2007

It's easier if you start with semantic HTML first, break the pieces into an outline with related items together:

Start: Date
e.g. 15/1 or Jan 15; Time
e.g. 5pm
End: Date
e.g. 15/1 or Jan 15; Time
e.g. 5pm

Stay tuned for the CSS.

WallPhone · October 2007

All the <BR>s in the above code don't belong... use block comment to get the pure source. The br's apparently shift the positions a bit when viewing directly in the browser.

Here's the CSS:

dl dt {
/* Make the start & end date blocks start flush left. */
clear: left;
}

dl dd {
/* Align the date and time inputs side-by-side */
width: 35%;
display: inline;
float: left;
padding: 0 6px
}

dl dd * {
/* Stack all dd contents with equal width: */
display: block;
width: 100%;
}

MySchizoBuddy · October 2007

Thanks Wallphone, I'll have to use li and span cause vanilla theme doesn't use dl tags

dan39 · October 2007

You should also take a look at both of these articles over at ALA: http://alistapart.com/articles/prettyaccessibleforms/ http://alistapart.com/articles/makingcompactformsmoreaccessible Both of these articles are great resources for good styling of forms while keeping the markup sound.

How to create this using css only

Comments