make div like a table

Page 1 of 1

4 Replies - 475 Views - Last Post: 08 October 2012 - 03:54 AM

#1 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

make div like a table

Posted 07 October 2012 - 11:54 PM

I am writing a page that display images and its name.
something like this
Posted Image

I used to use <table>, but most of people says I should change to <DIV> even I am not sure the reason.

I use STRUTS2 loop to generate all of Images and names. 
<%@taglib prefix="s" uri="/struts-tags" %>
<s:div id="noAccount">
	<s:iterator value="noOutfitAccount">
		<div id="containerUser">
			<img src="https://graph.facebook.com/<s:property value="fbID"/>/picture?type=small"/>
			<div id="imgName">
				<s:property value="name"/>
			</div>
			<br/>
		</div>
	</s:iterator>
</s:div>

<hr/>

<s:iterator value="outfitUser">
	<img src="https://graph.facebook.com/<s:property/>/picture?type=normal"/>

</s:iterator>

<style>
#imgName{
	clear:both;
	float:left;
}
#img{
	float:left;
}
#container{
	width:500px;
	overflow:hidden;
}
</style>


basically the <s:iterator></iterator> is a loop to display all of images and names.
this code makes all of images and names go left.

anything could help me a lot.
thanks

Is This A Good Question/Topic? 0
  • +

Replies To: make div like a table

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: make div like a table

Posted 08 October 2012 - 12:29 AM

Hey.

You seem to be reusing ID values in there. That should never happen. Identifiers (IDs) should be unique to a single element on the page. That's sort of their purpose. - If you need to apply the same style to multiple elements, use a class instead.
<style>
/* Styles for all elements with the class "elemType" */
.elemType {
    float: left;
}

/* Styles specific to elements with these IDs */
#elem1 {
    color: red;
}
#elem2 {
    color: blue;
}
</style>

<div id="elem1" class="elemType">...</div>
<div id="elem2" class="elemType">...</div>

You also seem to be using the wrong ID in your CSS. In the HTML you have a "containerUser" ID on all the divs, but in the CSS you set a style for just "container".

What you want to be doing, if you are going to use divs to set up a grid layout, is apply a fixed dimension to all the container divs, as well as float: left. That will make them al line up next to each other horizontally until they reach the edge of the page, at which point they'll go down one "line".
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <meta charset="UTF-8"/>
        <style>
            .container {
                width: 300px;
                height: 300px;
                float: left;
                margin: 5px;
                border: solid 1px #000;
            }
        </style>
    </head>
    <body>
        <div class="container">...</div>
        <div class="container">...</div>
        <div class="container">...</div>
        <div class="container">...</div>
        <div class="container">...</div>
    </body>
</html>


View PostJay0830, on 08 October 2012 - 06:54 AM, said:

I used to use <table>, but most of people says I should change to <DIV> even I am not sure the reason.

The <table> tag is often abused to create layouts, because it tends to be simpler to use by those less experienced with CSS positioning. However that was never it's intended purpose, and using it like that can have unpleasant side-effects. It's purpose is to display tabular data. Positioning elements in the page is a job for CSS, not <table>.

When it should be used is often disputed. For example, in your case, some would argue that your grid layout is tabular data, and thus a <table> could be used to display it. I'd personally not agree with that though.
Was This Post Helpful? 1
  • +
  • -

#3 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: make div like a table

Posted 08 October 2012 - 01:33 AM

Atli, Thanks for your quick apply.
the problem solved.
Here is my code
<s:div id="noAccount">
	<s:iterator value="noOutfitAccount">
		<div id="<s:property value="name"/>DIV" class="containerUser">
			<img src="https://graph.facebook.com/<s:property value="fbID"/>/picture?type=small"/>
			<div id="<s:property value="name"/>Name">
				<s:property value="name"/>
			</div>
		</div>
	</s:iterator>
</s:div>

<hr/>

<s:iterator value="outfitUser">
	<img src="https://graph.facebook.com/<s:property/>/picture?type=normal"/>

</s:iterator>

<style>
.containerUser{
	width:100px;
	height:120px;
	float:left;
	margin:5px;
	border:solid 1px black;
}


And I reuse the ID value, because I would use it in jquery, such as when user click on containerUser, then changes border's color. something like that.

If I only want to get the containerUser DIV not other inner div.
what can I do?

Atli, I'm really appropriate your apply!! thanks
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: make div like a table

Posted 08 October 2012 - 03:06 AM

jQuery is just as capable of selecting elements based on classes as it is of selecting elements based on IDs. It has a very powerful, CSS-like selector syntax. To select only <div> elements with the "containerUser" class, do:
var $containers = $("div.containerUser");

Then you can simply apply a function to the click event of all those elements by doing:
$containers.click(function() {
    // Get a reference to a jQuery object representing the div.
    var $self = $(this);

    // Change the font color of text in the div to red.
    $self.css("color", "red");
});

That example changes the text colour in the div to red, but you can do whatever you like in there.
Was This Post Helpful? 1
  • +
  • -

#5 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: make div like a table

Posted 08 October 2012 - 03:54 AM

Thanks Atli,
you really helped me a lot.
Now, everything solved, I need to change other pages that I reuse ID value.

Thanks a lot.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1