...

View Full Version : Site pretty much done, but have a few small bugs here, please help.



johnny0313x
03-30-2009, 05:40 AM
My portfolio site is pretty much finished, needs some fine tuning and it's good to go but there are a few things I'd like to fix up and or bugs. I have tested it in Safari and FF3 so far, I will have to wait til work on Monday to test it on windows browsers. Here are the issues/problems I am working with, maybe you guys have some pointers/suggestions?

[1] I am using a random scrip to display two images randomly at the top right of the page as featured artwork blah blah blah. However sometimes it looks fine and sometimes the second image drops down below. I can't figure out how to correct this.

[2] The footer at the bottom, I'd like that to lay flush at the very bottom of the browser window if possible.

If you guys have any ideas, please let me know here is my code for the index page:
http://www.lyonsdesign.info/

CSS:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


html, body {
margin: 0;
padding: 0;
background: #f6ddad;
}
#page-container {
width: 100%;
margin: 0 0px;
background-color: #f6ddad;
border-width: 0;
border-style: solid;
border-color: #000000;
}



#header {
width:100%;
height:307px;
background: #da0000 url(../bg.gif) 0 0 repeat-x;
}
#logo {
float: left;
width: 336px;
height: 285px;
color: #fff;
background: url(../logo.png) 0 0 no-repeat;
}
#featured {
float: right;
width: 560px;
height: 290px;
padding: 30px 0 0 0;
background: url(../featured.png) 0 0 repeat-x;
}


#featured p {
padding: 20px 20px 20px 20px;
margin: 80px 0 20px;
font-size: 1em;
display: inline;
color: #fff;

}


#featured h2 {
text-align: right;
width: 337px;
margin-left: -155px;
margin-bottom: 5px;
font-size: 1.1em;
position:relative;
left: 1px;
top: -18px;
color: #ccc;
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: large;
}
#nav {
background:#f6ddad;
width:100%;
text-align:center;
}
#links {
clear:both;
background:url(../links.gif) 0 0 no-repeat;
width:980px;
height:130px;
margin:0 auto;
padding:0;
}
#links span {
display: none;
}
#links li, #links a {
height:130px;
display:block;
}
#links li {
float:left;
list-style:none;
display:inline;
}
/*the below code is for those without images, to give visual feedback that they are indeed links*/
#links a:hover, #links a:focus {
text-decoration: none;
color: #ff0;
outline: 0;
this is acceptable because we are changing the image on :focus
}
#print {
width: 115px;
}
#print a:hover {
background:url(../links.gif) no-repeat;
background-position: 0 -130px; /*first number is horizontal, second is vertical*/
}
#portraits {
width: 102px;
}
#portraits a:hover {
background:url(../links.gif) -115px -130px no-repeat;
}
#web {
width: 102px;
}
#web a:hover {
background:url(../links.gif) -217px -130px no-repeat;
}
#ads {
width: 103px;
}
#ads a:hover {
background:url(../links.gif) -319px -130px no-repeat;
}
#all {
width: 96px;
}
#all a:hover {
background:url(../links.gif) -422px -130px no-repeat;
}
#resume {
width: 103px;
}
#resume a:hover {
background:url(../links.gif) -518px -130px no-repeat;
}
#me {
width: 110px;
}
#me a:hover {
background:url(../links.gif) -621px -130px no-repeat;
}
#contact {
width: 114px;
}
#contact a:hover {
background:url(../links.gif) -731px -130px no-repeat;
}
#learn {
width: 135px;
}
#learn a:hover {
background:url(../links.gif) -845px -130px no-repeat;
}
#content {
background: #ebe1ce;
height: 100%;
margin: 25px auto;
clear: both;
width: 800px;
text-align: center;
border-width: 1em;
border-style: solid;
border-color: #c2b293;
padding: 5px
}

#content h1, p {
margin: 20px 0;
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: small;
line-height: 150%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: center;
text-indent: 0ex;
color: #222;



}

span.LH
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:24px;
margin: 0 auto 0;
text-align: center;
font-weight: normal;
color: #222;

}

span.LH1
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:20px;
margin: 0 auto 0;
text-align: center;
font-weight: normal;
color: #222;

}


span.SH
{
font-family: Gill Sans, Verdana;
font-size: 11px;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
color: #333;

}

#footer {
background: url(../footerbg.gif) 0 0 repeat-x;
background: #c2b293;


margin: 0 0;
}

p.footer {
margin: 0 0 0 0;
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: xx-small;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: center;
text-indent: 0ex;
color: #222;

}

HTML:

<!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>Lyonsdesign.info - John Lyons Portfolio site</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="John Lyons Online e-portfolio" />
<meta name="keywords" content="Portfolio, John Lyons, graphic design, digital art, illustrator, photoshop" />
<meta name="author" content="lyonsdesign.info" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

</head>
<body>

<div id="page-container">
<div id="header">
<div id="logo"></div>
<div id="featured"><h2>Featured Portfolio Art:</h2><p>
&nbsp;&nbsp;<script language="JavaScript"><!--

//Javascript Created by Computerhope http://www.computerhope.com

//store the quotations in arrays

images = new Array(4);

images[0] = "<a href = 'icons13/random/random_01.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_01.gif' alt='Featured Portfolio Art' border='0'></a>";

images[1] = "<a href = 'icons13/random/random_02.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_02.gif' alt='Featured Portfolio Art' border='0'></a>";

images[2] = "<a href = 'icons13/random/random_03.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_03.gif' alt='Featured Portfolio Art' border='0'></a>";

images[3] = "<a href = 'icons13/random/random_04.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_04.gif' alt='Featured Portfolio Art' border='0'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

//done

// --></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<script language="JavaScript"><!--

//Javascript Created by Computerhope http://www.computerhope.com

//store the quotations in arrays

images = new Array(4);

images[0] = "<a href = 'icons13/random/random_05.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_05.gif' alt='Featured Portfolio Art' border='0'></a>";

images[1] = "<a href = 'icons13/random/random_06.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_06.gif' alt='Featured Portfolio Art' border='0'></a>";

images[2] = "<a href = 'icons13/random/random_07.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_07.gif' alt='Featured Portfolio Art' border='0'></a>";

images[3] = "<a href = 'icons13/random/random_09.gif' rel='lightbox' title='Featured Portfolio Art.'><img src='icons13/random/random_09.gif' alt='Featured Portfolio Art' border='0'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

//done

// --></script>

</p></div>
</div>
<div id="nav">
<ul id="links">
<li id="print"><a href="print.html"><span>Print</span></a></li>
<li id="portraits"><a href="portraits.html"><span>Portraits</span></a></li>
<li id="web"><a href="web.html"><span>Web</span></a></li>
<li id="ads"><a href="ads.html"><span>Ads</span></a></li>
<li id="all"><a href="all.html"><span>All</span></a></li>
<li id="resume"><a href="resume.html"><span>Resume</span></a></li>
<li id="me"><a href="about.html"><span>About Me</span></a></li>
<li id="contact"><a href="mailto:mail@lyonsdesign.info"><span>Contact</span></a></li>
<li id="learn"><a href="learn.html"><span>Learn</span></a></li>
</ul>
</div>
<div id="content">
<h1><span class="LH">Welcome to LyonsDesign.info</span>
<p><span class="SH">Why are you here? Let me tell you...</span></h1></p>
<p> <span class="LH1">S</span>omehow you stumbled across my portfolio site, and i'm glad you did! My name is John Lyons, and this site is dedicated to tell you about myself and what I love to do. My goal is to provide you with information about work from my portfolio, my resume, and some helpful tips for those interested in persuing a career or hobby in Graphic/Web Design.</p>

<p><span class="LH1">Y</span>ou might be here because you are reviewing my site for an open job position at your company that has my name all over it. You might be here because your bored and wanted to check out a random internet site for amusement. You might even be here because your fingers weren't working with your brain when you tried to search google for your favorite band, and if that's the case I'm sorry but feel free to look around anyways!</p>
<p><span class="SH">Still Interested? </span></h1></p>
<p><span class="LH1">I</span> started learning about website when I was only 12 years old. I acquired most of the skills and knowledge I have on web and Graphic design on my own spare time. Having found my passion, after finishing high school I continued my education at a two year institution and obtained an Associates Degree in Visual Communications. Since then I had been actively working on my own personal projects, as well as tutoring and working full time for a small company doing various graphic/web related work for their marketing promotions. I am always interested in expanding my knowledge in the field of graphic/web design and interested in taking on new challenges and projects as well as working as a team to accomplish new projects. If you are interested in working together or have any offers please contact me <a href="mailto:mail@lyonsdesign.info">here</a>. </p>
</div>
<div id="footer"><p> 2009 lyonsdesign.info all rights reserved</p></div>
</div>
</body>
</html>

abduraooft
03-30-2009, 07:55 AM
[2] The footer at the bottom, I'd like that to lay flush at the very bottom of the browser window if possible.
Try

html, body {lightbox.css (line 30)
background:#F6DDAD none repeat scroll 0;
height:100%;
margin:0;
padding:0;
}
#page-container {/*lightbox.css (line 35)*/
background-color:#F6DDAD;
border:0 solid #000000;
margin:0 0;
min-height:100%;
padding-bottom:3em;
position:relative;
width:100%;
}
* html #page-container{
height:100%;
}
#footer {/*lightbox.css (line 248)*/
background:#C2B293 none repeat scroll 0;
bottom:0;
left:0;
margin:0;
position:absolute;
width:100%;
}

Excavator
03-30-2009, 09:05 PM
Hello johnny0313x,
That's a good quick way to get the footer to the bottom of the page if you don't mind scrolling a bit to see it.

If you want the footer stuck at the bottom of the viewport when there isn't enough content to push it down there and have a page with longer content push the footer down to the bottom, have a look at this example - http://nopeople.com/CSS/full-height-layout/index.html
As always, view the source to see how it's done.

johnny0313x
04-03-2009, 06:09 AM
how about the image dropping, that my main concern. anyone?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum