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

    Weird space on right side of page.

    http://www.lyonsdesign.info/index234.html

    For some reason there is a HUGE amount of extra space on the right side...i think it came when I started using lightbox for the image display. This is a rough draft so alot of stuff will change(the text and and the images will work) but you will be able to see the problem if you scroll right. The layout should just expand 100%

    I have only tested this in Firefox 3, there are a few more bugs in other browsers but for right now I'd like to fix this and work on those later.

    Any ideas?
    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><a href="featured/menu.jpg" rel="lightbox" title="my caption"><img src="featured/menu.jpg" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="featured/comic.jpg"></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? I thought so... </span></h1></p>
      <p><span class="LH1">I</span> started learning about website when I was only 12 years old. I self-taught my self most of what I know today, but decided when highschool was over to further my education and obtained my 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. 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 need some work done me 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>


    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: 540px;
    	height: 285px;
    	padding: 25px 0 0 0;
    	background: url(../featured.png) 0 0 repeat-x;
    }
    
    
    #featured p {
    	padding: 20px 20px 20px 20px;	
    	margin: 80px 580px 0 20px;
    	font-size: 1em;
    	display: inline;
    	color: #fff;
    	
    }
    
    
    #featured h2 {
      text-align: right;
      width: 337px;
      margin-left: -155px;
      margin-bottom: 0px; 
      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;
    	
    }

  • #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
    Start with fixing errors in your markup, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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