switching from tables to divs using css

Page 1 of 1

9 Replies - 912 Views - Last Post: 05 March 2008 - 11:46 AM

#1 seeing  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-July 07

switching from tables to divs using css

Posted 05 March 2008 - 01:52 AM

hello


i am new to using the div tag and would like to convert to it from my existing table page layout system however....


i cant seem to get three divs to line up on the same line


also, i seem to be creating a line break somehow in the container div (header)


where an i going wrong here?


please advise


testing using firefox v2.0.0.11


thanks


CSS

html,body
{
	background: #DDDDDD;
	spacing: 0;
	padding: 0;
	margin: 0px;
}

#header
{
	width: 645px;
	height: 50px;
	background: #000000;
}

#hleft
{
	float: left;
	background: #009999;
	width: 5px;
	height: 50px;
}

#hcenter
{
	background-image: url("gfx/head.jpg");
	width: 635px;
	height: 50px;
}

#hright
{
	float: right;
	background: #009999;
	width: 5px;
	height: 50px;
}



HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/Transitional.dtd">

<html>
<head>
<title>TEST DIVS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="layout.css" />

</head>

<body>
<center>

<div id="header">&nbsp; 
	
		<div id="hleft">&nbsp;</div>
		<div id="hcenter">&nbsp;</div>
		<div id="hright">&nbsp;</div>

</div>

</center>
</body>
</html>

This post has been edited by seeing: 05 March 2008 - 02:37 AM


Is This A Good Question/Topic? 0
  • +

Replies To: switching from tables to divs using css

#2 Israel  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 4
  • View blog
  • Posts: 788
  • Joined: 22-November 04

Re: switching from tables to divs using css

Posted 05 March 2008 - 02:16 AM

Hmmm... I can't get the last one yet. But I lined up the image on the left side by merely omitting your &nbsp's from your html. This makes a space in your page. I can't seem to get the right side yet, but I did want to remind you to go ahead and start putting closing semi-colons in your css. It didn't seem to affect this code, but that's a bad habit that can lead you to more problems on down the road.

This post has been edited by Israel: 05 March 2008 - 02:17 AM

Was This Post Helpful? 0
  • +
  • -

#3 seeing  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-July 07

Re: switching from tables to divs using css

Posted 05 March 2008 - 02:34 AM

hello israel

thanks for your reply

sorry about the missing ";" they are now added

i normally do use them, yes

thanks for the input


i have just noticed that after adding another div it overwrites the existing divs and they are no longer displayed >.<

all of the examples that i have found for making div table layouts use absolute positioning which i don't want to use if i can help it


ADDED CODE

CSS
html,body
{
	background: #DDDDDD;
	spacing: 0;
	padding: 0;
	margin: 0px;
}

#spacertop
{
	width: 645px;
	height: 5px;
	background: #FFDD44;

#header
{
	width: 645px;
	height: 50px;
	background: #000000;
}

#hleft
{
	float: left;
	background: #009999;
	width: 5px;
	height: 50px
}

#hcenter
{
	background-image: url("gfx/head.jpg");
	width: 635px;
	height: 50px;
}

#hright
{
	float: right;
	background: #009999;
	width: 5px;
	height: 50px
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/Transitional.dtd">

<html>
<head>
<title>TEST DIVS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="layout.css" />

</head>

<body>
<center>

<div id="spacertop"> </div>

<div id="header">
	
		<div id="hleft"> </div>
		<div id="hcenter"> </div>
		<div id="hright"> </div>

</div>

</center>
</body>
</html>



this is what i am trying to convert from


HTML
<body bgcolor="#DDDDDD">

<center>

<table border="0" cellpadding="0" cellspacing="0">
  
	<tr>
	  <td colspan="3" rowspan="1" height="70" width="645"> </td>
	</tr>
 
	<tr>
	  <td bgcolor="#009990" height="50" width="5"> </td>
	  <td><img style="width: 635px; height: 50px;" alt="header" src="gfx/head.jpg"></td>
	  <td bgcolor="#009990" height="50" width="5"> </td>
	</tr>

</table>
</center>
</body>
</html>

This post has been edited by seeing: 05 March 2008 - 03:08 AM

Was This Post Helpful? 0
  • +
  • -

#4 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: switching from tables to divs using css

Posted 05 March 2008 - 02:52 AM

Hi seeing,

Absolute positioning calculates it's values from the last positioned parent object. In other words, give your container relative positioning, then content within it will position from the containers dimensions. You can center the container by specifying its width, then setting the side margins to auto.

Alternatively, this site does it without positioning: http://www.pixy.cz/b...ss-3col-layout/

Hope that helps!
Was This Post Helpful? 0
  • +
  • -

#5 seeing  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-July 07

Re: switching from tables to divs using css

Posted 05 March 2008 - 05:02 AM

hello the hat


thanks for the input


am i doing something really wrong here then because i am
only trying to make a simple two row, three column table
layout that is centered on the page using divs and css?


the above html version using tables works exactly how i want it to

the above div css combo is going wappy on me >.<

This post has been edited by seeing: 05 March 2008 - 05:04 AM

Was This Post Helpful? 0
  • +
  • -

#6 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: switching from tables to divs using css

Posted 05 March 2008 - 07:35 AM

You're missing a closing bracket from your spacertop rule, but that's not the problem.

The simple way to fix it is tho change the order of your divs like so:
<div id="header">  
		<div id="hleft"> </div>
		<div id="hright"> </div>
		<div id="hcenter"> </div>
</div>


I don't like this method though, as from a usability point of view it's ordering your content incorrectly. The alternative is to float all three divs to the left:
#hleft
{
	float: left;
	background: #009999;
	width: 5px;
	height: 50px
}

#hcenter
{
	background-image: url("gfx/head.jpg");
	width: 635px;
	height: 50px;
	float: left;
}

#hright
{
	float: left;
	background: #009999;
	width: 5px;
	height: 50px
}

This post has been edited by thehat: 05 March 2008 - 08:20 AM

Was This Post Helpful? 0
  • +
  • -

#7 BenignDesign  Icon User is online

  • I cause cancer.
  • member icon




Reputation: 4656
  • View blog
  • Posts: 8,880
  • Joined: 28-September 07

Re: switching from tables to divs using css

Posted 05 March 2008 - 07:52 AM

This worked:

#hleft
{
	float: left;
	background: #009999;
	width: 5px;
	height: 50px;
}

#hcenter
{
	background-image: url("gfx/head.jpg");
	width: 635px;
	height: 50px;
}

#hright
{
	position:relative;
	float:right;
	background: #009999;
	width: 5px;
	height: 50px;
	top:-50px;
}


also removed all the &nbsp;'s from the html code.

This post has been edited by BenignDesign: 05 March 2008 - 07:55 AM

Was This Post Helpful? 0
  • +
  • -

#8 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: switching from tables to divs using css

Posted 05 March 2008 - 08:22 AM

As long as the center column height stays fixed ;)
Was This Post Helpful? 0
  • +
  • -

#9 seeing  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-July 07

Re: switching from tables to divs using css

Posted 05 March 2008 - 11:14 AM

great, thanks a lot for the feedback


i worked out that i could change the order of the
three divs which did indeed put them on the same line


YAY!!!!!!!!!!!


but, when i tested it in internet explorer six, the middle / center
div dropped the same as the right hand side was dropping before
the edit


i will try those edits that you have both suggested with the float
and the relative position in the css


i will post my results


thanks again


sophia
Was This Post Helpful? 0
  • +
  • -

#10 seeing  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-July 07

Re: switching from tables to divs using css

Posted 05 March 2008 - 11:46 AM

ok, back to YAY!!!!!!!!!


i tried the "all floating left" and it is displaying the divs in the correct place and on the same line in both firefox 2 and explorer 6.


i had to add a font size tag to allow the horizontal "spacers" of 5px to display at 5px in explorer.


i am going to leave the relative positioning until later on in my testing.


that's is this part of the conversion done.


i have added more divs and now the layout consists of 7 rows and 3 columns all following the example code and edits.


my next thing is to add an iframe to one of the divs but i guess that is a new thread.


thanks thehat, BenignDesign and Israel


this thread is "resolved"

CSS
html,body{background: #DDDDDD; spacing: 0; padding: 0; margin: 0px;}

#top{width: 645px;height: 20px;  background: #FFDD44;}
#tcenter{width: 645px;height: 20px;background: #FFDD44;}

#sheader{width: 645px; height: 5px; background: #009999; vertical-align: middle;}
#shcenter{font-size: 3px;background: #009999; width: 645px; height: 5px;}


#header{width: 645px; height: 50px;background: #000000;}

#hleft{float: left;  background: #009999; width: 5px; height: 50px}
#hcenter{float: left;  background-image: url("gfx/head.jpg"); width: 635px; height: 50px;}
#hright{float: left; background: #009999; width: 5px; height: 50px}


#content{width: 645px; height: 400px;}

#cleft{float: left; background: #009999; width: 5px; height: 400px}
#ccenter{float: left;  background: #FFFFFF; width: 635px; height: 400px;}
#cright{ float: left; background: #009999; width: 5px; height: 400px}

#sfooter{width: 645px; height: 5px; background: #99FFAA; vertical-align: middle;}
#sfcenter{float: left;font-size: 3px;background: #009999; width: 635px; height: 5px;}

#footer{width: 645px; height: 18px; background: #99FFAA; vertical-align: middle;}

#fleft{float: left; background: #009999; width: 5px; height: 18px}
#fcenter{float: left; background-image: url("gfx/footer3.jpg");width: 635px; height: 18px;}
#fright{float: left; background: #009999; width: 5px; height: 18px}

#sfooter1{width: 645px; height: 5px; background: #99FFAA; vertical-align: middle;}
#sfcenter1{float: left;font-size: 3px;background: #009999; width: 635px; height: 5px;}


HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/Transitional.dtd">

<html>
<head>
<title>TEST DIVS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="layout.css" />

</head>

<body>
	

<center>

<div id="top">

		<div id="tcenter"> </div>	
	
</div>

<div id="sheader">

		<div id="shcenter"> </div>	
	
</div>

<div id="header">
	
		<div id="hleft"> </div>
		<div id="hright"> </div>		
		<div id="hcenter"> </div>

</div>

<div id="content">
	
		<div id="cleft"> </div>
		<div id="cright"> </div>		
		<div id="ccenter"> </div>

</div>

<div id="sfooter">
	
		<div id="sfcenter"> </div>

</div>

<div id="footer">
	
		<div id="fleft"> </div>
		<div id="fright"> </div>		
		<div id="fcenter"> </div>

</div>

<div id="sfooter1">
		
		<div id="sfcenter1"> </div>

</div>

</center>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1