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 11 of 11
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Full browser width bars & overflow-x problem

    So I'm trying to figure out a CSS way (also open to js/jquery solutions) to extend a div the length of the screen and not produce a horizontal scrollbar. My problem becomes that when the browser is resized and text is clipped it doesn't show a scrollbar (as it normally would) because I've set my overflow-x selector to hidden, and I can't figure out a solution.

    HTML
    Code:
    <div id="wrap">
    	<div id="header">      
            <ul id="nav">
                <li id="nav-buy"><a href="#" title="Buy">Buy</a></li>
                <li id="nav-contact"><a href="#" title="Contact">Contact</a></li>
                <li id="nav-types"><a href="#" title="About">About</a></li>
                <li id="nav-about"><a href="#" title="Types">Types</a></li>
                <li id="nav-home"><a href="#" title="Home">Home</a></li>
            </ul>
        
            </div> <!-------------------------- END #header ----------------------------------->
        
        
        
    
    </div> <!-------------------------- END #wrap ------------------------------------>
    CSS
    Code:
    body {
    	background-color: #E8E6ED;
    	overflow-x: hidden;		/* Hides scrollbar that results from #header margin/padding */
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 62.5%;		/* Makes it so 1em = 10px */
    }
    
    #wrap {
    	margin: 0 auto;
    	width: 960px;
    }
    
    /*==============
    	#HEADER
    	======================================================================*/
    #header {
        overflow: hidden;			/* Clears floats */
    	margin: 0 -2000px 4em;		/* This extends header the width of the viewport */
    	padding: 0 2000px;			/* This extends header the width of the viewport */
    	height: 4em;
        background: url(images/header.png);
    	border-bottom: .2em solid #6A94D4;
        position: relative;
        z-index: 100;
        -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
        -moz-box-shadow:    0px 2px 5px rgba(0, 0, 0, 0.5);
        box-shadow:         0px 2px 5px rgba(0, 0, 0, 0.5);
    }
    
    #nav li {
    	list-style: none;
    	float: right;
    	margin: .3em 0 0 0;
    }
    
    #nav a {
    	font-size: 1.4em;      /* 14px */
    	letter-spacing: .1em;
    	text-decoration: none;
    	text-transform: uppercase;
    	color: #fff;
    	padding: 2em 0 .4em 0;
    	margin: 0 1.5em;
    	-webkit-transition: color 0.15s ease-in;
    	-moz-transition:    color 0.15s ease-in;
    	-o-transition: 		color 0.15s ease-in;
    	-ms-transition: 	color 0.15s ease-in;
        transition: 	    color 0.15s ease-in;
    }
    
    #nav li:nth-child(1) a:hover {
        color: #FF6400;
    }
    
    #nav a:hover {
    	color: #6A94D4;
    }
    
    body#home #nav-home a {
    	/*background: rgba(0,0,0,0.1)*/
    	color: #6A94D4;
    	border-bottom: .4em solid #6A94D4;
    }
    The large positive padding/negative margin is a great way to extend stuff the width of the viewport, but when it becomes resized no horizontal scrollbar will display.
    Last edited by Vytfla; 09-30-2012 at 10:49 PM.

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Hi, looks like you are over engineering to me. Why not just put the #wrap to 100% or 99% rather than introducing a fixed width and then over ruling it. Also I do not understand the #header overflow hidden being used to clear floats when I cannot see any floats as having been introduced at that point. Keep it simple. Jim

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jamaks View Post
    Hi, looks like you are over engineering to me. Why not just put the #wrap to 100% or 99% rather than introducing a fixed width and then over ruling it. Also I do not understand the #header overflow hidden being used to clear floats when I cannot see any floats as having been introduced at that point. Keep it simple. Jim
    I'm trying to have the page centered within a 960px wrap; if i change the wrap from 960px to 99%, then everything moves to the left and right of the screen and leaves the middle completely devoid.

    My issue still is figuring out a good way to have full browser width bars; the way I have it accomplishes it, but at the expense of losing the horizontal scroll when re-sized.
    Last edited by Vytfla; 10-01-2012 at 08:25 AM.

  • #4
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Hi, if you add text-align:center; to the body style block your div wrap will center using either fluid or fixed width *margin:auto;* I simply do not understand the requirement for
    Code:
    margin: 0 -2000px 4em;padding: 0 2000px;
    since all that is doing is giving a horizontal padding to any narrow element upto your fixed width value. Jim
    Last edited by jamaks; 10-01-2012 at 11:04 AM. Reason: inadvertant smilie

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jamaks View Post
    Hi, if you add text-align:center; to the body style block your div wrap will center using either fluid or fixed width *margin:auto;* I simply do not understand the requirement for
    Code:
    margin: 0 -2000px 4em;padding: 0 2000px;
    since all that is doing is giving a horizontal padding to any narrow element upto your fixed width value. Jim
    Text-align: center is only for text, which is a declaration is do not want at all.

  • #6
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I guess I should ask what are the ways to accomplish full browser with bars without having to disable scroll? Here are some examples:

    http://secondandpark.com/
    http://datasift.com/

  • #7
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    399
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Text-align: center is only for text,
    Wrong. Text in text align refers to elements that may contain text. applying it affect the cont whether it is text or another element.

    As for avoiding the clip, use percentages for dimensions so the browser can render based on resolution.
    Last edited by COBOLdinosaur; 10-01-2012 at 05:57 PM.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #8
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by COBOLdinosaur View Post
    Wrong. Text in text align refers to elements that may contain text. applying it affect the cont whether it is text or another element.

    As for avoiding the clip, use percentages for dimensions so the browser can render based on resolution.
    You're right about text-align, my mistake; however I do not want my text centered.

    Could you entertain me about those websites though? I'm just generally curious about how it was done, even if it forces a scroll; especially http://secondandpark.com/, because it looks elegant.

    So essentially every left/right value should be a % rather than an em? I guess my problem is when it came to certain divs, I just floated without specifying a width, and that's what messing with me.

  • #9
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    399
    Thanks
    2
    Thanked 30 Times in 30 Posts
    because it looks elegant.
    Beauty is in the eye of the beholder; I guess. That site is not one I would considered technically worth much. It looks like it has not been touched in over a year (last blog post was Mar 2011). It has no flexibility, and is using an ancient doctype. It is just an old fashioned Wordpress template. Basically it looks like a million other sites, and I don't see that it has much to offer; and it is certainly not something you want to learn from.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #10
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by COBOLdinosaur View Post
    Beauty is in the eye of the beholder; I guess. That site is not one I would considered technically worth much. It looks like it has not been touched in over a year (last blog post was Mar 2011). It has no flexibility, and is using an ancient doctype. It is just an old fashioned Wordpress template. Basically it looks like a million other sites, and I don't see that it has much to offer; and it is certainly not something you want to learn from.
    Sure. But still no solution to my question? How to get browser width bars like that?

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Vytfla View Post
    The large positive padding/negative margin is a great way to extend stuff the width of the viewport, but when it becomes resized no horizontal scrollbar will display.
    Nope. It is not a great way.

    Quote Originally Posted by COBOLdinosaur View Post
    Wrong. Text in text align refers to elements that may contain text. applying it affect the cont whether it is text or another element.
    It centers elements that are display: inline or display: inline-block.

    Quote Originally Posted by Vytfla View Post
    Sure. But still no solution to my question? How to get browser width bars like that?
    ...

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			body {
    				margin: 0;
    				font: 62.5%/1.5 Georgia, "Times New Roman", Times, serif;
    				background-color: #E8E6ED;
    			}
    			ul {
    				margin: 0; padding: 0;
    			}
    			
    			.nav {
    				list-style: none;
    			}
    			
    			#header-container {
    				z-index: 100;
    				border-top: 10px solid #b7d7d5;
    				border-bottom: .2em solid #6a94d4;
    				background: url(images/header.png);
    				-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    				   -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    				        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    			}
    			#header {
    				position: relative;
    				margin: 0 auto;
    				width: 980px;
    				height: 4em;
    			}
    			#nav {
    				float: right;
    				width: 472px;
    			}
    			#nav li {
    				float: left;
    				margin: .3em 0 0 0;
    			}
    			#nav a {
    				margin: 0 1.5em;
    				padding: 2em 0 .4em 0;
    				font-size: 1.4em;
    				color: #fff;
    				letter-spacing: .1em;
    				text-decoration: none;
    				text-transform: uppercase;
    				-webkit-transition: color 0.15s ease-in;
    				   -moz-transition: color 0.15s ease-in;
    				     -o-transition: color 0.15s ease-in;
    				        transition: color 0.15s ease-in;
    			}
    			#nav li:nth-child(1) a:hover {
    				color: #ff6400;
    			}
    			#nav a:hover {
    				color: #6a94d4;
    			}
    			body#home #nav-home a {
    				/*background: rgba(0,0,0,0.1)*/
    				color: #6a94d4;
    				border-bottom: .4em solid #6A94D4;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="header-container">
    			<div id="header">
    				<ul id="nav" class="nav">
    					<li><a href="#_" title="Buy">Buy</a></li>
    					<li><a href="#_" title="Contact">Contact</a></li>
    					<li><a href="#_" title="About">About</a></li>
    					<li><a href="#_" title="Types">Types</a></li>
    					<li><a href="#_" title="Home">Home</a></li>
    				</ul>
    			</div>
            </div>
    	</body>
    </html>
    Last edited by Sammy12; 10-03-2012 at 06:20 AM.


  •  

    Posting Permissions

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