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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Site pretty much done, but have a few small bugs here, please help.

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    [2] The footer at the bottom, I'd like that to lay flush at the very bottom of the browser window if possible.
    Try
    Code:
    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%;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

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

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    how about the image dropping, that my main concern. anyone?


  •  

    Posting Permissions

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