jordanwb Posted September 8, 2008 Share Posted September 8, 2008 I'm trying to rewrite the default theme engine of my SCM because despite the fact that the widths are specified exactly, the widths change. So I'm rewriting it using divs, and it's not much better: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Div Test</title> <style type="text/css"> <!-- BODY { background-color: #CCCCCC; } .container { border: 1px solid black; margin-left: auto; margin-right: auto; width: 1000px; } .row_1_container { background-color: green; width: 100%; } .row_2_container { background-color: red; width: 100%; } .row_3_container { width: 100%; } .row_3_column_1_container { background-color: blue; display: inline; width: 200px; } .row_3_column_2_container { background-color: purple; display: inline; width: 600px; } .row_3_column_3_container { background-color: orange; display: inline; width: 200px; } .row_4_container { width: 100%; } .row_4_column_1_container { background-color: yellow; display: inline; width: 50%; } .row_4_column_2_container { background-color: cyan; display: inline; width: 50%; } .row_5_container { background-color: magenta; width: 100%; } --> </style> </head> <body> <div class="container"> <div class="row_1_container"> </div> <div class="row_2_container"> </div> <div class="row_3_container"> <div class="row_3_column_1_container"> </div> <div class="row_3_column_2_container"> </div> <div class="row_3_column_3_container"> </div> </div> <div class="row_4_container"> <div class="row_4_column_1_container"> </div> <div class="row_4_column_2_container"> </div> </div> <div class="row_5_container"> </div> </div> </body> </html> The three divs in the third row are not the right widths and neither are the ones in the fourth row. Quote Link to comment Share on other sites More sharing options...
DarkWater Posted September 8, 2008 Share Posted September 8, 2008 Can we see a link? Quote Link to comment Share on other sites More sharing options...
jordanwb Posted September 8, 2008 Author Share Posted September 8, 2008 If you mean to what I have right now: http://99.224.95.32/scm If you click on Login you'll notice that the cells shift in width. I got it partially fixed by changing "display: inline;" to "display: inline-block;" but they're not on the same line: http://99.224.95.32/div_test Quote Link to comment Share on other sites More sharing options...
jordanwb Posted September 8, 2008 Author Share Posted September 8, 2008 I got it fixed. It's that stupid newline bug. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted September 9, 2008 Share Posted September 9, 2008 I took a look at your code, (puke, puke) :-\ First of all, what I'm about to say is simply for your benefit. If you don't like my advice, then don't use it...... You need to enclose all text within a block level tag. <p> is a really good tag. You can not let text go into a <td> by itself! <span> doesn't count either! Make sure you self close certain tags. <img /> . Notice the self ending code? Finally, whenever making a list, like the user menu, put each link is a list. <ul><li>.... All of these suggestions will help your SEO, make it more accessible, and make it more semantically correct. Quote Link to comment Share on other sites More sharing options...
jordanwb Posted September 9, 2008 Author Share Posted September 9, 2008 You need to enclose all text within a block level tag. <p> is a really good tag. You can not let text go into a <td> by itself! <span> doesn't count either! I don't see what the big deal is but okay. Make sure you self close certain tags. <img /> . Notice the self ending code? Yeah, I do that. ??? Finally, whenever making a list, like the user menu, put each link is a list. <ul><li>.... All right. I need to make changes to the PHP code, so I'll add that to the list of stuff to change. Quote Link to comment Share on other sites More sharing options...
DarkWater Posted September 9, 2008 Share Posted September 9, 2008 All text must be contained within a block level element. <span> is an inline element, and so is <td>. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted September 9, 2008 Share Posted September 9, 2008 The reason text must be enclosed in block elements is because otherwise, (logically thinking) normal english text that you have in raw html code would have no higher significance than some other tag, link, or some other jumbo mambo. It's a far fetch way of thinking about it, but just think, do search engine bots are smart enough to view your page as a web browser? - NO. They strip tags out here and there.... by putting block tag elements outside of your text puts a high level of importance into your text - puts meaning in color blind search engines! Quote Link to comment Share on other sites More sharing options...
jordanwb Posted September 9, 2008 Author Share Posted September 9, 2008 I rewrote part of the main code, plus the code that handles menus. I'm going to rewrite the theme engine to use divs to handle layout instead of tables. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted September 9, 2008 Share Posted September 9, 2008 I rewrote part of the main code, plus the code that handles menus. I'm going to rewrite the theme engine to use divs to handle layout instead of tables. Glad to hear it! Quote Link to comment Share on other sites More sharing options...
jordanwb Posted September 9, 2008 Author Share Posted September 9, 2008 I tried to use divs instead of a table for the rounded corners but it didn't turn out too well. I'll post the HTML and CSS if you wouldn't mind looking at it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.