Jump to content
Stef's Super Nerd Community
habgyp

Replacing tables

Recommended Posts

I know that the correct way of laying out anything but data is to use CSS & not html TABLEs but I'm finding it difficult in certain situations to do in a way that isn't... umm.. more cumbersome. I imagine this is just a matter of my lack of familiarity with CSS, but it seems like some tasks just aren't very intuitive.

 

For example, see the code below. With a table, it's very easy. With CSS, it doesn't appear to be so quick/easy. Of course, I would love to be wrong here, so if anyone has any suggestion, I'd love to hear it. Thanks in advance!

 

 

<table>

<tr>

 <td align="center">
  <a href="gallery1.htm">
   <h3>
    Gallery #1
   </h3>
   <img src="pic1.jpg" width=300 height=200>
  </a>
 </td>

 <td align="center">
  <a href="gallery2.htm">
   <h3>
    Gallery #2
   </h3>
   <img src="pic2.jpg" width=300 height=200>
  </a>
 </td>

</tr>
<tr>

 <td align="center">
  <a href="gallery3.htm">
   <h3>
    Gallery #3
   </h3>
   <img src="pic3.jpg" width=200 height=300>
  </a>
 </td>

 <td align="center">
  <a href="gallery4.htm">
   <h3>
    Gallery #4
   </h3>
   <img src="pic4.jpg" width=200 height=300>
  </a>
 </td>

</tr>

</table>

Share this post


Link to post
Share on other sites

Pretty simple really.

 

CSS:

.row {
clear: both;
}
.column {
float: left;
padding: 10px;
/*width: 300*/ /* you can set this width so that your div columns will be equally spaced */
}

 

HTML:

<div class="row">  

  <div class="column"> 
  <a href="gallery1.htm"> 
   <h3> 
    Gallery #1 
   </h3> 
   <img src="pic1.jpg" width=300 height=200> 
  </a> 
 </div> 

 <div class="column"> 
  <a href="gallery2.htm"> 
   <h3> 
    Gallery #2 
   </h3> 
   <img src="pic2.jpg" width=300 height=200> 
  </a> 
 </div> 

</div><!--end row-->

<div class="row"> 

 <div class="column"> 
  <a href="gallery3.htm"> 
   <h3> 
    Gallery #3 
   </h3> 
   <img src="pic3.jpg" width=200 height=300> 
  </a> 
 </div> 

 <div class="column"> 
  <a href="gallery4.htm"> 
   <h3> 
    Gallery #4 
   </h3> 
   <img src="pic4.jpg" width=200 height=300> 
  </a> 
 </div> 

</div><!--end row-->

 

The div with class name 'row' would be used like <tr> and the div with class name 'column' would be the same as <td>.

 

Adjust to suit your need.

Share this post


Link to post
Share on other sites

Eddie, (easier to ask than to try it out) - I'd have just created a containing div with a set width and then let all the 'column' divs float one after the other, so 2 would fit next to each other.

We'd have to clear all whatever comes next.

 

That should work, too - and if so, with even less code?

Share this post


Link to post
Share on other sites

You certainly don't have to use 'row' div but I put it there to help him understand how I replaced the table codes with divs. When I was a beginner it certainly helped me when learning how to move away from tables.

 

As I stated at the end my post... 'Adjust to suit your need'. :)

Share this post


Link to post
Share on other sites

Hey, guys, thanks for the replies!

 

Sorry, it looks I didn't really explain what my bottom line problem was. What I'm trying to figure out is how to get everything to be centered. I already knew how to replace the columns & rows with CSS and even center the "table" as a whole (through auto margins). I'm really trying to find a CSS replacement for the align=center part of the <td>. I know I can style the text with text-align:center; but is there an easy way to get the images to be centered within their divs?

 

Sorry, I probably should have stated what I was actually trying to figure out from the start :unsure:. I guess I posted the whole table dilemma to put things in context and also double check to make sure there wasn't a different way of laying everything else out. But a little more clarification on my part would certainly have been helpful.

Share this post


Link to post
Share on other sites

If you have a fixed width for the div let's say 300px and your image width is 200px and you want it centered then just set a style for the image to be display: block; margin: 0 auto;

Share this post


Link to post
Share on other sites

Thanks for the responses guys!

 

I've continued to mess around with the code using both the suggestions you guys gave me as well as just experimenting on my own and I came across some interesting things:

 

#1 Eddie's first solution is close to accomplishing what I intended (aside from centering the content in the DIV). However, there is a hidden problem there... more on that below.

 

#2 Andrea's solution works perfectly (again aside from the centering issue). Though, Eddie's point about the .column and .row concept helping newbies switch over is a valid one.

 

#3 I accidentally solved my centering issue with the images by solving it on the text. Apparently, when I added the text-align:center to the .column CSS, the IMG in that DIV "inherited" the centering property. I can't figure out why, since the text was in an H3 tag & the IMG was not inside of it; but it solved my centering problem, so I guess that's a positive.

 

#4 IE isn't the only browser that has weird (read: illogical/un-intuitive) quirks. For whatever reason, Firefox doesn't like to "make room" for IMGs that aren't there - even if the dimensions are explicitly stated in the IMG tag. In the end, it's not a huge problem, but can be a pain in the layout stage. Also, it seems Apple doesn't think people using Windows machines should be able to use Safari? I'd like to make sure my layouts are compatible on Safari just like I do with the "Big 3" but I don't own a Mac, so...

 

#5 Back to Eddie's solution above, the .column DIVs don't actually display inside of the .row DIVs - at least by default. I was going to center my new CSS "table" and figured I could do it by adding the margin: 0 auto; CSS to the .row CSS but it didn't do anything. I then decided to put a border around the .row CSS to see what was really going on. Sure enough, the .row DIVs were collapsed and the .column DIVs were displaying outside. This goes back to my earlier post. Using Ben's solution of using overflow:hidden in the .row CSS pulled the .column DIVs back inside, but I'm still having trouble wrapping my head around why this is necessary.

 

So there you go. That's what I "discovered". I hope it was as informative to someone else out there as it was to me. Also, I want to thank Eddie & Andrea for their help - as well as Ben.

 

Oh yeah, if anyone still has questions about what I did or can explain why any of the above happened... go for it!

 

-Damon

Share this post


Link to post
Share on other sites

It's worth remembering that the img tag is an inline element tag and treated like a text unless it has display: block in the style. If the h3 and img tags were both inside a div which had text-align: center it would align both the text and the img.

Share this post


Link to post
Share on other sites

It's worth remembering that the img tag is an inline element tag and treated like a text unless it has display: block in the style. If the h3 and img tags were both inside a div which had text-align: center it would align both the text and the img.

 

Thanks, Wickham! I appreciate your feedback; but the problem I have with that explanation is two-fold:

 

#1 - "Text", in and of itself, doesn't refer specifically to in-line or block level elements. As proof, the <h3> tags, which all of the text in the above example is a part, are obviously block level elements. And yet, there is no doubt that they are still "text". I could have put the text in a <p> tag and they would still be "text". This indicates that in-line/block level are irrelevant to whether or not the "text" selector applies.

 

#2 - "Text" and "images" are NOT the same thing... especially from a computer standpoint. It seems illogical for an "image" - <img> - to be affected by a selector that refers specifically to "text" - in this case, text-align:center;.

 

Again, I appreciate your answer and I hope my response didn't come across as belligerent - that was not my intent. I'm not even disputing that what you said was true. CSS might very well interpret the selectors that way - I'm certainly not arguing that point, as I have no idea. Again, my main issue is that if, in fact, it is interpreting an <img> element to be "text", then that is counter-intuitive to logical programming.

 

This has been my problem when trying to wrap my head around CSS. I keep hearing, "it makes sense". And, for the most part, I agree with that assessment. However, when I run into things like this it becomes a bigger problem than just the specific exception. The exceptions seems unnecessary. And unnecessary exceptions make things harder to learn - they start to become a case of "the exception defines the rule". I'm of the opinion that things like CSS should be well beyond that in this stage of development.

 

But that's just me. I tend to be a fly in the ointment sometimes. Of course, I could be missing something altogether here. Someone may look at my code and immediately spot where I coded something wrong or where I am missing some other aspect, but my gut feeling is that I'm going to keep running into things like this. :(

 

Anyway, sorry for being such a downer, but I would prefer to focus on learning CSS from the standpoint of trying to do something based on the rules presented. Then, if it doesn't work, have someone show me why I did something wrong (usually, that I was unaware of), instead of finding out that I have to rely on an "official" hack (from a code standpoint) to make the code work.

 

-Damon

Share this post


Link to post
Share on other sites

It was badly worded by me. Div h3 and p are all block elements but I meant to refer to what you put inside them. You can have a few words of text then an img tag then a few more words of text and they will all be on the same line, running together, inside a block element, unless the img has a display: block style which breaks the inline state.

<p>A few words <img src="image.jpg" alt="Image 1" /> a few more words.</p>

 

See http://www.htmlhelp.com/reference/html40/inline.html

and

http://www.htmlhelp.com/reference/html40/block.html

 

So if you want a line of text then an image on a separate line or with margins and padding you have to end the text in a block element and start an img tag with display: block;

<h3>Heading text</h3>
<img style="display: block; width: 300px; height: 200px; border: 2px solid black;" src="image.jpg" alt="Image 1" />
<p>Text in a p tag</p>

 

The image can therefore be used in two ways.

Share this post


Link to post
Share on other sites

It was badly worded by me. Div h3 and p are all block elements but I meant to refer to what you put inside them. You can have a few words of text then an img tag then a few more words of text and they will all be on the same line, running together, inside a block element, unless the img has a display: block style which breaks the inline state.

The image can therefore be used in two ways.

 

Thanks, Wickham!

 

I think I was a bit unclear, as well, about the in-line/block issue. Both <p> & <h...> elements are block even though for some reason I implied <p> was in-line. Your clarification makes that part of my point irrelevant, anyway. It seems we were on the same page there.

 

What I'm really having the problem with isn't fixing trying to center the content in the DIV. Yes, that was my initial problem. And it is now resolved. My problem is that how it was fixed shouldn't logically have worked. Here's the relevant part of the html again:

 

 <div class="column"> 
  <a href="gallery1.htm"> 
   <h3> 
    Gallery #1 
   </h3> 
   <img src="pic1.jpg" width=300 height=200> 
  </a> 
 </div> 

 

As you can see, the IMG element is not part of any "text" element; it falls outside of the H3 tag. So when I changed the CSS for .column to include text-align:center, I can't see why it should logically affect the IMG element as well.

 

And, yes, I'm well aware of the irony that I'm "arguing" that what resolved my problem shouldn't be "right"... even though it worked. And, yes, I know I'm really going off on a tangent here. But I'm more concerned with understanding CSS by figuring out how it works. That way I can anticipate its behavior and get the most out of it.

 

So, I guess what I'm really getting at is that I'm looking for one of two things:

 

1) somewhat points out that I'm missing something in my code that is making the IMG centered that isn't simply the text-align:center (and I'm still too green to catch it)

 

or

 

2) yes, a selector that specifically says "text" will affect an IMG element; and, no, that doesn't "make sense" - but it is a quirk of CSS (at least the current version)

 

I honestly would prefer #1. Being ignorant about something (then being educated) is far more appealing than the the idea of code not being implemented in a consistent manner.

 

Sorry for rambling on with a psuedo-rant. I'm not upset, or anything - I just like to really understand things when I use them; and if they don't make sense to me, it's kind of one of my pet peeves. That's just me, anyway.

 

-Damon

Share this post


Link to post
Share on other sites

I hadn't noticed before, but you have a block element h3 inside an inline element "a" which is not allowed and could therefore get a different display from different browsers as they try to guess what the correct display should be.

 

I gave the .column text-align: center; and made it bigger with a background to see what the effect was:

.column { text-align: center;
float: left; background: pink;
padding: 10px; width: 500px; height: 300px;
}
h3 { font-weight: bold; background: lime; }
p { background: yellow; }

 

You could have no block elements at all, then the "a" tag and the img would both be centered by the text-align: center in .column and separated by a line break:

<div class="column"> 
  <a href="gallery1.htm" style="font-weight: bold;">Gallery #1</a>
<br> 
   <a href="gallery1.htm"><img src="images/square_j.jpg" width=300 height=200></a> 
 </div> 

but the "a" tag has no top and bottom margin or padding so it's close to the img (it's bad practice to create more space by adding more <br> tags).

 

OR

 

You should have the "a" tag inside the h3 tag, then the img could be inside an "a" tag inside a p tag and then you have two block elements inside the container .column.

<div class="column"> 
  <h3><a href="gallery1.htm">Gallery #1</a></h3>
<p><a href="gallery1.htm"><img src="images/square_j.jpg" width=300 height=200></a></p>
 </div> 

 

It appears that the text-align: center in .column is inherited by the text and img BUT notice that the h3 and p tag colors are full width although the "a" and img tags inside are centered.

 

OR

 

You could have the "a" tag inside the h3 tag, then the img could be inside only an "a" tag (just give the "a" tag a display: block; for and no p tag) and then you still have two block elements inside the container .column.

<div class="column"> 
  <h3><a href="gallery1.htm">Gallery #1</a></h3>
<a style="display: block;" href="gallery1.htm"><img src="images/square_j.jpg" width=300 height=200></a>
 </div> 

Edited by Wickham

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...