7 Replies - 1150 Views - Last Post: 23 May 2013 - 03:02 AM

#1 algomeysa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-May 13

HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 01:18 AM

Ok, so, I'm trying to move up to HTML5, and I'm also trying to lose some old bad habits.
Namely using tables for formatting.

Pre HTML5, Old School, I might have something like this:
A table with two cells. In the right cell is a 500x400 pixel image.
In the left cell is a nested table, with 20 images, 100x20 pixels.
They fit in pretty neatly, 100x400, just to the left of that bigger image.
http://algomeysa2.ho...ster/test42.htm

So I'm trying to do the same thing in HTML5 with no tables, using DIVs.
But I get this:

http://algomeysa2.ho...test42html5.htm

What am I doing wrong? How can I get those left images to stack neatly atop each other,
fitting into that 400 pixel high space, and so, fit in with the image on the right in
the other DIV?

That left DIV looks like this:
<div id="container" style="width:600px;margin-left: auto ;margin-right: auto;">
<div id="left" style="background-color:#FFFFFF;height:400px;width:100px;float:left;">
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
</div>
<div id="right" style="background-color:#CFCE71;height:400px;width:500px;float:left;"><img src="main1.jpg" width="500" height="400" border="0" vspace="0" hspace="0">
</div>
</div>


This post has been edited by Dormilich: 23 May 2013 - 01:19 AM
Reason for edit:: fixed code tags


Is This A Good Question/Topic? 0
  • +

Replies To: HTML5 - Stop me before I table again! (DIV question)

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 01:24 AM

firstly, canít you use a 100x400 image to begin with?

second, I guess the space comes from the line breaks (U+000A/U+000D) between the images. second best (after using a single image) I can think of is writing it all consecutively (no need for <br> either).
Was This Post Helpful? 0
  • +
  • -

#3 algomeysa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-May 13

Re: HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 01:39 AM

1) Can I use a 100x400 image? No.
2) Removing the <BR>s and line breaks....actually produces the exact same result.

Thanks for the reply...but...that's not it.

This post has been edited by Dormilich: 23 May 2013 - 01:42 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 01:42 AM

View Postalgomeysa, on 23 May 2013 - 10:39 AM, said:

2) Removing the <BR>s and line breaks....actually produces the exact same result.

then you would need to check paddings, margins, etc. in the debugger.

it would be nice if you could post the updated page.

EDIT: it’s definitely the line breaks, annuling them produces the desired behaviour.

This post has been edited by Dormilich: 23 May 2013 - 01:52 AM

Was This Post Helpful? 0
  • +
  • -

#5 algomeysa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-May 13

Re: HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 02:49 AM

View PostDormilich, on 23 May 2013 - 01:42 AM, said:

View Postalgomeysa, on 23 May 2013 - 10:39 AM, said:

2) Removing the <BR>s and line breaks....actually produces the exact same result.

then you would need to check paddings, margins, etc. in the debugger.

it would be nice if you could post the updated page.

EDIT: itís definitely the line breaks, annuling them produces the desired behaviour.


I don't seem to get that result:
Removed the line breaks, and also added a margin and padding with all 4 zeroed out:
<div id="left" style="background-color:#FFFFFF;height:400px;width:100px;float:left;margin: 0px 0px 0px 
0px;padding:0px 0px 0px 0px;"><img src="left1.jpg" width="100" height="20" border="0" vspace="0" 
hspace="0"><img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img 
src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img src="left2.jpg" width="100" 
height="20" border="0" vspace="0" hspace="0"><img src="left1.jpg" width="100" height="20" border="0" 
vspace="0" hspace="0"><img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img 
src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img src="left2.jpg" width="100" 
height="20" border="0" vspace="0" hspace="0"><img src="left1.jpg" width="100" height="20" border="0" 
vspace="0" hspace="0"><img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img 
src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img src="left2.jpg" width="100" 
height="20" border="0" vspace="0" hspace="0"><img src="left1.jpg" width="100" height="20" border="0" 
vspace="0" hspace="0"><img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img 
src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img src="left2.jpg" width="100" 
height="20" border="0" vspace="0" hspace="0"><img src="left1.jpg" width="100" height="20" border="0" 
vspace="0" hspace="0"><img src="left2.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><BR>
<img src="left1.jpg" width="100" height="20" border="0" vspace="0" hspace="0"><img src="left2.jpg" 
width="100" height="20" border="0" vspace="0" hspace="0"></div>



And yet I still get the same result....
http://algomeysa2.ho...est42html5a.htm
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 02:53 AM

hm, as a last measure, you can float the images.

are the images supposed to be just lime and turqoise?
Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4238
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 02:53 AM

If you add font-size: 0; on the DIV with the smaller images, it will effectively hide the spaces that are showing. Technically they are still there, but with a 0 height and therefore not displayed. - A good trick when there is no text inside the element. Gets a bit tricky if there is.
Was This Post Helpful? 1
  • +
  • -

#8 algomeysa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-May 13

Re: HTML5 - Stop me before I table again! (DIV question)

Posted 23 May 2013 - 03:02 AM

View PostAtli, on 23 May 2013 - 02:53 AM, said:

If you add font-size: 0; on the DIV with the smaller images, it will effectively hide the spaces that are showing. Technically they are still there, but with a 0 height and therefore not displayed. - A good trick when there is no text inside the element. Gets a bit tricky if there is.


Thanks Atli, that seems to have solved the problem:
http://algomeysa2.ho...est42html5b.htm

And Dormilich, thank you for the suggestions.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1