Home : Forums : Webmasters' Lounge : Alignment problem

Alignment problem

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
23-Dec-06 02:54
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
Hi All,
I am having a problem with one of my web pages. The footer doesn't align properly.

Here is my CSS:
<style type="text/css">
*{
padding; 0px;
margin; 0px;
}
#header{
width:100%;
height:3%;
background:#f5f5dc;
}
a
{
float:left;
width:5em;
text-decoration:none;
color:#ffffff;
background-color:#800080;
padding:0.1em 0.1em;
border-right:1px #ffffff;
}
a:hover {background-color:#ff3333}
li {display:inline;}


#left{
width:10%;
height:950px;
background:#f5f5dc;
float:left;
}

#middle{
width:80%;
height:950px;
background:#f5f5f5;
float:left;
left:10%;
}

#right{
width:10%;
height:950px;
background:#f5f5dc;
float:left;
left:80%;
}

#footer{
width:100%;
height:12%;
background:#f5f5dc;

clear:both;
}

{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

#navigation ul li
{
list-style-type:none;
margn:0px;
padding:0px;
display:inline;
text-decoration:none;
background-color:#ffff00;
color:#ffffff;
}





h1
{
text-align: center;
font-size: 250%;
font-style: italic;
font-weight: bold;
font-family: "times new roman", serif;
}
h1
{
color:#dc143c;
}
h2
{
text-align: center;
font-size: 100%;
Font-family: arial;
}
h2
{
color:#dc143c;
}
h3
{
text-align:center;
font-size:120%
}
h3
{
color:#3333ff;
}
h4
{
text-align:left;
font-size:100%;
}
h4
{
color:#ff3399;
}
h5
{
text-align:center;

font-style:italic;
font-size:100%;
}
h5
{
color:#3333ff;
}
h6
{
text-align:center;

font-size:50%;
font-family:arial;
}
h6
{
color:#000000;
}




p
{
font-size:15px;
padding-left:.5cm;
padding-right:.5cm:
}
#leftmiddle
{
padding-left:.5cm;
padding-right:.5cm;
text-align:justify;
width:42%;
height:absolute;
background:transparent;
float:left;
}
#rightmiddle
{
padding-left:0;
padding-right:.5cm;
text-align:justify;
width:42%;
height:absolute;
background:transparent;
float:right;
}

ul.disc {list-style-type: disc};

p
{
text-justify;
}

p.leftmargin
{
margin-left:3cm;
}
p.rightmargin
{
margin-right:3cm;
}

p.positioning_left
{
position:relative;
left:10cm;
}
h1.absolutepositioning
{
position:absolute;
left:175px;
top:500px:
}
#h1.absolutepositioning2
{
position:absolute;
right:10px;
top:100px;
}
#images1{ position: absolute; right: 125px; top:100px;}
#images { position: absolute; right: 150px; top:520px;}
#imagepst { position: absolute; left:350px; top:400px;}
#textabt { position: absolute; left:200px; top:150px; right:0;}
#textabt2 { position: absolute; left:200px; top:650px; right:0;}
#container { position: relative; width: 100%;height:100px;}
#text {position: absolute; left: 10px; top: 5px;}
</style>
</style>

Here is my HTML:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0

Strict//EN"http://www.w3.org/TR/xhtml1/DT/html1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
<meta http-eqiv="content-type" content="text/html;
charset=iso-8859-1"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>

<title>nurseryministry.html</title>

<link rel="stylesheet" type="text/css"
href="column.css" />
</head>
<body>

<div id="wrapper">
<div id="header">

<div id="navigation">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="mensministry.html">Men</a></li>
<li><a href="womensministry.html">Women</a></li>
<li><a href="collegecareers.html">C and C</a></li>
<li><a href="youthministry.html">Youth</a></li>
<li><a href="children.html">Children</a></li>
<li><a href="nursery.html">Nursery</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="answers.html">Answers</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</div>
</div>
</div>

<div id="left"></div>

<div id="middle">

<h1>EMMANUEL BAPTIST CHURCH</h1>
<h2>NURSERY MINISTRY</h2>
<div id="container">
<div id="text">


All of our staff are volunteers that are loving and caring

adults that offer the best of care for your infants to 4

years of age.The nursery is a quiet, safe and comfortable

environement that offers Christian videos and games for

those that want to partcicpate.</td></tr></table>
<div id="leftmiddle">
<table>
<tr><td align="center"width="70%"><font size="+2">Nursery

Workers Schedule</font></td></tr></table>
<table width="90%>
<tr><td align="center"><u>Sunday School</u></td></tr>
<tr><td>01-07&nbsp&nbspWilma Payne & Ruby Nichols</td></tr>
<tr><td>01-14&nbsp&nbspJennifer Peabody & Diann

Hill</td></tr>
<tr><td><tr><td>01-21&nbsp&nbspJennifer Peabody & Martie

Ramsey</td></tr>
<tr><td><tr><td>01-28&nbsp&nbspJennifer Peabody & Kim

Forrester</td></tr>
<tr><td>&nbsp&nbsp</td></tr>

<tr><td align="center"><u>Sunday A.M.Services</u></td></tr>
<tr><td>01-07&nbsp&nbspNeda Petty, Kaitlyn & Hillary

Hill</td></tr>
<tr><td>01-14&nbsp&nbspKerri Gray, Kim Forrester, Marc &

Stephanie Hemme</td></tr>
<tr><td>01-21&nbsp&nbspSherry Fryer, Earl & Betty McCluskey

</td></tr>
<tr><td>01-28&nbsp&nbspSusan & Hannah Worley, Shelly &

Lauren Laird</td></tr>
<tr><td>&nbsp&nbsp</td></tr>


<tr><td align="center"><u>Sunday P.M. Services</u></td></tr>
<tr><td>01-07&nbsp&nbspButch & Kathy Hill</td></tr>
<tr><td>01-14&nbsp&nbspDuke & DaShaune Hill</td><tr>
<tr><td>01-21&nbsp&nbspWanda & Britney Tracy</td></tr>
<tr><td>01-28&nbsp&nbspMark & Carolyn Ramirez</td></tr>
<tr><td>&nbsp&nbsp</td></tr>
<br><br><br
<tr><td align="center"><u>Wednesday Services</u></td></TR>
<tr><td>01-03&nbsp&nbspVirginia Fitzwater & Patsy

Prier</td</tr>
<tr><td>01-10&nbsp&nbspCrystal Murphy & Cynthia

Gaines</td></tr>
<tr><td>01-17&nbsp&nbspMay Suez & B.J. Matthews</td></tr>
<tr><td>01-24&nbsp&nbspChristy Gross & Merideth

Bowers</td></tr>
<tr><td>01-31&nbsp&nbspRandy & LaVonne Watson</td></tr>
</table>
</div>

<div id="rightmiddle">
<div id="images1">
<img src=nursery1.gif><br>
<img src=nursery3.gif><br>
<img src=nursery6.gif><br>
<img src=nursery7.gif><br>
<u>Nursery Directors</u><br>
Stephanie Hemme<br>
Jennifer Peabody

</div>
</div>
<div id="right"></div>
<div id="footer">
<h6>
Emmanuel Baptist Church<br>
1453 Lindauer Road<br>
Forrest City, AR 72335
</h6>
<a href="mailto:Webmaster@emmanuelbaptistfc.org">
Webmaster</a>
</div>
</body>
</html>

On my other pages the <h6> and the Webmaster link align properly.

Thanks for any help
Buddy
23-Dec-06 03:56
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
Hi Buddy,

Hard to tell unless we can see the whole site in action. What's the URL?

Matt
ELATED : )

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
24-Dec-06 00:49
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
I haven't submitted it to the WWW. I have another site that I was gong to replace with this one when I got it finished.

