Jump to content

Aligning <dl>


Alengyel
 Share

Recommended Posts

In CSS, try something like this:

dl.my_def {	 float: left; } .clear { /* use this to cancel floating */	 clear: both; }

Then your HTML might look like this:

<dl class="my_def">	<dt>title</dt>	<dd> </dd></dl><dl class="my_def">	<dt>title</dt>	<dd> </dd></dl><div class="clear">stuff</div>

You'll want to add margins too, probably.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Thanks for your reply :)Building my website, I've found another problem:The cell with the date and "Argeweb"-logo in it is viewed incorrect in (guess what) Internet Explorer: it's way too high.In other browsers like Opera, FF, Safari and Chrome it's absolutely perfect... Is there a way to fix this problem?The CSS-file can be found here.Thanks!

Link to comment
Share on other sites

Your page is wider that my screen resolution, that's a bad thing for a website, there's hardly anything that drives me away from a site more than a horizontal scrollbar.Also, I don't recommend using tables the way you're doing. It's not semantically correct and it adds a lot of unnecessary mark-up to the page.I wouldn't try fixing the Internet Explorer problem until the site works well on other browsers as well.

Link to comment
Share on other sites

That means, now there's a bigger problem... :)I know about the horizontal scrollbar, but I don't really know how big a problem that is. I don't really think our target group is still using such a small resolution, but on the other hand the site has to be perfect for everyone. So I understand your point.I've got an example of the complete page which I made with Wysiwyg Webbuilder (so it's almost unusable). Could you tell me globular how you should work it out?

Link to comment
Share on other sites

As of January 2009, a 36% of the W3Schools' visitors are using a resolution of 1024x768.The problem is that you have an element of width 1099 on your page.Rather than using a WYSIWYG editor, you should learn HTML and write your own code. Graphical editors are unreliable.You have a whole lot of extra mark-up on your page, like <font> tags and tables, which make the filesize, and therefore bandwidth used, much larger. Your page is currently 46kb. That means that it contains 46,000 characters in the code. This could probably be reduced to around 10kb if you learnt the more advanced techniques of web developing.

Link to comment
Share on other sites

I know, and that's why I'm rewriting the code. The size of the new file is just 14kB, so that's not the problem. In post #3 I've showed you the new page, in post #5 just an example: that file will not be used. So it's about this page.Why shouldn't I use tables the way I do now?

Link to comment
Share on other sites

Because browsers take longer to load tables than to load normal block elements, tables are harder to style, laying out pages is not what tables were made for in the HTML speification, table layouts are not as flexible as CSS-based layouts because if you want to reposition things you have to change the mark-up in all your pages rather than just the stylesheet, using tables requires more mark-up than CSS layouts which means that it uses up a lot more bandwidth. CSS layouts take much less bandwidth because stylesheets are cached by browsers.Here's the markup for a simple layout using <div> elements that will be styled with CSS:

<div id="header"><h1>Page title</h1></div><div id="nav">Left column</div><div id="main">Main content</div><div id="footer">Bottom of page</div>

This is the same layout done with tables:

<table><tr><td colspan="2"><h1>Page title</h1></td></tr><tr><td>Left colum</td><td>Main content</td></tr><tr><td colspan="2">Bottom of page</td></tr></table>

Link to comment
Share on other sites

Given the HTML I presented before:

<div id="header"><h1>Page title</h1></div><div id="nav">Left column</div><div id="main">Main content</div><div id="footer">Bottom of page</div>

This CSS would make the two column layout the way the table example was:

#nav { float: left; width: 180px; }#main { margin-left: 180px; }#footer { clear: both; }

Link to comment
Share on other sites

<div id="header"><h1>Page title</h1></div><div id="left">Left column</div><div id="right">Left column</div><div id="main">Main content</div><div id="footer">Bottom of page</div>

#left { float: left; width: 180px; }#right { float: right; width: 180px; }#main { margin: 0 180px; }/* The previous line is the same as writing margin-top: 0; margin-right: 180px; margin-bottom: 0; margin-left: 180px;#footer { clear: both; }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...