CODEWITHSUNDEEP
css
Sean
Sean

Reputation: 421

What's current best practices for formatting web page?

I haven't done any real web design in a few years, and I'm now tasked with creating a set of web pages that will need relatively complex (and exact) layouts. I've started exploring CSS, and while I'm starting to get an idea of how to use it, it doesn't really seem like the appropriate tool for the kind of layout I need.

The layout I need has a top, middle, and bottom section, and each of those sections is broken down into different areas. I need something that is kinda like:

35%, 35% (right justified), 15%, 15%

70%, 15%, 15%

70%, 15%, 15%

Percents are of browser width, and where the percentage of the column end is the same as the row above/below, the columns edges need to meet. Further, rows must be below each other, regardless of what content I put in them.

CSS seemed like it would do what I want, but then when I started trying for the complexity I needed, I couldn't get columns to match up, or rows flowed into other rows, etc.

What I really want is something like frames, where I can position elements exactly where I want them. Does that exist, or do I just fight with CSS?

Thanks,

Sean.

Upvotes: 2

Views: 268

Answers (4)

Steve
Steve

Reputation: 50573

Remember using Tables as apposed to CSS will cause accessibility problems. This means that people with using accessibility to browse your site will have problems using screen readers.

I agree with some of the previous answers. Spend time getting to know CSS. When it is written correctly it means that your styles will be reuseable and easy to implement and change once you have done them. Trying to change styles that have been individualy coded on a number of pages will cause you headaches.

If your website is going to be complex then try and make sure you are making it as simple to maintain as possible and CSS will definately help you there.

Upvotes: 0

Lèse majesté
Lèse majesté

Reputation: 8045

You need to learn CSS, not fight it. CSS has been used to create much more complex layouts than what you have described. And it is the only way you should be styling your web pages and implementing a layout design.

CSS gives you much more control over the presentation of a webpage and positioning of elements than frames can (frames only give you frames to put load multiple pages in; you still need to style those pages separately).

This is a rather broad question, so I'll just say this:

  • Use HTML to semantically organize/structure your content.
  • Use CSS for your presentation.

In other words, don't use any of the following tags or similar tags:

  • <b> (use <strong> instead)
  • <i> (use <em> instead)
  • <font>
  • <u>

Remember to use structuring tags where appropriate like:

  • <h1> up to <h6>
  • <p>
  • <blockquote>
  • <pre>

And use semantically correct tags. So if you have a definition list, use <dl>, <dt> and <dd>. If you have a form, use <label for="{input id}">, e.g.:

<label for="first-name">First Name:</label>
<input name="first_name" id="first-name" />
<!-- when the user clicks on the label, the input will receive focus -->

Don't use tables for layouts. Use them only for tabular data. And when you do, make sure you use proper semantic markup <thead>, <th>, <tbody>, etc.

Put title attributes in your links and alt attributes in your images for accessibility and usability.

And use stylesheets (preferably external ones for DRY) instead of inline styles.

Lastly, as Jan_V mentioned, w3schools.com is a great resource for CSS, JavaScript, HTML, and most web standards. There is a lot for you to learn, but luckily there's a ton of tutorials, references, and other resources on the web to help you along. Learn how to properly use CSS/HTML, and you will produce higher quality webpages as well as save time in maintenance.

If you're struggling with the layout you have in mind, start with something simpler and work your way up. E.g. try an evenly drawn 2 column, 2 row layout first. Once you get that working, start changing the proportions and adding more columns/rows.

Upvotes: 5

Jan_V
Jan_V

Reputation: 4406

You could try using tables for the layout, but I would suggest using CSS and DIV elements. If you are going to use frames or tables you'll get in trouble later (probably). Also, CSS isn't that hard, just spend a bit time on learning it and maybe W3Schools, which have nice tutorials.

Upvotes: 0

vicatcu
vicatcu

Reputation: 5837

CSS can do pretty much anything you want, it is the defacto tool for positioning and styling elements on your web pages. I think you should look into position: absolute and float capabilities based on your description. The difficulty with it lies in getting consistent behavior/interpretations across browsers. Using a css-reset like YUI's is highly recommended to help with this. YUI also has javascript utilities that help normalize some CSS behavior (e.g. float and opacity) across browsers. YUI is by no means the only way of accomplishing these goals.

Upvotes: 2

Related Questions