Buddy
24-Dec-06 00:51
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
I am attempting to convert the original site to CSS an also make some modifications in order to make it more appealing.

Buddy
24-Dec-06 01:10
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
If you can just upload the web page and any associated style sheet(s) somewhere (for example, in a 'test' folder in your current site) then we'll take a look.

Cheers,
Matt
ELATED : )

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
26-Dec-06 00:42
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
I'm going to give this a try but don't know for sure that you will get everything you need.

The URL on the particular page is: http://www.emmanuelbaptistfc.org/nursery-test.html

The index for this new site is: http://www.emmanuelbaptistfc.org/index-emmanuelbaptistchurch.html

I don't know how to do the CSS but here is the code:
<style type="text/css">
*{
padding; 0px;
margin; 0px;
}
#header{
width:100%;
height:3%;
background:#f5f5dc;
}
a
{
float:left;
width:5em;
text-decoration:none;
color:#ffffff;
background-color:#800080;
padding:0.1em 0.1em;
border-right:1px #ffffff;
}
a:hover {background-color:#ff3333}
li {display:inline;}


#left{
width:10%;
height:950px;
background:#f5f5dc;
float:left;
}

#middle{
width:80%;
height:950px;
background:#f5f5f5;
float:left;
left:10%;
}

#right{
width:10%;
height:950px;
background:#f5f5dc;
float:left;
left:80%;
}

#footer{
width:100%;
height:12%;
background:#f5f5dc;

clear:both;
}

{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

#navigation ul li
{
list-style-type:none;
margn:0px;
padding:0px;
display:inline;
text-decoration:none;
background-color:#ffff00;
color:#ffffff;
}





h1
{
text-align: center;
font-size: 250%;
font-style: italic;
font-weight: bold;
font-family: "times new roman", serif;
}
h1
{
color:#dc143c;
}
h2
{
text-align: center;
font-size: 100%;
Font-family: arial;
}
h2
{
color:#dc143c;
}
h3
{
text-align:center;
font-size:120%
}
h3
{
color:#3333ff;
}
h4
{
text-align:left;
font-size:100%;
}
h4
{
color:#ff3399;
}
h5
{
text-align:center;

font-style:italic;
font-size:100%;
}
h5
{
color:#3333ff;
}
h6
{
text-align:center;

font-size:50%;
font-family:arial;
}
h6
{
color:#000000;
}




p
{
font-size:15px;
padding-left:.5cm;
padding-right:.5cm:
}
#leftmiddle
{
padding-left:.5cm;
padding-right:.5cm;
text-align:justify;
width:42%;
height:absolute;
background:transparent;
float:left;
}
#rightmiddle
{
padding-left:0;
padding-right:.5cm;
text-align:justify;
width:42%;
height:absolute;
background:transparent;
float:right;
}

ul.disc {list-style-type: disc};

p
{
text-justify;
}

p.leftmargin
{
margin-left:3cm;
}
p.rightmargin
{
margin-right:3cm;
}

p.positioning_left
{
position:relative;
left:10cm;
}
h1.absolutepositioning
{
position:absolute;
left:175px;
top:500px:
}
#h1.absolutepositioning2
{
position:absolute;
right:10px;
top:100px;
}
#images1{ position: absolute; right: 125px; top:100px;}
#images { position: absolute; right: 150px; top:520px;}
#imagepst { position: absolute; left:350px; top:400px;}
#textabt { position: absolute; left:200px; top:150px; right:0;}
#textabt2 { position: absolute; left:200px; top:650px; right:0;}
#container { position: relative; width: 100%;height:100px;}
#text {position: absolute; left: 10px; top: 5px;}
</style>






</style>

I appreciate your help.
Buddy
26-Dec-06 00:48
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
The url on my present site is: emmanuelbaptistfc.org

As you can see it was designed with tables and no CSS.

Thanks,
Buddy
26-Dec-06 00:49
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
The url on my present site is: emmanuelbaptistfc.org

As you can see it was designed with tables and no CSS.

I am learning a lot from your tutorials.

Thanks,
Buddy
27-Dec-06 07:41
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
It looks like the CSS you've posted is the same as the one at http://www.emmanuelbaptistfc.org/column.css (this is the one you're linking to from your test pages anyway).

You say "The footer doesn't align properly" but I don't know what effect you're trying to achieve. If by "footer" you mean:

Emmanuel Baptist Church
1453 Lindauer Road
Forrest City, AR 72335

then that is centred on both your test URLs. What would you like it to do?

(By the way, not sure you need that "height: 12%"
on your #footer selector. Also those "height:950px" are probably not a good idea as you don't know in advance how much vertical space the page content will take up.)

Cheers,
Matt
ELATED : )

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
27-Dec-06 23:15
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
I am attempting to have all of my pages appear as this one: http://www.emmanuelbaptistfc.org/index-emmanuelbaptistchurch.html

The page: http://www.emmanuelbaptistfc.org/nursery-test.html doesn't align the same as the others on my computer even via www.

What do you suggest as the height rather than the 950px.

Thanks a lot Matt
Buddy

11-Jan-07 21:47
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
Looks like you've changed http://www.emmanuelbaptistfc.org/nursery-test.htm to a different page so I can't comment on the differences between the pages at the moment!

I suggest not specifying a height at all and letting the contents of the DIV determine the height. If you're using floats within the DIV then you'll need to put a clearing element at the end of the floats before the closing div so that they take up space, eg:

<div>
...
<div style="clear: both;"> </div>
</div>

Cheers,
Matt
ELATED : )

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
12-Jan-07 03:49
DeleteDelete EditEdit
BuddyB BuddyB's avatar Rank: none
No stars yet
Posts: 11
From: Forrest City, AR, USA
Thanks Matt, I appreciate your assistance.

Buddy
19-Jan-07 07:24
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
No problem Buddy. Let us know if there's anything else we can help with!

Cheers,
Matt
ELATED : )

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated