SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Ohio, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Content div is shifted left from header div

    I'm working on an internal project. When I run my code from Notepad++, in all browsers except Firefox, the content area appears shifted left from the header. If I click minimize, then maximize, it straightens up. I can't share a link since it's not on the web, but I'll include my code. I tried adding screenshots but kept getting en error on upload. I looked at resizePanel() and adjusted some CSS but nothing worked.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Scroll Horizontally</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen"  />
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <!--<script type="text/javascript" src="js/jquery-1.3.2.js"></script>-->
    
    <script>
    
    $(document).ready(function() {
    
    	$('a.panel').click(function () {
    
    		$('a.panel').removeClass('selected');
    		$(this).addClass('selected');
    		
    		current = $(this);
    		
    		$('#wrapper').scrollTo($(this).attr('href'), 800);		
    		
    		return false;
    	});
    
    	$(window).resize(function () {
    		resizePanel();
    	});
    	
    });
    
    function resizePanel() {
    
    	width = $(window).width();
    	height = $(window).height();
    
    	mask_width = width * $('.item').length;
    		
    	$('#debug').html(width  + ' ' + height + ' ' + mask_width);
    		
    	$('#wrapper, .item').css({width: width, height: height});
    	$('#mask').css({width: mask_width, height: height});
    	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
    		
    }
    /*
    $(document).ready(function(){
    	$(".trigger").click(function(){
    		$(".panel1").toggle("fast");
    		$(this).toggleClass("active");
    		return false;
    	});
    });*/
    </script>
    
    
    </head>
    <body>
    
    <div id="wrapper">
    
    	<div id="container1">
    		<div id="header">
    			<div id="header-logo" ><img src="img/big_corn_green.png" width="800" height="200" border="0" ></div>			
    			<div id="nav">
    				<div class="menu">
    					<ul>
    						<li><a href="#item1" class="panel">Home</a></li>
    						<li><a href="#item2" class="panel">Hiring Process</a></li>
    						<li><a href="#item3" class="panel">Educational Partner</a></li>
    						<li><a href="#item4" class="panel">Funding</a></li>
    						<li><a href="#item5" class="panel">FAQ</a></li>
    						<li><a href="#item6" class="panel">Contact Us</a></li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	<div id="mask">
    
    		<div id="item1" class="item">			
    			<a name="item1"></a>
    			<div class="content">item1 
    
    			</div>
    		</div>
    
    		<div id="item2" class="item">
    			<a name="item2"></a>
    			<div class="content">
    				<article class="accordion">  
    					<section id="acc1">
    						<h2><a href="#acc1">Flurries</a></h2>
    						<p>This content appears on page 1.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
    						<p class="accnav"><a href="#acc2">next ➧</a></p>
    					</section>
    	
    					<section id="acc2">
    						<h2><a href="#acc2">Shakes</a></h2>
    						<p>This content appears on page 2.</p>
    						<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.</p>
    						<p class="accnav"><a href="#acc3">next ➧</a></p>
    					</section>
    	
    					<section id="acc3">
    						<h2><a href="#acc3">Slushes</a></h2>
    						<p>This content appears on page 3.</p>
    						<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu.</p>
    						<p class="accnav"><a href="#acc4">next ➧</a></p>
    					</section>
    	
    					<section id="acc4">
    						<h2><a href="#acc4">Sundaes</a></h2>
    						<p>This content appears on page 4.</p>
    						<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.</p>
    						<p class="accnav"><a href="#acc5">next ➧</a></p>
    					</section>
    	
    					<section id="acc5">
    						<h2><a href="#acc5">Cones</a></h2>
    						<p>This content appears on page 5.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
    						<p class="accnav"><a href="#acc6">next ➧</a></p>
    					</section>
    
    					<section id="acc6">
    						<h2><a href="#acc6">Sandwiches</a></h2>
    						<p>This content appears on page 6.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
    						<p class="accnav"><a href="#acc7">next ➧</a></p>
    					</section>					
    
    					<section id="acc7">
    						<h2><a href="#acc7">Sides</a></h2>
    						<p>This content appears on page 7.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
    						<p class="accnav"><a href="#acc8">next ➧</a></p>
    					</section>					
    
    					<section id="acc8">
    						<h2><a href="#acc8">Beverages</a></h2>
    						<p>This content appears on page 8.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
    						<p class="accnav"><a href="#acc1">next ➧</a></p>
    					</section>					
    				
    				</article>  
    			</div>
    		</div>
    		
    		<div id="item3" class="item">
    			<a name="item3"></a>
    			<div class="content">item3 
    	
    			</div>
    		</div>
    
    		<div id="item4" class="item">
    			<a name="item4"></a>
    			<div class="content">item4 
    
    			</div>
    		</div>
    		
    		<div id="item5" class="item">
    			<a name="item5"></a>
    			<div class="content">item5 
    
    			</div>
    		</div>
    		
    		<div id="item6" class="item">
    			<a name="item6"></a>
    			<div class="content">item6
    
    			</div>
    		</div>
    	</div>
    
    
    </div>
    
    </body>
    </html>
    Code:
    body {height: 400px; width:960px; margin:0;padding:0; overflow:hidden;
    }
    #container {width: 960px; height: 200px; z-index: 500; border:5px solid red;  }
    #wrapper {width:100%; height:100%; position:absolute; top:0; left:0; background-color:#00005f; overflow:hidden;}
    
    #mask {width:600%; height:100%; background-color:#eee; z-index: 5;}
    
    	.item {width:16%; height:100%; float:left; background-color: #d3e4ee;}
      
    	.content {width:940px; height:485px; top:250px;  margin:0 auto; background-color: #74abca; position:relative; padding: 10px; /*border-radius: 7px; box-shadow: 1px 1px 1px #888; opacity:0.8; filter:alpha(opacity=80);*/ z-index: 10;}
    	.selected {background: #EEEEEE repeat-x 0 -40px; color: #00005F; border-top: none; border-radius: 7px; box-shadow: 1px 1px 1px #888;}
    	.selected a {color: #00005F;  }
    	.clear {clear:both;}
    
    body {font-family: "Segoe UI", arial, helvetica, freesans, sans-serif; font-size: 90%; color: #333; background-color: #e5eaff; margin: 10px; z-index: 1;}
    h1 {font-size: 1.5em; font-weight: normal; margin: 0;}
    h2{font-size: 1.3em; font-weight: normal; margin: 2em 0 0 0;}
    p{margin: 0.6em 0;}	
    p.accnav {font-size: 1.1em; text-transform: uppercase; text-align: right;}
    p.accnav a {text-decoration: none; color: #999;}
    article.accordion {display: block; width: 750px; margin: 0 auto; margin-top: 15px; background-color: #81E0F4; overflow: auto; border-radius: 5px; /*box-shadow: 0 3px 3px rgba(0,0,0,0.3);*/}
    article.accordion section {position: relative; display: block; float: left; width: 2em; height: 22em; margin: 0.5em 0 0.5em 0.5em; color: #00005F; background-color: #00005F; overflow: hidden; border-radius: 3px;}
    article.accordion section h2 {position: absolute; font-size: 1em; font-weight: bold; width: 12em; height: 2em; top: 12em; left: 0; text-indent: 1em; padding: 0; margin: 0;
    	color: #ddd; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; 
    	-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);}
    article.accordion section h2 a {display: block; width: 100%; line-height: 2em; text-decoration: none; color: inherit; outline: 0 none;}
    article.accordion section, article.accordion section h2 {-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
    article.accordion section:target {width: 30em; padding: 0 1em; color: #333; background-color: #fff;}
    article.accordion section:target h2 {position: static; font-size: 1.3em; text-indent: 0; color: #333; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 	
    
    /******************************
    *  Header
    ******************************/
    
    #header {background-color: #00005f; height: 250px; width: 960px; position: fixed; margin:0 auto;  }
    #header-logo {margin-left: 0px; margin-top: 0px; float: left; }
    #header-logo img {background-color: #00005f;}
    #facebook {margin-top: 20px; float: right; margin-right: 20px;}
    #container1 {width:960px; margin:0 auto; position:relative; z-index: 2000;}
    #nav {font-family: Century Schoolbook; font-size: 16px; font-style: normal; margin: 135px 0 0 -20px; padding-top: 8%; padding-left: 5%;}
    #nav a {padding-left: 15px; margin-left: 15px; color: #93b431; }
    .menu{color: #84E4F7; font-family: Century Schoolbook; position:absolute; margin: -20px -20px 0 0px; width:960px; text-transform: uppercase; z-index:9999;}
    .menu ul {margin-left: -55px; color: #84E4F7; font-size:16px; float:left; line-height: 100%; background: repeat-x 0 -110px; z-index:999;}
    .menu ul li  { color: #84E4F7; margin: 0 0px;  padding: 0 0 8px; float: left; position: relative; list-style: none;}
    .menu ul a {  /*color: #84E4F7;*/ text-decoration: none; display: block; padding:  8px 15px; margin: 0;  border:none;}
    .menu ul a:hover {background: #000; color: #FDC216;}
    .menu ul .current_page_item a, .menu ul li:hover > a {background: #EEEEEE repeat-x 0 -40px; color: #FDC216; border-top: none; border-radius: 7px; box-shadow: 1px 1px 1px #888;}
    .menu ul li:hover > ul {display: block;}
    .menu ul:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
    .menu ul {display: inline-block;}  
    html[xmlns] .menu ul {display: block;}
    * html .menu ul {height: 1%;}

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm not trying to be offensive, but this page is coded so poorly I don't want to give just a one line fixer.

    Can you show us what your end result will be like? Why do you have position:relative on so many thigns? On the light blue section of the website, what in the world is going on there? You have item1-5, and floating implying you want them all on the smae line. You give the #mask a width of 600%(??????????????????) item1 container width:16% and the inner child a width of like 940px. What??? 600%, 16%, and 940px. Don't even know what to make of that.

    I'd honestly scratch this attempt and PROPERLY code it.

    I will say that the reason it is happening is due to those errors I just mentioned. I don't even know what you hope to achieve and can't really offer a fix due to that.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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