...

View Full Version : css positioning help



andrewjs18
02-26-2009, 07:43 PM
I'm in need of some help trying to position a form on my page. The way it is right now, positioning the form moves my ads around on my upload page. While the ads are positioned in the same location on the index page. I'm still new with css & xhtml so I'm trying to learn the best way to code things yet. I'm guessing it's something to do with how I'm positioning the items on the page. Any help is appreciated.

Here's the url:
http://ugly-cars.com/test/upload.html

currently, the only other page besides that upload page that is done is the home page.

here's the actual code:

css:


body
{
background-color: black;
}

div
{
margin: 0px;
padding: 0px;
font-weight: normal;
border: 0px;
}

.forminfo
{
position: relative;
top: -1100px;
left: 200px;
width: 300px;
background-color:#ACD095;
text-align: center;
padding:10px;
border:solid thin #167A58;
}

ul
{
list-style: none;
}

#main
{
background-image: url("images/main.jpg");
background-repeat: no-repeat;
width: 985px;
height: 995px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}

#home
{
position: relative;
top: -875px;
left: 135px;
width: 101px;
height: 50px;
}

#gallery
{
position: relative;
top: -925px;
left: 237px;
width: 101px;
height: 50px;
}

#upload
{
position: relative;
top: -975px;
left: 339px;
width: 101px;
height: 50px;
}

#about
{
position: relative;
top: -1025px;
left: 441px;
width: 101px;
height: 50px;
}

#links
{
position: relative;
top: -1075px;
left: 543px;
width: 101px;
height: 50px;
}

#support
{
position: relative;
top: -1125px;
left: 645px;
width: 101px;
height: 50px;
}

#blog
{
position: relative;
top: -1175px;
left: 747px;
width: 101px;
height: 50px;
}


#ad
{
position: relative;
top: -1680px;
left: 722px;
width: 160px;
height: 600px;
}

#flash
{
position: relative;
top: -1090px;
left: 116px;
width: 487px;
height: 580px;
}

#form
{
position: relative;
top: -1090px;
left: 116px;
width: 300px;
}

a.home
{
display: block;
width: 101px;
height: 50px;
text-decoration: none;
background: url('images/home.png');
}

a.home:hover
{
background-position: -101px 0;
}

a.gallery
{
display: block;
width: 101px;
height: 50px;
text-decoration: none;
background: url('images/gallery.png');
}

a.gallery:hover
{
background-position: -101px 0;
}

a.upload
{
display: block;
width: 101px;
height: 50px;
text-decoration: none;
background: url('images/upload.png');
}

a.upload:hover
{
background-position: -101px 0;
}

a.about
{
display: block;
width: 101px;
height: 50px;
text-decoration: none;
background: url('images/about.png');
}

a.about:hover
{
background-position: -101px 0;
}

a.links
{
display: block;
width: 101px;
height: 50px;
text-decoration: none;
background: url('images/links.png');
}

a.links:hover
{
background-position: -101px 0;
}

a.support
{
display: block;
width: 101px;
height: 50px;
text-decoration: none;
background: url('images/support.png');
}

a.support:hover
{
background-position: -101px 0;
}

a.blog
{
display: block;
width: 101px;
height: 50px;
text-decoration: none;
background: url('images/blog.png');
}

a.blog:hover
{
background-position: -101px 0;
}


xhtml:


<!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>Ugly-Cars.com | Upload your ugly cars today</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main_layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Main Image -->
<div id="main">
<img src="images/main.jpg" alt="main ugly cars background" title="" usemap="#map" border="0" />
<map name="map" id="map">
<area shape="rect" coords="492,961,664,973" href="http://www.webfinitydesign.com" target="_blank" alt="webfinity design link" title="webfinitydesign.com website" /></map>

<!-- Navigation Buttons -->
<div id="home">
<a href="http://www.ugly-cars.com/test/index.html" class="home" title="You are here, the ugly-cars.com home page"></a>
</div>

<div id="gallery">
<a href="http://www.ugly-cars.com/photo/gallery2/index.php" class="gallery" title="Check out our filled gallery with photos added daily"></a>
</div>

<div id="upload">
<a href="http://www.ugly-cars.com/test/upload.html" class="upload" title="Upload your ugly car photos here"></a>
</div>

<div id="about">
<a href="http://www.ugly-cars.com/test/about.html" class="about" title="Find out about the owners of ugly-cars.com"></a>
</div>

<div id="links">
<a href="http://www.ugly-cars.com/test/links.html" class="links" title="Sites the owners frequent &amp; supporters of ugly-cars.com"></a>
</div>

<div id="support">
<a href="http://www.ugly-cars.com/test/support.html" class="support" title="Help keep ugly-cars.com alive"></a>
</div>

<div id="blog">
<a href="http://www.ugly-cars.com/blog/" class="blog" title="Ugly-cars.com blog from the site owners"></a>
</div>
<!-- End Navigation -->

<!-- Upload Form -->
<p class="forminfo">Please fill this form out in its entirety. After submitting the form, allow up to 2 days for us to review the photos before uploading them to the gallery.<br />
* Denotes a required field.</p>
<div id="form">
<form>
<ul>
<li>Name*<br />
<input type="text" size="30" name="name" /></li>
<li><br /></li>
<li>State*<br />
<input type="text" size="30" name="state" /></li>
<li><br /></li>
<li>Referral<br />
<input type="text" size="30" name="referral" /></li>
<li><br /></li>
<li>Make*<br />
<input type="text" size="30" name="make" /></li>
<li><br /></li>
<li>Model*<br />
<input type="text" size="30" name="model" /></li>
<li><br /></li>
</form>
</div>

<!-- Google Ads -->
<div id="ad">
<script type="text/javascript">
//<![CDATA[
<!--
google_ad_client = "pub-1710962138880574";
/* 160x600, created 2/18/09 */
google_ad_slot = "4395547452";
google_ad_width = 160;
google_ad_height = 600;
//-->
//]]>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<!-- Start of StatCounter Code -->
<script type="text/javascript">
sc_project=3762899;
sc_invisible=1;
sc_partition=40;
sc_security="0b12491f";
</script>

<script type="text/javascript"
src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div
class="statcounter"><a title="web stats" class="statcounter"
href="http://www.statcounter.com/free_web_stats.html"><img
class="statcounter"
src="http://c41.statcounter.com/3762899/0/0b12491f/1/"
alt="web stats" /></a></div></noscript>
<!-- End of StatCounter Code -->

</div>
</body>
</html>

Excavator
02-26-2009, 08:20 PM
Hello andrewjs18 ,
If you were to make a 2 column layout for that, you could have your forminfo and form in a left column that would line up with the left boltplate of your background image, and do the same with a right column for your ads.
You could get rid of all that unnecessary positioning that way, along with those negative margins. It would be much easier and more cross browser compatable.

Have a look at a couple 2 column layouts here

one (http://bonrouge.com/2c-hf-fixed.php)
two (http://nopeople.com/CSS/equal_length_columns/index.html)

You should also have a look at the links about validation in my sig below.

For now, this positions your form nicely in FF, didn't try it in anything else:

#form
{
position: relative;
top: -1090px;
left: 216px;
width: 300px;
}

#ad
{
position: relative;
top: -1585px;
left: 722px;
width: 160px;
height: 600px;
}

andrewjs18
02-26-2009, 10:53 PM
Hello andrewjs18 ,
If you were to make a 2 column layout for that, you could have your forminfo and form in a left column that would line up with the left boltplate of your background image, and do the same with a right column for your ads.
You could get rid of all that unnecessary positioning that way, along with those negative margins. It would be much easier and more cross browser compatable.

Have a look at a couple 2 column layouts here

one (http://bonrouge.com/2c-hf-fixed.php)
two (http://nopeople.com/CSS/equal_length_columns/index.html)

You should also have a look at the links about validation in my sig below.

For now, this positions your form nicely in FF, didn't try it in anything else:

#form
{
position: relative;
top: -1090px;
left: 216px;
width: 300px;
}

#ad
{
position: relative;
top: -1585px;
left: 722px;
width: 160px;
height: 600px;
}


thanks for the links...I'll look over them closely when I'm not sick...as for the code you provided, it positions the ad and form nicely, but then when you go look at the index (home) page, the ad isn't positioned properly. I guess the problem I was running into was keeping the existing code I didn't want to move in the same position when I added new content into the css. pretty much, the nav buttons and the ad are almost at a fixed position on the page while the left block will be changing from page-to-page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum