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 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Gap in site..not sure why..

    Well..I recently wrote new code to give me site a nicer look...We added some rollover buttons among other things and now I have a large gap from the bottom of my banner to the start of the gallery and I have not a clue why so I'm hoping some of you guys could lend a hand in helping resolve the issue.

    (If you look at the site in IE, the buttons are ALL off..damn IE..nothing like coding for 2 browsers. I'm working to resolve that issue tomorrow or by Saturday.)

    My code is the xhtml/css. The php is from the gallery itself.

    Here's the code for that page:

    Code:
    <?php 
    include("file.php");
    /* You may need to edit lines 3 & 4 to reflect your site's setup.
    / g2Uri = Url to Gallery2 from your site's root with trailing slash (/)
    / embedUri = Url to this script from your site's root with trailing question mark (?)
    / loginRedirect = Path to login redirect from this script
    */ 
    require_once('embed.php'); // Path to Gallery's embed.php
    $ret = GalleryEmbed::init(array( 'g2Uri' => '/photo/gallery2/', 'embedUri' => '/photo/gallery2/index.php', 'fullInit' =>'false'));
    	if ( $ret )
        {
    	    echo( '   Here is the error message from G2:' );
    	    echo( $ret->getAsText() );
    	    return false;
        }
    	$gallery->setConfig('showSidebarBlocks', true); // you can hide the sidebarblocks if you want
    	$gallery->setConfig('login', true); // you can allow for login if you want
    //	$gallery->setConfig('defaultAlbumId', 1400); // set the default home album
        $g2moddata = GalleryEmbed::handleRequest();
        if (!isset($g2moddata['isDone'])) { 
            echo ('isDone is not defined, something very bad must have happened.'); 
    		exit; 
    	}
        if ($g2moddata['isDone']) { 
    		exit; /* uploads module does this too */ 
    	}
    	if ($ret) { 
    		print $ret->getAsHtml(); 
    	} 
    GalleryEmbed::done(); ?>
    <!-- Your Html Head -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Gallery | Albums that are filled with ugly cars and updated daily!</title>
    <link href="http://www.ugly-cars.com/gallery.css" rel="stylesheet" type="text/css" />
    <script src="rollover.js" type="text/javascript"></script>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Here at ugly-cars.com, we try to provide you with the the ugliest of ugly cars." />
    <meta name="keywords" content="ugly, ugly-cars, ugly cars, cars, trucks, suvs, wagons, ricer, ugly-cars.com, uglycars.com, uglycars, hideous cars, horrible, horrible cars, vehicles, ugly vehicles, redneck cars" />
    
    <!-- Gallery Stuff -->
    <?php echo $g2moddata['headHtml']; ?>
    
    </head>
    <!-- Your Html Body  -->
    <body>
    
    <!-- Header Banner -->
    <div id="header">
    <img src="http://www.ugly-cars.com/images/headerbanner.gif" border="0" alt="header banner" />
    </div>
    <!-- site wrapper div -->
    <div style="width:100%" align="center">
    <!-- Navigation Buttons -->
    <div id="button1">
    <a href="http://www.ugly-cars.com/index.html" onmouseover="roll('home', 'http://www.ugly-cars.com/images/home2.gif')"  onmouseout="roll('home', 'http://www.ugly-cars.com/images/home1.gif')" ><img id="home" name="home" src="http://www.ugly-cars.com/images/home1.gif" alt="home button" border="0" /></a>
    </div>
    
    <div id="button2">
    <img id="gallery" name="gallery" src="http://www.ugly-cars.com/images/gallery2.gif" alt="gallery button" border="0px" />
    </div>
    
    <div id="button3">
    <a href="http://www.ugly-cars.com/upload.html" onmouseover="roll('upload', 'http://www.ugly-cars.com/images/upload2.gif')"  onmouseout="roll('upload', 'http://www.ugly-cars.com/images/upload1.gif')" ><img id="upload" name="upload" src="http://www.ugly-cars.com/images/upload1.gif" alt="upload button" border="0px" /></a>
    </div>
    
    <div id="button4">
    <a href="http://www.ugly-cars.com/links.html" onmouseover="roll('links', 'http://www.ugly-cars.com/images/links2.gif')"  onmouseout="roll('links', 'http://www.ugly-cars.com/images/links1.gif')" ><img id="links" name="links" src="http://www.ugly-cars.com/images/links1.gif" alt="link button" border="0px" /></a>
    </div>
    
    <div id="button5">
    <a href="http://www.ugly-cars.com/support.html" onmouseover="roll('support', 'http://www.ugly-cars.com/images/support2.gif')"  onmouseout="roll('support', 'http://www.ugly-cars.com/images/support1.gif')" ><img id="support" name="support" src="http://www.ugly-cars.com/images/support1.gif" alt="support button" border="0px" /></a>
    </div>
    
    <div id="button6">
    <a href="http://www.ugly-cars.com/about.html" onmouseover="roll('about', 'http://www.ugly-cars.com/images/aboutus2.gif')"  onmouseout="roll('about', 'http://www.ugly-cars.com/images/aboutus1.gif')" ><img id="about" name="about" src="http://www.ugly-cars.com/images/aboutus1.gif" alt="about button" border="0px" /></a>
    </div>
    
    <!-- Gallery's Body -->
    
    <div style="width:980px">
    <?php echo $g2moddata['bodyHtml']; ?>
    </div>
    
    
    <!-- Your Html Footer  -->
    <!-- Footer Banner -->
    <div id="footer">
    <img src="http://www.ugly-cars.com/images/footerbanner.gif" border="0" alt="footer_banner" usemap="#footerMap" class="footerImg" />
    <map name="footerMap" id="footer_map">
    <area shape="rect" coords="927,68,822,74" alt="webfinity url" href="http://www.webfinitydesign.com" target="_blank" />
    <area shape="rect" coords="608,3,1002,19" alt="ugly-cars email" href="mailto: admin@ugly-cars.com" />
    </map>
    </div>
    </div>
    </body>
    </html>
    Code:
    @charset "utf-8";
    /* CSS Document */
    	
    body
    {
    background-color: black;
    }
    
    #header
    {
    background-image: url("images/headerbanner.gif");
    width: 980px;
    height: 245px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    padding: 0px;
    }
    
    #button1
    {
    position: relative;
    top: -50px;
    left: -434px;
    width: 100px;
    height: 22px;
    }
    
    #button2
    {
    position: relative;
    top: -72px;
    left: -334px;
    width: 100px;
    height: 22px;
    }
    
    #button3
    {
    position: relative;
    top: -94px;
    left: -234px;
    width: 100px;
    height: 22px;
    }
    
    #button4
    {
    position: relative;
    top: -116px;
    left: -134px;
    width: 100px;
    height: 22px;
    }
    
    #button5
    {
    position: relative;
    top: -138px;
    left: -34px;
    width: 100px;
    height: 22px;
    }
    
    #button6
    {
    position: relative;
    top: -160px;
    left: 66px;
    width: 100px;
    height: 22px;
    }
    
    #footer
    {
    background-image: url("images/footerbanner.gif");
    width: 980px;
    height: 100px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    padding: 0px;
    }

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    All your links (<div id="button2">, <div id="button3">....) are positioned as 'relative';
    that's causing the issue.

    As a quick work around you could try 'float:left;' on your buttons. But I'd recommend you go through some good CSS menus.

    Check this simple tutorial on css menus.
    http://www.cssplay.co.uk/menus/tutorial.html

    Also, post a link to your site so that other members can assist you.
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • Users who have thanked tagnu for this post:

    andrewjs18 (12-12-2008)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I assume your url from the code as yoursite.com/photo/gallery2/

    The first thing you need to do is to remove
    Code:
    <!-- Your Html Head -->
    from the top of your DOCTYPE, as IE will turn in to quirks mode, if it encounters anything before DOCTYPE.

    Now, to make a list of links, don't use divs. Use an unordered list (<ul>) instead, to make your markup semantic and avoid divitis.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    I assume your url from the code as yoursite.com/photo/gallery2/

    The first thing you need to do is to remove from the top of your DOCTYPE, as IE will turn in to quirks mode, if it encounters anything before DOCTYPE.

    Now, to make a list of links, don't use divs. Use an unordered list (<ul>) instead, to make your markup semantic and avoid divitis.
    First...the url is:
    http://www.ugly-cars.com

    Now, with an <UL> can I make them go vertical rather than horizontal and can they be used with buttons instead of just text?

    Again, I'm still fairly new to xhtml/css.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Now, with an <UL> can I make them go vertical rather than horizontal and can they be used with buttons instead of just text?
    Yes, check http://www.cssmenumaker.com/horizontal_css_menu.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    I'll look into this solution.

    In the mean time, I took down the main site so I can focus on getting it fixed.

    Thanks...

    I'll post back when I found the solution.

  • #7
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, so I'm taking your folks advice and putting the nav buttons in an <UL>.

    So, I wrote some code on a new test.html page to test it before making it live on my site. I can't get the buttons to go inline and I'm doing everything right, I think...

    here's my code:
    Code:
    <html>
    <head>
    <style type="text/css">
    #navigation
    {
    position: absolute;
    top: 400px;
    left:100px;
    float: left;
    width: 100px;
    height: 22px;
    }
    
    #navigation ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    #navigation ul li
    {
    display: inline;
    }
    
    #navcontainer ul li a 
    { 
    text-decoration: none;
    }
    </style>
    <script src="rollover.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="navigation">
    <ul>
    <li><a href="index.html" onmouseover="roll('home', 'images/home2.gif')"  onmouseout="roll('home', 'images/home1.gif')" ><img id="home" name="home" src="images/home1.gif" alt="home button" border="0px" /></a></li>
    <li><a href="upload.html" onmouseover="roll('upload', 'images/upload2.gif')"  onmouseout="roll('upload', 'images/upload1.gif')" >
    <img id="upload" name="upload" src="images/upload1.gif" alt="upload button" border="0px" /></a></li>
    </ul>
    </div>
    </body>
    </html>

  • #8
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, I got it working. I had to adjust my width in the css.

    How do I close the gap between buttons now?

    http://www.ugly-cars.com/test.html

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Have a try by
    Code:
    #navigation li {/*www.ugly-cars.com (line 35)*/
    /*display:inline;*/
    float:left;
    ...........
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    andrewjs18 (12-12-2008)

  • #10
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Have a try by
    Code:
    #navigation li {/*www.ugly-cars.com (line 35)*/
    /*display:inline;*/
    float:left;
    ...........
    }
    awesome...thanks.


  •  

    Posting Permissions

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