Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Yet another image alignment issue

    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:



    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]

    Code:
    <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:
    Code:
    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.
    Last edited by Cyrosphere; 11-05-2009 at 06:39 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts
    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.

    Code:
    <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;
    }
    Code:
    <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>
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here

  • Users who have thanked karlosio for this post:

    Cyrosphere (11-04-2009)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up

    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 >_<

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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...
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Cyrosphere (11-04-2009)

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:



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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Cyrosphere (11-05-2009)

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:



    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?)

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

    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.

    Code:
    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*

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.




    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •