...

View Full Version : Resolved Yet another image alignment issue



Cyrosphere
11-04-2009, 04:39 AM
Googling gave me several hits even isolating the search to specific help forums, keep in mind I'm a newb at this :)

Building a small website for a friend, a simple gallery for his sculpture and movie props work. At the bottom there's navigation buttons like a webcomic, forward and backward. Right now, they're doing this:

http://img.photobucket.com/albums/v329/TrinityFactor/siteprob1.jpg

The sidebar buttons work fine with no space between vertically stacked images, css seems fine there, but for some deranged reason it's not working here. This is what I have... [clipped to essentials, rest is working]



<base target="_self">
<link rel="stylesheet" type="text/css"
href="styles.css"/>
</head>

...

<p align="center">
<a href="img001page.htm"></p>

<div><p align="center"><img class="gallerycenter" border="0" margin="0" src="gallery_buttons_back1.png" width="112" height="80" alt="previous image"></a>

<a href="img003page.htm"><img class="gallerycenter" border="0" margin="0" src="gallery_buttons_forward1.png" width="112" height="80" alt="next image"></a></div>

<div><p align="center"><img class="gallerycenter" border="0" margin="0" src="home.png" width="200" height="50"></p></div>


Tried to <div> lump the top two buttons together and the bottom, various combinations, doesn't seem to be working.

CSS:


img.gallerycenter
{
margin: 0px;
border: 0px;
padding: 0px;
line-height: 0px;
display: inline-block;
vertical-align: top;
text-align: center;
margin-left: -2px; /* will makes images touch */
margin-right: -2px; /* will makes images touch */
}

Last 2 lines were copied from a similar problem on another forum, may or may not be helping here, I copypasted since I still don't really know what I'm doing...

Also tried with display: inline and display: block, no luck with any of them.

Driving me insane, any help greatly appreciated.

karlosio
11-04-2009, 05:23 AM
The p tag is causing a browsers default margin to appear, thats why you are getting a vertical gap. To remove it I have wrapped your navigation in a div called nav and declared a style rule in css to affect only the p tag inside and remove its margin and padding. Vertical gap removed.



<style type="text/css">
img.gallerycenter
{
margin: 0px;
border: 0px;
padding: 0px;
line-height: 0px;
display: inline-block;
vertical-align: top;
text-align: center;
margin-left: -2px; /* will makes images touch */
margin-right: -2px; /* will makes images touch */
}
div#nav p {
margin: 0;
padding: 0;
}




<div id="nav"><p align="center"><img class="gallerycenter" border="0" margin="0" src="gallery_buttons_back1.png" width="112" height="80" alt="previous image"></a>
<a href="img003page.htm"><img class="gallerycenter" border="0" margin="0" src="gallery_buttons_forward1.png" width="112" height="80" alt="next image"></a>
<p align="center"><img class="gallerycenter" border="0" margin="0" src="home.png" width="200" height="50"></p></div>

Cyrosphere
11-04-2009, 08:18 AM
Thanks for the speedy reply.

Learned something new with the div tags, but it's refusing to cooperate. Tried sticking a </p> at the end of the second line wondering if you'd missed that, and adding the <div id="nav"> to the third line, but it doesn't seem to work either way... blargh >_<

Excavator
11-04-2009, 09:02 AM
Hello Cryosphere,
You should be able to put those three buttons in a div and get them to work in the footer on your webpage like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {background: #fc6;}
* {margin:0;padding:0;border:0;}
#footer {
background: #0ff;
}
#buttons {
width: 224px;
margin: 0 auto;
text-align: center;
background: #C93;
}
#footer img {background: #f00;}
.gallerycenter {float: left;}
.gallerybottomcenter {
background: #00f;
}
</style>
</head>
<body>
<div id="footer">
<div id="buttons">
<a href="img001page.htm"><img class="gallerycenter" src="gallery_buttons_back1.png" width="112" height="80" alt="previous image" /></a>
<a href="img003page.htm"><img class="gallerycenter" src="gallery_buttons_forward1.png" width="112" height="80" alt="next image" /></a>
<a href="img002page.htm"><img src="home.png" alt="description" width="200" height="50" class="gallerybottomcenter" /></a>
<!--end buttons--></div>
<!--end footer--></div>
</body>
</html>

Cyrosphere
11-04-2009, 07:46 PM
Repping both of you folks since you have been a help, problem persists, probably in due part due to my lack of knowing how to apply this stuff.

Excavator, I had to edit part of your upper css (?) styles area because the colours were clashing horribly with the rest of the page's code. I may have clipped something important (deleted all the 'background: _' portions), because it's now doing this:

http://img.photobucket.com/albums/v329/TrinityFactor/argh2.png

Close, but no dice. (this is all supposed to be in the page's code and not the css file's code right?)

Excavator
11-04-2009, 10:22 PM
I put background colors on just to see where elements are going and to make sure they show up... you are right in removing the background:-; to get rid of them
You can add your copyright easily like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {background: #fc6;}
* {margin:0;padding:0;border:0;}
#footer {
margin: 20px 0;
border: 2px solid #f00;
text-align: center;
}
#buttons {
width: 224px;
margin: 0 auto;
text-align: center;
}
#footer img {background: #f00;}
.gallerycenter {float: left;}
.gallerybottomcenter {
background: #00f;
}
</style>
</head>
<body>
<div id="footer">
<div id="buttons">
<a href="img001page.htm"><img class="gallerycenter" src="gallery_buttons_back1.png" width="112" height="80" alt="previous image" /></a>
<a href="img003page.htm"><img class="gallerycenter" src="gallery_buttons_forward1.png" width="112" height="80" alt="next image" /></a>
<a href="img002page.htm"><img src="home.png" alt="description" width="200" height="50" class="gallerybottomcenter" /></a>
<!--end buttons--></div>
<p>copyright mumbo jumbo was supposed to be here</p>
<!--end footer--></div>
</body>
</html>


If it's moving around on you when you delete something, just back up till it goes back into place and that will show you what happened.

Cyrosphere
11-04-2009, 11:52 PM
Figured out what was wrong with the last picture, changed the image size slightly to remove redundant space and thus needed to change the set sizes in the code :\

The space of nightmares is gone!

Now just the final tweaks... it's now doing this:

http://img.photobucket.com/albums/v329/TrinityFactor/update2.png

If I can get that text below the home button properly that'd be great. Getting that home button centered would be great though. (this would be easier in flash wouldn't it?)

Excavator
11-05-2009, 01:30 AM
Both versions I've posted are centered the way you want. If your code isn't working the way you want, check it against a version that works or post your code so we can see what's gone wrong.

Cyrosphere
11-05-2009, 03:18 AM
Got the text working, how does /> differ from > out of curiosity?

Including everything then, I also have a minor javascript thing which has been working fine on its own (copypaste from some other website), so I havn't been including it (button swap out when mouseover occurs), could cause any conflict?

Right now, everything seems to be centered, and then stacked left, for some reason when I try and apply your tips to my code.




<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Gallery</title>

<script language="JavaScript">
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
</script>

<base target="_self">
<link rel="stylesheet" type="text/css"
href="styles.css"/>

<style type="text/css">
body, html {}
* {margin:0;padding:0;border:0;}
#footer {
margin: 0px;
border: 0px;
text-align: center;
}
#buttons {
width: 244px;
margin: 0 auto;
text-align: center;
}
#footer img {}
.gallerycenter {float: left;}
.gallerybottomcenter {}

</style>
</head>

<body behavior="fixed" bgcolor="#000000">
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

<font face="Tahoma" color="#FFFFFF">
<img border="0" src="../topicon.png" width="600" height="100" align="right" align="top" hspace="0" class="img2" style="float: right; margin-top: 0; margin-bottom: 0"></td></a>&nbsp;&nbsp;&nbsp;
</td></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="footer"><div id="buttons"><p align="center"><img border="0" src="fillerimage002.jpg" width="500" height="500"></p></div></div>
<p align="center">
&nbsp;</p>
<p align="center">
Image description here</p>
<p align="center">
&nbsp;</p>

<div id="footer">
<div id="buttons">
<a href="img001page.htm">
<img class="gallerycenter" id="img1" src="gallery_buttons_back_base.png" width="112" height="80" alt="previous image" onmouseover="FP_swapImg(1,0,'img1','gallery_buttons_back_active.png')" onmouseout="FP_swapImg(0,0,'img1','gallery_buttons_back_base.png')" fp-style="fp-btn: Border Left 1" fp-title="previous image" /></a>
<img class="gallerycenter" src="transparentblock.png" width="20" height="20">
<a href="img003page.htm">
<img class="gallerycenter" id="img2" src="gallery_buttons_forward_base.png" width="112" height="80" alt="next image" onmouseover="FP_swapImg(1,0,'img2','gallery_buttons_foward_active.png')" onmouseout="FP_swapImg(0,0,'img2','gallery_buttons_forward_base.png')" fp-style="fp-btn: Border Left 1" fp-title="next image" /></a>
<a href="gallery.htm"><img class="gallerybottomcenter" src="../home2.png" alt="home" width="500" height="50" /></a>
<!--end buttons--></div>
<p align="center">&nbsp;</p>
<font face="Tahoma" color="#FFFFFF" size="2">copyright yada yada</font>
<!--end footer--></div>

</body>
</html>


CSS looks like this, no real idea what I'm doing.


body
{
margin: 0px;
padding: 0px;
text-indent: 0px;
display: inline;
}

<style type="text/css">
img /* this is your class="img" attribute. */
{
margin: 0px;
border: 0px;
padding: 0px;
line-height: 0px;
display: inline;
vertical-align: top;
horizontal-align: right;
margin-left: -2px; /* will makes images touch */
margin-right: -2px; /* will makes images touch */
}

img.gallerycenter
{
margin: 0px;
border: 0px;
padding: 0px;
line-height: 0px;
display: inline-block;
vertical-align: top;
text-align: center;
margin-left: -2px; /* will makes images touch */
margin-right: -2px; /* will makes images touch */
}

div#nav p
{
margin: 0px;
padding: 0px;
}


*sigh*

Excavator
11-05-2009, 08:29 AM
I don't see a DocType... You should run your code through the validator. There is a lot there that needs fixed.

See the links about validation in my sig below.




.

Cyrosphere
11-05-2009, 06:38 PM
Thanks for the links, unfortunately I don't have the necessary knowledge for this (validation gave me some 80 odd errors, almost all are in the javascript areas which I haven't the slightest how to fix, so I just mucked with a few of the /> endings, it's around 65 errors now).

I did however have a minor epiphany, so a night's sleep did get me the solution I needed.. made another div tag with another image size wrapped inside the first footer tag, not the buttons tag.

So.. WHOHOO

Thank you very much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum