Alengyel Posted May 19, 2009 Share Posted May 19, 2009 How can I align two <dl> "boxes" next to each other? <dl> <dt>title</dt> <dd> </dd></dl><dl> <dt>title</dt> <dd> </dd></dl> Link to comment Share on other sites More sharing options...
jeffman Posted May 19, 2009 Share Posted May 19, 2009 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. Link to comment Share on other sites More sharing options...
Alengyel Posted May 27, 2009 Author Share Posted May 27, 2009 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 More sharing options...
Ingolme Posted May 27, 2009 Share Posted May 27, 2009 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 More sharing options...
Alengyel Posted May 27, 2009 Author Share Posted May 27, 2009 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 More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 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 More sharing options...
Alengyel Posted May 28, 2009 Author Share Posted May 28, 2009 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 More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 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 More sharing options...
Alengyel Posted May 28, 2009 Author Share Posted May 28, 2009 And how should you position them is CSS? I've already tried that with (negative) padding, but then some parts will move when zooming in. Link to comment Share on other sites More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 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 More sharing options...
Alengyel Posted May 28, 2009 Author Share Posted May 28, 2009 Thanks, it works perfect! Just one more question: what to do if I have 3 columns? Link to comment Share on other sites More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 <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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.