Lining Up Information In Three Column Lay Out

Popular Searches: FrontPage Hosting | FrontPage Templates | FrontPage Training | Free FrontPage

Logged in as: Guest

Printable Version

All Forums >>FrontPage Specific Issues >>FrontPage Newbies >>

Page: [1]

Name:

Message

<< Newer Topic Older Topic >>

bbidderonoh

Posts: 5
Member since: 10/19/2008

Lining Up Information In Three Colum...

I am very new to using CSS. I have attempted to set up a three column lay out design but I am having trouble with items in the left column moving down when I put an item in the center column.

My site is being tested on: http://dataentryathome.info/

Here is my CSS:
body {background-color: #ffffff;}

#header {width: 100%;
margin: .5em;}

h1 {color: #800000;
font-size: 2.5em;
text-align: center;
margin: 0em;}

p.header {color: #000000;
font-size: 1.25em;
font-weight: bold;
text-align: center;
margin: 0em;}

#content {position: relative;
width: 100%;}

#countdown-image {text-align: center;
position: relative;
background-color: #ffffff;
margin: 0em;
margin-top: 0px;}

div#navbar {height: 30px;
margin-left: 15%;
margin-right: 15%;
border-top: solid #000 1px;
border-bottom; solid #000 1px;
background-color: #FFCC00;}

div#navbar ul {margin: 0px;
padding: 0px;
font-family: arial, sans-serif;
font-size: small;
font-weight: bold;
color: #000000;
line-height: 30px;
white-space: no wrap;
text-align: center;}

div#navbar ul li {list-style: none;
display: inline;
padding: 7px 10px;}

#main-text { background-color: #ffffff;
position: relative;
margin-top: 5%;
margin-left: 15%;
border: solid 1px #800000;
width: 70%;}

h2 {color: #800000;
font-size: 1.5em;
text-align: center;
margin-top: -3%;}

#leftcol {background-color: #ffffff;
height: auto;
width: 20%;
margin-top: -20%;
margin-left: -23%;
text-align:center;}

img.leftcolads {float:left;
clear: left;}

My HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Great Gift Ideas For Pets And Their People</title>

<meta name="keywords" content="dog gifts, gifts under $10, dog collar, personalized collar, personalized dog collar,nascar for dogs, NFL for dogs, football jersey for dogs, MLB for dogs, jersey for dogs, baseball jersey for dogs, ornament" />

<link rel="stylesheet" type="text/css" href="Homepage-style.css">

</head>

<body>

<div id="header">

<h1>Cleveland Pet Store.Com</h1>
<p class="header">"Great Gift Ideas For Pets And Their People"</p>

</div>

<br />

<div id="navbar">
<ul>
<li>Home</li>
<li>Gifts Under $10</li>
<li>Licensed Gear</li>
<li>Personalized Collars</li>
<li>Magazines</li>
</ul>
</div>

<div id="content">

<div id="main-text">

<h2> </h2>

<h2>Featured Gifts Under $10</h2>

<img src="images/PawPrintOrnament.jpg" alt="Paw Print Ornament"/>
<div class="desc">Paw Print Ornament</div>

<img src="images/PawPrintOrnament.jpg" alt="Paw Print Ornament"/>
<div class="desc">Paw Print Ornament</div>

<div id="leftcol">

<img src="images/greenies.png" alt="Greenies" class="leftcolads"/>
<p><font color="#008000"><b>Greenies</b></font><br /><a href="http://www.greenies.com/en_US/FreeSample/">Free Sample</a> Treats For Dogs And Cats</p>

<img src="images/waggin.jpg" alt="Waggin Tail Cookies" class="leftcolads"/>
<p><font color="#800000"><b>Waggin Tail Cookies</b></font> Grain Free!</p>
<p><a href="http://www.easywebautomation.com/app/?af=863236">Try A Sample <align="right"></align="right"></a></p>

</div>
</div>
</div>

</body>

</html>

Report Abuse | Date: 11/11/2008 11:48:01 AM

newseed

Posts: 833
Member since: 1/13/2005
From: Florida

RE: Lining Up Information In Three C... (in reply to bbidderonoh)

The codes for the layout needs to be reworked because it's going to be problematic if you don't.

Firstly, using percentage to your design can look okay for some monitors but bad for others. The ideal way is to have your site set at a fixed width so that it doesn't have to expand or collaspe thus making content spread out too thin or be crunched up together.

Typically, 780px on up to 980px is good. Most common screens today are 1024px or higher and so using 980px is pretty safe.

The design itself is pretty boring and so this may turn off visitors unless your customer base are the ones that are still stuck in the internet of the 90's.

Also, you will want to read up on what codes are now deprecated. You are using <font> and <b> tags that are no longer valid. Avoid using <br /> tags. If you use <p> tags correctly, you will not have to use any break tags again.

You are using XHTML doctype for html. Why? Unless you are going to parse XML, use HTML Strict 4.01 instead.

I noticed you are creating a store. Are you going to handle the transactions via Paypal or some other services that accepts credit cards or are you going to have done all on your site? If the latter, have you purchased a dedicated IP for the store itself and a SSL certificate? How easy is it going to be to update your products such as detail changes?, price changes?, images?, etc.?

The plus side is that you are using <div>'s and you used an unordered list for your navigation.

_____________________________

I'm going to do it myself! Can you help me??
Link:The Kasper Group
A Graphic and Web Design Company

Report Abuse | Date: 11/12/2008 7:11:46 AM

TexasWebDevelopers

Posts: 7040
Member since: 9/24/2002
From: USA

RE: Lining Up Information In Three C... (in reply to bbidderonoh)

Here is a reworked version of your current design.
View source to copy code.
http://www.texaswebdevelopers.com/examples/frontpagetalk/cleveland-pet-store.htm
Although I stuck to your original 3-colum hybrid elastic, I also agree with newseed on all of his comments and that a fixed width would look better.

_____________________________

FrontPageTools.com:Templates, Tools and Training support this forum

Report Abuse | Date: 11/12/2008 7:15:58 AM

bbidderonoh

Posts: 5
Member since: 10/19/2008

RE: Lining Up Information In Three C... (in reply to bbidderonoh)

Thanks for the help!

I know the site is very boring but I am just trying to learn to get the basics to work before I venture to far down the road.

Your patience with this very green newbie is appreciated!

Beth

Report Abuse | Date: 11/12/2008 9:31:21 AM

Malcolm

Posts: 449
Member since: 9/30/2002
From: Texas,USA

RE: Lining Up Information In Three C... (in reply to bbidderonoh)

Hi Beth,
You may find this site of interest http://www.cssdrive.com/index.php/examples/ - on the right you have Fixed Layouts .... (stay away from the CSS frames though) http://www.dynamicdrive.com/style/layouts/category/C12/

There is some nice stuff on both those sites.

_____________________________

~~ Malc ~~

Report Abuse | Date: 11/12/2008 2:00:37 PM