/    Sign up×
Community /Pin to ProfileBookmark

Can this layout be done in CSS

Copy linkTweet thisAlerts:
Nov 27.2007

I have just designed a layout for a website using a table.

See [url]http://www.nor-tech.co.uk/new/testarea/web.html[/url]

However, ideally I would like to recreate it using CSS but I do NOT want the design to change under any circumstances. I have tinkered in the past using CSS but I have found it difficult to get the designs I require.

So my question is this –

Can a CSS layout reproduce the same layout without compromise.

I really would like to take the CSS plunge, but I would like the assurance that there is nothing that table layouts can do that a CSS layout cannot.

Is this true?

J

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ryanbutlerNov 27.2007 — The CSS pundits will say otherwise, but I see nothing wrong with doing that as a table layout if you're not comfortable with CSS. However, with that said, that layout wouldn't be hard in CSS. What you would do is divide it into parts:

Header, which contains the two top images

Left content area

Right navigation

Footer

What you would do is create a wrapper image that comprised the white background of the left content area and the light shaded right navigation area to simulate equal column heights. Then you surround the entire layout in a wrapper which contains this image and float both the left and right content areas.

Something like this:

[CODE]<div id="wrapper">
<div id="header">
...images here
</div>
<div id="uppernavigation">
<ul id="topnav">
<li>menu item one</li>
</ul>
</div>
<div id="left">

</div>
<div id="right">
<ul>
<li>menu item one</li>
</ul>
</div>
<div id="footer">

</div>
</div>
[/CODE]
Then in CSS:

[CODE]#wrapper{
width:740px;
margin:0 auto;
background-image:url(images/wrapper.jpg);
background-repeat:repeat-y;
}

#left{
float:left;
width:450px;
}
#right{
width:290px;
float:left;
}
#topnav ul{
margin:0;
padding:0;
}
#topnav ul li{
list-style-type:none;
float:left;
}

#topnav a{
width:100px;
display:block; /*make entire area of link clickable*/
}

#footer{
clear:both;
}[/CODE]

Oops...forgot to mention that to achieve the top level navigation the easiest way would be to create another unordered list and float it left, giving the anchor tag a width, where #uppernav comes into play.

Hope it gives you a start. Post back if you need help.

P.S. - I've corrected this twice...I need more coffee.
Copy linkTweet thisAlerts:
@drhowarddrfineNov 27.2007 — Using a table would be nonsense at best.

You need to remove the first line because it throws IE into quirks mode.
Copy linkTweet thisAlerts:
@CentauriNov 27.2007 — You do not actually create a layout with css - it is created using html styled by css. You have even used css in your table-based layout. If you mean, can this table-based layout be duplicated using semantic markup without tables, then the answer is yes, it can.
Copy linkTweet thisAlerts:
@john_nobleauthorNov 27.2007 — Thanks for all your help guys!

As for Centauri - I didn't expect you to re-create the site in CSS. You have saved me hours of work. I will take the time to study your code and hopefully learn from it.

Much appreciated!

John
Copy linkTweet thisAlerts:
@Declan1991Nov 27.2007 — Thanks for all your help guys!

As for Centauri - I didn't expect you to re-create the site in CSS. You have saved me hours of work. I will take the time to study your code and hopefully learn from it.

Much appreciated!

John[/QUOTE]
What you have to notice is that the HTML is very simple, but makes sense. Headings are in <h1>...<h6> tags etc. The styling comes later.
×

Success!

Help @john_noble 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.19,
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,
)...