How to make div tags to appear in order?

Page 1 of 1

11 Replies - 678 Views - Last Post: 29 September 2011 - 04:20 PM

#1 HTMLguyz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 24-September 11

How to make div tags to appear in order?

Posted 24 September 2011 - 03:15 PM

Hi.

I have a javascript script which slides a slider when you click on text or image. However when I click it, it slides down together with the div tag below it (there are total of 5 images which should be in one line and slide a box under them when clicked).

Here is my code:

<div class="slider1"><img src="big_button1.png" /><div class="x">
text text text</div></div>
<div class="slider2"><img src="big_button2.png" /><div class="xx">
text text text</div></div>
<div class="slider3"><img src="big_button3.png" /><div class="xxx">
text text text</div></div>
<div class="slider4"><img src="big_button4.png" /><div class="xxxx">
text text text</div></div>
<div class="slider5"><img src="big_button5.png" /><div class="xxxxx">
text text text</div></div>


And if you didn't understood what is happening and what I want to do, here is an image. Feel free to ask if you still don't get it:

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: How to make div tags to appear in order?

#2 Gavisann  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 103
  • View blog
  • Posts: 382
  • Joined: 01-July 11

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 03:21 PM

You can display them inline by adding DISPLAY: inline; to your css class. I would use a table, it would be easier.

This post has been edited by Gavisann: 24 September 2011 - 03:30 PM

Was This Post Helpful? 0
  • +
  • -

#3 HTMLguyz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 24-September 11

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 03:42 PM

inline doesn't help.

As for a table - it doesn't give me enough flexibility on what I am doing. It's just a snippet of the whole creation.
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 03:53 PM

You need to use a list instead of divs. Then I suggest using at least this for your CSS:
li {
    display: inline;
    list-style-type: none;
}

Was This Post Helpful? 0
  • +
  • -

#5 Gavisann  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 103
  • View blog
  • Posts: 382
  • Joined: 01-July 11

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 03:57 PM

Show us your CSS, I think you have other problems.
Was This Post Helpful? 0
  • +
  • -

#6 HTMLguyz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 24-September 11

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 04:05 PM

The entries still get below each other, although they stay in one "column" now. However I need them to stay in one line.

			li {
				display: inline;
				list-style-type: none;
			}
			
			div.slider1 {
				padding: 0 0 0 0;
				margin: 5px -145px;
			}

			div.slider2 {
				padding: 0 0 0 0;
				margin: -22px 80px;
			}
			
			div.slider3 {
				padding: 0 0 0 0;
				margin: 8px 400px;
			}
			div.slider4 {
				padding: 0 0 0 0;
				margin: 8px 400px;
			}
			div.slider5 {
				padding: 0 0 0 0;
				margin: 8px 400px;
			}

			div.x {
				margin: 0 0 0 15px;
				padding: 0 0 0 0;
				text-align:left;
				background:#eee;
				border:solid 1px #ddd;
				height:auto;
				width: 200px;
			}
				div.xx {
				margin: 0 0 0 15px;
				padding: 0 0 0 0;
				text-align:left;
				background:#eee;
				border:solid 1px #ddd;
				height:auto;
				width: 200px;
			}
				div.xxx {
				margin: 0 0 0 15px;
				padding: 0 0 0 0;
				text-align:left;
				background:#eee;
				border:solid 1px #ddd;
				height:auto;
				width: 200px;
			}
				div.xxxx {
				margin: 0 0 0 15px;
				padding: 0 0 0 0;
				text-align:left;
				background:#eee;
				border:solid 1px #ddd;
				height:auto;
				width: 200px;
			}
				div.xxxxx {
				margin: 0 0 0 15px;
				padding: 0 0 0 0;
				text-align:left;
				background:#eee;
				border:solid 1px #ddd;
				height:auto;
				width: 200px;
			}

This post has been edited by HTMLguyz: 24 September 2011 - 04:08 PM

Was This Post Helpful? 0
  • +
  • -

#7 Gavisann  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 103
  • View blog
  • Posts: 382
  • Joined: 01-July 11

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 04:06 PM

Show us your CSS.
Was This Post Helpful? 0
  • +
  • -

#8 HTMLguyz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 24-September 11

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 04:09 PM

Already did, edited my post.
Was This Post Helpful? 0
  • +
  • -

#9 Gavisann  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 103
  • View blog
  • Posts: 382
  • Joined: 01-July 11

Re: How to make div tags to appear in order?

Posted 24 September 2011 - 04:26 PM

I don't know what is up with your extraneous margins, but with those margens, you will never get them to appear the way you want.

To make it look like your image, I did this:

index.html
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<div class="slider1"><img src="big_button1.png" /><div class="x">
text text text</div></div>
<div class="slider2"><img src="big_button2.png" /><div class="xx">
text text text</div></div>
<div class="slider3"><img src="big_button3.png" /><div class="xxx">
text text text</div></div>
<div class="slider4"><img src="big_button4.png" /><div class="xxxx">
text text text</div></div>
<div class="slider5"><img src="big_button5.png" /><div class="xxxxx">
text text text</div></div>


main.css
li {
	display: inline;
	list-style-type: none;
}

div.slider1 {
	display: inline;
	padding: 0 0 0 0;
	margin: 5px 5px;
}

div.slider2 {
	display: inline;
	padding: 0 0 0 0;
	margin: 2px 8px;
}

div.slider3 {
	display: inline;
	padding: 0 0 0 0;
	margin: 8px 4px;
}
div.slider4 {
	display: inline;
	padding: 0 0 0 0;
	margin: 8px 4px;
}
div.slider5 {
	display: inline;
	padding: 0 0 0 0;
	margin: 8px 4px;
}

div.x {
	display: inline;
	margin: 0 0 0 15px;
	padding: 0 0 0 0;
	text-align:left;
	background:#eee;
	border:solid 1px #ddd;
	height:auto;
	width: 200px;
}
	div.xx {
	display: inline;
	margin: 0 0 0 15px;
	padding: 0 0 0 0;
	text-align:left;
	background:#eee;
	border:solid 1px #ddd;
	height:auto;
	width: 200px;
}
	div.xxx {
	display: inline;
	margin: 0 0 0 15px;
	padding: 0 0 0 0;
	text-align:left;
	background:#eee;
	border:solid 1px #ddd;
	height:auto;
	width: 200px;
}
	div.xxxx {
	display: inline;
	margin: 0 0 0 15px;
	padding: 0 0 0 0;
	text-align:left;
	background:#eee;
	border:solid 1px #ddd;
	height:auto;
	width: 200px;
}
	div.xxxxx {
	display: inline;
	margin: 0 0 0 15px;
	padding: 0 0 0 0;
	text-align:left;
	background:#eee;
	border:solid 1px #ddd;
	height:auto;
	width: 200px;
}

Was This Post Helpful? 0
  • +
  • -

#10 rajesh.kakawat  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 43
  • Joined: 03-January 11

Re: How to make div tags to appear in order?

Posted 26 September 2011 - 10:45 AM

you want image in one line, i don't know for what you are using div next to it,must be for image label. because time problem I have not used image but I have used color div instead of it.
This might help you ,just check the code and use it in your way
CSS
div.slider {
	height :200px;
	width :200px;
	float:left;
}


div.x {
	background:blue;
	height:200px;
	width: 200px;
}
	div.xx {
	background:black;
	height:200px;
	width: 200px;
}
	div.xxx {
	background:green;
	height:200px;
	width: 200px;
}
	div.xxxx {
	background:red;
	height:200px;
	width: 200px;
}


HTML
<div class="slider">
			<div class="x">text text text</div>
		</div>
		<div class="slider">
			<div class="xx">text text text</div>
		</div>
		<div class="slider"><div class="xxx">
		text text text</div></div>
		<div class="slider"><div class="xxxx">
		text text text</div></div>
		<div class="slider"><div class="xxxxx">
		text text text</div></div>

Was This Post Helpful? 0
  • +
  • -

#11 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 15
  • View blog
  • Posts: 278
  • Joined: 10-November 09

Re: How to make div tags to appear in order?

Posted 27 September 2011 - 02:17 PM

One of the things that I do is (sort of what rajesh.kakawat said.) float all of them in one direction or another - with a margin of 6 or 10 pixels (depending on need). That way, each of them is spaced out, evenly. Then I'd create a "clear" div after.

.clear {clear:both;}




<div class="clear"></div>


Here's an example I did a few years ago... look at the bottom of this page - you'll see the four DIVS side by side.

http://www.emscorporate.com/
Was This Post Helpful? 0
  • +
  • -

#12 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon


Reputation: 1111
  • View blog
  • Posts: 3,059
  • Joined: 28-November 09

Re: How to make div tags to appear in order?

Posted 29 September 2011 - 04:20 PM

You should know better than to ever suggest tables...

Make an unordered list, remove the styling, and set elements to display inline. Really I'd almost be tempted to use a dictionary list considering the title and element sub.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1