...

View Full Version : Gap in site..not sure why..



andrewjs18
12-11-2008, 05:27 AM
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:



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




@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;
}

tagnu
12-11-2008, 06:39 AM
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.

abduraooft
12-11-2008, 06:58 AM
I assume your url from the code as yoursite.com/photo/gallery2/ :)

The first thing you need to do is to remove

<!-- 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 (http://www.w3schools.com/HTML/html_lists.asp) (<ul>) instead, to make your markup semantic (http://boagworld.com/technology/semantic_code_what_why_how/) and avoid divitis (http://csscreator.com/?q=divitis).

andrewjs18
12-11-2008, 07:55 AM
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 (http://www.w3schools.com/HTML/html_lists.asp) (<ul>) instead, to make your markup semantic (http://boagworld.com/technology/semantic_code_what_why_how/) and avoid divitis (http://csscreator.com/?q=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.

abduraooft
12-11-2008, 08:08 AM
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

andrewjs18
12-11-2008, 05:21 PM
Yes, check http://www.cssmenumaker.com/horizontal_css_menu.php

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.

andrewjs18
12-11-2008, 06:59 PM
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:


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

andrewjs18
12-12-2008, 03:46 AM
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

abduraooft
12-12-2008, 06:41 AM
Have a try by

#navigation li {/*www.ugly-cars.com (line 35)*/
/*display:inline;*/
float:left;
...........
}

andrewjs18
12-12-2008, 06:04 PM
Have a try by

#navigation li {/*www.ugly-cars.com (line 35)*/
/*display:inline;*/
float:left;
...........
}

awesome...thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum