HTML and CSS

CSS Issue with positioning text

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Mar 2007

Posts: 36

Reputation: Robtyketto is an unknown quantity at this point

Solved Threads: 0

Robtyketto Robtyketto is offline

Offline

Light Poster

CSS Issue with positioning text

Nov 7th, 2008

Greetings,

I have a css file (See below) which has setting for THREE divisions "centercol", "leftcol" and "footer".

The stylesheet works fine until I add an image to the division (leftcol).

The settings get applied to the the footer division as printed at text is printed at the bottom of the page, however it appears the text appears in the centre of the page as if using the centercol settings.

I have tried adding a float setting to the division footer settings too without any luck.
Included code for the xhtml with the problem.

Can anyone help in getting the footer printer at the bottom left of the page?
The stylesheet works on another page but that doesnt use the division leftcol.

Hope this is enough information, thanks.

Note: Not sure why the text doesnt appear tabbed correctly, looks ok in my editor???

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

body 
{
background-image:url('primirahols.jpg');
background-repeat:no-repeat;
}
 
th 
{
	font-family: Times New Roman;
	font-size: 18px;
}
 
#centercol {
			margin: 0 210px 0 210px;
		}
 
#leftcol {
			float: left;
			width: 200px;
}
 
#footer {
		float: left;
		position: absolute;
    bottom: 0;
		text-align: center;
		}
 
a:link
{
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}
 
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	font-weight: bold;
	color: #0033ff;
	text-decoration: none;
}
 
a:active {
	text-decoration: none;
	}

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
  			<title>America</title>
 
        <meta name="author" content="Rob" />
      	<meta name="description" content="Primira Holiday website" />
      	<meta name="keywords" content="Primial Holidays Europe America Africa" />
 
      	<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
 
	<body>
 
				<div align="left">
						 	 <img alt="primira logo" src="primiralogo.gif" id="logo" />
 
							 <table width="100%" border="0" cellspacing="0" summary="">
  							 		<tr>
  										<th align="center"> <a href="index.htm" id="America">Return to Homepage</a></th>
										</tr>
  							</table>
					<hr />
				</div>
 
			<div id="leftcol">
					 <img alt="New York" src="newyork.jpg" id="newyork" width="200" height="400"/>
			</div>
 
			<div id="centercol">
						<h2>America</h2>			
 
						 <table width="100%" border="1" cellspacing="0" summary="">
						 <tr>
						 		 <th align="left">Column1</th>
						 		 <th align="left">Column2</th>
								 <th align="left">Column3</th>
						 </tr>
 
						 <tr>
						 		 <td>Data 1</td>
								 <td>Data 2</td>
								 <td>Data 3</td>
						 </tr>
 
						 </table>		
			</div>
 
			<div id="footer">
				<p>Author: <b>Rob</b> Last updated on <b>07 November 2008 18:49:04</b></p>
			</div>
 
  </body>
 
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
  			<title>America</title>
  
        <meta name="author" content="Rob" />
      	<meta name="description" content="Primira Holiday website" />
      	<meta name="keywords" content="Primial Holidays Europe America Africa" />
      	
      	<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	
	<body>
  			
				<div align="left">
						 	 <img alt="primira logo" src="primiralogo.gif" id="logo" />
						 	
							 <table width="100%" border="0" cellspacing="0" summary="">
  							 		<tr>
  										<th align="center"> <a href="index.htm" id="America">Return to Homepage</a></th>
										</tr>
  							</table>
					<hr />
				</div>
			
			<div id="leftcol">
					 <img alt="New York" src="newyork.jpg" id="newyork" width="200" height="400"/>
			</div>
			
			<div id="centercol">
						<h2>America</h2>			
						
						 <table width="100%" border="1" cellspacing="0" summary="">
						 <tr>
						 		 <th align="left">Column1</th>
						 		 <th align="left">Column2</th>
								 <th align="left">Column3</th>
						 </tr>
						 
						 <tr>
						 		 <td>Data 1</td>
								 <td>Data 2</td>
								 <td>Data 3</td>
						 </tr>
						 
						 </table>		
			</div>
				
			<div id="footer">
				<p>Author: <b>Rob</b> Last updated on <b>07 November 2008 18:49:04</b></p>
			</div>
				
  </body>
				
</html>

•

Join Date: Oct 2008

Posts: 89

Reputation: wickedsunny is an unknown quantity at this point

Solved Threads: 4

wickedsunny wickedsunny is offline

Offline

Junior Poster in Training

Re: CSS Issue with positioning text

Nov 7th, 2008

ok buddy i have gone through ur design the first and main thing which u shud know is that u shud start working inside a main continer or div. we don't start directly on a page. that is th only problem . put ur contest inside a main div they will be fine ok.

Ayaz Malik
Free online Photoshop/Drawing | Art Community

•

Join Date: Mar 2007

Posts: 36

Reputation: Robtyketto is an unknown quantity at this point

Solved Threads: 0

Robtyketto Robtyketto is offline

Offline

Light Poster

Re: CSS Issue with positioning text

Nov 7th, 2008

Sorted out tabbing and reset style settings within a break

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
#footerbr { 
	clear: both; 
}
#footerbr { 
	clear: both; 
}

Happy!

Last edited by peter_budo; Nov 9th, 2008 at 5:29 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.