/    Sign up×
Community /Pin to ProfileBookmark

Coding this design in css

Copy linkTweet thisAlerts:
Jan 19.2006

Hi

I would like to know if this design is possible using css.

[url]http://www.boostnowbreaks.co.uk/test.jpg[/url]

How would you go about laying the design out using CSS?

Would it be best to have a header div (navigation)

Then 2 columns for the main content left and right, then the same again for the footer (grey panel).

Would love to know the best way of approaching this.

Thanks for any help

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonJan 20.2006 — I would probably do something like this.

First I'd have a container <div> tag, I'd apply the green outline of a horsehead background on this.

Then I'd put a <div> inside that which I would float left and have an <h1> for the "Example Racecourse" header, then a paragraph floated next to it for the tag line. Then still inside the same div, I'd have an unordered list for the three boxes, each <li> would have an <h2> in it for the little titles, followed by a paragraph, the images would be set as a background to the <li>.

A second <div> would go inside the container <div> that I mentioned at the start, it would be floated right, it would be for the punters race day thing, the entire image would be set as a background, then there would be a paragraph for the text at the bottom.

Next up, would be yet another <div>, for the big grey bar, this would be outside the container <div> that I mentioned at the start, it would be divided into two, much like the first container <div> with left and right floated <div>'s. In the left I would put the next race meeting info, using an <h3> for the title and a definition list for the information. In the right hand <div> I would have another <h3> for the title and a paragraph for the text. The grey background would be applied to the container div and positioned a few pixels from the top so as to give the appearence that the "Buy your ticket" image is sticking out of the top.

Then I would have a form with an <h4> in it for the "Search" graphic and I would position it at the top of the page.

Then I would have an unordered list for the green navigation bar and position that at the top of the page too.

Then a <div> tag, inside would be another unordered list for the bottom navigation, which would be floated left. Then a form would be floated right and stack up next to the navigation.
Copy linkTweet thisAlerts:
@mumfordauthorJan 20.2006 — Thanks for the response
Copy linkTweet thisAlerts:
@mumfordauthorJan 24.2006 — Anyone else have any ideas?
×

Success!

Help @mumford spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...