Photos not alignining correctly

[jj1234]

I am trying to work out why the pictures and not aligninig correctly in the faq and contact pages.

They should be inside the body of the site and should be the same width from the right hand body of the site, as the dotted line is from the photos.
I have tried to work this out but cannot see what l am doing wrong.
Any help would really be appreictated.

http://clubamigos.port5.com/faq.htm

http://clubamigos.port5.com/contact.html

 

[BillyRayPreachersSon]

They are being pushed down because of the top and bottom margins on the p elements in rightcol. Change your rightcol p margin CSS from this:

margin : 1.2em 0.5em 1.2em 0.5em;

to this:

margin: 0px 0.5em 0px 0.5em;

to solve this.

Incidentally, you really should remove all of your font tags - they're so outdated its unfunny.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

You have [tt]padding-top: 7em;[/tt] on that element. How come you do that or rather, what is that supposed to accomplish? There are better ways to position things than the visually measure distance in ems and try to make it work.

 

[jj1234]

It still appears to be slightly misaligned on the faq page, any ideas as to what is causing this?

[

http://clubamigos.port5.com/faq.htm

[/url]

this is the css:

html, body {
margin : 0;
padding : 0;
}

body {
font : 12px "Lucida Sans Unicode", Verdana, sans-serif;
color : #333333;
background: #e9eef4;
width : 100%;
}

a:link {
color : blue;
background : transparent;
text-decoration : none;
}

a:visited {
color : purple;
text-decoration : none;
}

a:hover {
color : red;
}

a:active {
color : red;
}

h1 {
text-align : center;
font-weight : bolder;
font : 20px "Lucida Sans Unicode", Verdana, sans-serif;
margin: 0px;
clear: left;
padding-top: 2px;
padding-bottom: 8px;
}

#wrapper {
text-align : left;
padding : 0;
border-top : 1px solid #66635C;
border-bottom : 1px solid #66635C;
border-left : 1px solid #66635C;
border-right : 1px solid #66635C;
margin : 5px auto;
width : 750px;
background : url(../../Images/coffeebckgr.jpg) repeat-y;
}

#header {
background-image : url(../../club_amigo_logo.jpg);
background-repeat : no-repeat;
margin: 0px;
height : 107px;
}

#content {
margin: 0px;
padding : 10px;
background : #ffffff;
}

#content p {
margin : 0 0px 0px 0;
text-align : justify;
}

#rightcol {
float : right;
width : 0px;
margin : 7em 0px 0 0;
border-left : 1px solid #9CB2B8;
padding : 1px 0px 0 5px;
padding-left: 10px;
}

#rightcol p {
margin: 0px 0.5em 0px 0.5em;
font-size : 10px;
}



#rightcol img {
margin: 0 0 25px 0;
}

#navcontainer {
margin-top : 0;}


#navcontainer ul {
list-style : none;
margin : 0 0 0 0px; /* adjust left margin to suit */
padding : 0;
text-align : center;
}

#navcontainer li {
display : block;
float : left;
}

#navcontainer LI A {

BORDER-RIGHT: #84979c 1px solid;

BORDER-TOP: #84979c 1px solid;

DISPLAY: block;

BACKGROUND: #deffff;

WIDTH: 149px;

COLOR: #444;

BORDER-BOTTOM: #84979c 1px solid;

TEXT-DECORATION: none;

TEXT-ALIGN: CENTER;

padding-top: 2px;

padding-bottom: 2px;

}


#navcontainer #last {

BORDER-RIGHT: none;

WIDTH: 150px

}

#navcontainer ul li a:hover {
color : #000;
background : #FFCCCC;
}

#navcontainer a:active {
background : #ffecd2;
color : #fff;
}

#specialborder {
border-right : 1px solid #84979C;
}

#searchform {
background: #fff;
padding: 2px;
width: auto;
border: 1px solid #999;
}

#searchbut {
background: #fff;
font-size: 90%;
width: auto;
border: 1px solid #333333;
margin-left : 2px;
}

#searchinput {
background: #deffff;
font-size: 90%;
border: 1px solid #1d4151;
margin-left : 2px;
width : 53px;
}

#footer {
border-bottom : 1px solid #000;
border-top : 1px solid #000;
margin : 0 28px 0 25px;
padding : 10px;
}

#counter {
display : none;
}

 

[BillyRayPreachersSon]

Yes - two things. You still have a top margin of 7em on rightcol - remove it. Then, you need to give rightcol some width - at the moment, you've told the browser it is 0px wide - which is clearly not the case... so basically the browser is assigning no space to it. Put a proper width in and you should be set.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

And you really should remove the font tags!!

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ca8msm]

And the empty paragraphs:

<p>&nbsp;</p>

Use margins instead if you want to create larger spaces between paragraphs.



____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jj1234]

I have removed the 7em space on the top margin and tried to give the rightcol some width but it looks wrong in Firefox but correct in IE.

http://clubamigos.port5.com/faq.htm

 

[BillyRayPreachersSon]

Oh give me strength. You've given it a width of 10px, when the images contained in it are far wider than that.

When I said to give it a "proper width", I meant one that was actually big enough to contain the content you want to put in it. Surely this is common sense - you don't try to fit 2 litres of water into a 1 litre water bottle!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jj1234]

I am still having problems, l have tried changing margins padding, borders etc , but still l cannot get the photos to be aligned correctly. Any help would really really be appreciated.


If you see both faq and contact pages you will see that the photos are not aligned correctly.

I would like the photos to look as follows:

1. Dotted line to go all the way down the page. (see red text line).In firefox this line goes beyond the page content but looks fine in IE.

2. Even space between top photo and navbar and bottom photo and bottom of content of page. (see blue text line).

3. Even gap betwen left hand side of photos and line and right hand side of photos and right hand border of content.(see green text line).

see screenshot:

http://clubamigos.port5.com/photos_problem.jpg