some html help, plz

MasterMax1313

MasterMax1313

New Member
Messages
84
Reaction score
0
Points
0
Ok, so I'm still kind of new to formating my html so that it looks exactly the way I want it to look. I need some help coming up with some html source code for the image that I've attached to this post. Basically, I know that I could use a table, but I'm trying to avoid using one as it would get pretty out of hand with trying to properly code it. I was thinking of spans or divs and some CSS, but I'm not sure of how to properly do it. In some cases (namely IE 7, the only IE version I've got), it works without

HTML: 
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
however, with it, it doesn't even come close. So I'm trying to do this to be in some resemblance of compliance to standards:bash:.

Any help that you can offer would be greatly appreciated!
 

Attachments

  • example.jpg
    example.jpg
    8.6 KB · Views: 30
Hazirak

Hazirak

New Member
Messages
197
Reaction score
0
Points
0
It's probably not the most efficient method, but the first thing that comes to mind is to set one <div> tag to act as a wrapper... then three more <div> tags inside that, one for each column... and then two <div> tags (or <span> tags, depending on your preference) inside each column, one for each cell... and then format the whole fiasco with CSS however you please, something like:
HTML: 
<div id="wrapper">
   <div id="column1">
      <span id="cell1">
      </span>
      <span id="cell2">
      </span>
   </div>
   <div id="column2">
      <span id="cell3">
      </span>
      <span id="cell4">
      </span>
   </div>
   <div id="column3">
      <span id="cell5">
      </span>
      <span id="cell6">
      </span>
   </div>
</div>
Like I said, it's probably not the most efficient solution, but if nothing else, it's a starting point. Just make sure you float the columns in the same direction so they line up side-by-side (ie: float: left;).
 
Last edited:
MasterMax1313

MasterMax1313

New Member
Messages
84
Reaction score
0
Points
0
Thanks for the help, it's at least got me pointed in the right direction. IE is at least splitting it into the correct sections, though not with appropriate heights (based off my CSS), and Firefox is just making it look weird, though better than before. Any thoughts?

[edit]
OK, I managed to miss that there was a wrapper div, so I added that to the CSS and it fixed the problem in IE, but Firefox still isn't quite right... any thoughts on that one? (note on second edit, I had a slight typo in the <!DOCTYPE...)

[edit]
OK, now that I have the <!DOCTYPE... problem truly fixed, it is causing an issue with forcing my divs to go all the way down the page. I've seen some examples of using overflow to fix this problem, but I'd rather try to find a more elegant solution to this. Does anyone have one?

[edit - again...]
So, I found an elegant midterm solution to the problem of extending the divs all the way down the page here, but am now working on getting the sections of each row to display properly.

Example of Problem

CSS

Javascript
 
Last edited:
Hazirak

Hazirak

New Member
Messages
197
Reaction score
0
Points
0
You might try inserting content into the spans, even if it is just a quick '&nbsp;' - I've noticed that it tends to be picky at times as to whether or not it displays an empty span or div.

Also, this might sound weird, but there is nothing wrong with the heights - it's doing exactly as you told it to, taking up 100% of the available height space. The problem is that it's taking up 100% of the <body> tag's height, which is in turn taking up 100% of the <html> tag's height. Oddly enough, the <html> tag doesn't default to 100% of the user's viewport, it just becomes however tall it needs to be. Of course, you can override the <html> and <body> tag's normal height and give them a height through CSS like everything else.
 
Last edited:
MasterMax1313

MasterMax1313

New Member
Messages
84
Reaction score
0
Points
0
Just a note to look above that I figured out what Hazirak said (and more). I forced the body to 100% height. It seems to be a little taller than I'd like, but I'd rather that than not tall enough. More fun with CSS I suppose.

[edit]
GOT IT!
switched the spans to divs. still too tall, but as before, that's a minor issue.
 
Last edited:
Hazirak

Hazirak

New Member
Messages
197
Reaction score
0
Points
0
Whoops, completely forgot about the 'too tall' effect, my bad... setting the body's top and bottom margins to 0 SHOULD solve that issue, though.
 
MasterMax1313

MasterMax1313

New Member
Messages
84
Reaction score
0
Points
0
Much better, thanks. I also added top and bottom paddings set to 0 because it's still just a tad taller than the browser window, but that didn't quite fix that. If that's the only issue left from getting this to look right, then so be it, not that big a deal. However, if there is a way for this to be fixed, then hurray! Any thoughts?
 
You must log in or register to reply here.
Top