www.webdeveloper.com
Results 1 to 11 of 11

Thread: scrollbars

  1. #1
    Join Date
    Jul 2008
    Posts
    196

    scrollbars

    im using css for a layout and when my DIVs touch a border it makes a scroll where you can see my white background.my current solution is disabling scrollbars but this looks crappy.how could this be fixed.

    id post a link but itd be useless, cause of my solution.

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Use overflow:hidden on the containing element.

  3. #3
    Join Date
    Jul 2008
    Posts
    196
    didnt work

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by Not to mention
    id post a link but itd be useless, cause of my solution.
    It wouldn't be useless - we need to see the example of where this is happening to offer a suggestion.

  5. #5
    Join Date
    Jul 2008
    Posts
    196
    well here ya go. www.macheteteds.com

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    So do you have a depiction of what it's supposed to look like?

  7. #7
    Join Date
    Jul 2008
    Posts
    196
    sry im havin probs on the site

    attached is what it looks like outside the circumstance of error.

    normally i had scrolling disabled.

    the problem is that the overflow is bigger than the div.
    Attached Images Attached Images

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Ok, I assume here you want a layout with fixed width side columns, fluid width centre column, and all columns equal height and at least screen height.

    One of the problems is your are only designing for your own high-resolution widescreen, and not taking into account various widths (some users are still stuck with 800x600 15" monitors) - plus the use of absolute positioning.

    These types of layouts are tricky until you get used to them, and a few facts need to be understood :
    1) You cannot set a container to fill available height
    2) You cannot force unrelated containers to maintain the same height
    3) Any % height setting can only reference the SET height of the parent container - if the parent does not have a height explicitly set, then all heights revert to "auto" (the default).

    Before I get into this, there are a couple of other things. Your image url seems to contain a backslash (\) - I assume your wanted the images in an "images" folder, so it should be a forward slash (src="images/Square-Logo.png"). It is also not a good idea to use spaces in filenames (like you have in the css filename) - either close it up or use hyphens or underscores. When using fixed width side columns, also make sure that the width of these is sensible for smaller resolutions - the 375px wide left column is a little too wide for decent content width even on my 19" monitor, and for the purposes of this discussion, I have narrowed it to the same as the right column.

    As the left and right columns will have to be floated left and right, they will need to come before the content column in the html. Marking up the html logically, we can arrive at :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Machete Ted's</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 7]>
    	<link rel="stylesheet" type="text/css" href="ie6styles.css">
    <![endif]-->
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">
    		<span id="logo"><img src="images/Square-Logo.png" alt="Machete Ted's logo"></span>
    		<h1>Page Title here (if you want one)</h1>
    	</div>
    	<div id="leftbar">
    		<h2>Top 10</h2>
    	</div>
    	<div id="rightbar">
    		<p>right column stuff</p>
    	</div>
    	<div id="content">
    		<h2>Under Construction</h2>
    	</div>
    	<div id="footerpush"></div>
    </div>
    <div id="footer">
    	<p>footer stuff</p>
    </div>
    </body>
    </html>
    Here everything except the footer is surrounded by a wrapper div (a requirement of making the 100% minimum height work), and the left and right column divs are before the content div. The #footerpush div is also a requirement to make the 100% minimum height work.

    Note also I used a html 4.01 strict doctype - arguably the most appropriate to use at this point in time. As this uses a transparent png file, and other small hacks will be required for IE6 to comply, I have also linked an extra stylesheet via a conditional comment that only IE6 and below will see.

    Css file next post.

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Main styles.css file:
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	height: 100%;
    }
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	background-color: #707070;
    	color: #FFFFFF;
    	min-width: 920px;
    }
    p {
    	margin-bottom: 1em;
    }
    #wrapper {
    	margin: 0 272px 0 272px;
    	background-color: #8B7355;
    	border-left: 2px groove #363636;
    	border-right: 2px groove #363636;
    	min-height: 100%;
    }
    #header {
    	height: 250px;
    	border-bottom: 2px groove #363636;
    	margin: 0 -274px;
    	background-color: #8B7765;
    	position: relative;
    }
    #header #logo {
    	float: left;
    }
    #header h1 {
    	padding: 20px;
    	float: left;
    }
    #leftbar {
    	width: 252px;
    	padding: 10px 12px 10px 0;
    	margin-left: -262px;
    	display: inline;
    	float: left;
    	position: relative;
    }
    #leftbar h2 {
    	text-align: center;
    	color: #CDAD00;
    	font-size: 200%;
    }
    #rightbar {
    	width: 252px;
    	padding: 10px 0 10px 12px;
    	margin-right: -262px;
    	float: right;
    	display: inline;
    	position: relative;
    }
    #content {
    	padding: 10px;
    }
    #content h2 {
    	text-align: center;
    	text-transform: uppercase;
    	font-size: 200%;
    }
    #footerpush {
    	clear: both;
    	height: 117px;
    }
    #footer {
    	height: 95px;
    	background-color: #2E2E2E;
    	border-top: 2px groove #363636;
    	margin-top: -117px;
    	position: relative;
    	padding: 10px;
    }
    Here I started with the universal selector to zero ALL browser-applied default margins and padding from everything for an even start point. Next I set the height of html and body to 100%, so there is a reference height (my point no 3 above). The body then gets the usual font base and the background colour of the side columns are the body background (as the side column won't really extend full height, it will just look like they do). A min-width is also set here so that the content area does not squash too small when the window size is reduced. A default bottom margin is also added back to any paragraphs (using only bottom margin gets around margin collapse issues with containers).

    Now for the tricky bit.

    The #wrapper is set to a minimum height of 100%, and given side margins equal to the width of the side columns, as well as side borders. The background colour here is what will show through behind the content div (which also in reality may not extend full width either). Whilst this may appear to constrain the entire site in a small width, more trickery follows.

    The #header div is given the correct height and bottom border and negative side margins equal to the side column width plus wrapper border width, effectively pulling it back out full screen width (one part of the above mentioned trickery). The relative position ensures the width is in front of everything. The #logo span containing the logo image (the span is needed to apply an IE6 correction later) is then floated to the left, and so is the <h1>.

    The #leftbar is given the width, including some padding, and floated left. A negative left margin equal to its width plus right padding minus wrapper border width, pulls it out to the side of the wrapper div (but it still overlaps the wrapper border - required so that it can still push the footer down in some browsers). Note there is no background colour - the body colour shows through here. The #rightbar is floated right and pulled further out to the right in exactly the same way. Relative position on both of these again ensures they appear in front on all browsers.

    The content div now just sits naturally with #wrapper, and only needs a little padding (the background colour of wrapper is showing through here).

    For the last of the trickery, the #footer div, after being given its height and top border, is pulled up from below the bottom of the page (remember it follows the #wrapper which is full screen height) with a negative top margin equal to its height and border height. To avoid the footer covering any content, the #footerpush div is made the same height.

    This works in all modern browsers, being fluid in width down to 920px wide, and filling the entire height of the screen without scrollbars unless the content pushes the footer down. Of course, there are still problems with IE6, and I discuss those next post.

  10. #10
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    To correct a few issues with IE6, we add the ie6styles.css file - this will only be read by IE6 and below as it is linked to the html with a conditional comment :
    Code:
    body {
    	width: expression((documentElement.clientWidth < 918) ? "920px" : "auto");
    }
    #wrapper {
    	height: 100%;
    }
    #header #logo {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Square-Logo.png')
    }
    #header #logo img{
    	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    }
    First problem for IE6 is that it doesn't understand Min-width, so an IE-specific expression can be used to set the width of the body to 920px should the default "auto" setting be too small.

    Next, IE6 also doesn't understand min-height, but it has a bug where it treats height like min-height, so we can just give the #wrapper 100% height.

    As IE6 does not handle png transparency natively, the AlphaImageLoader filter that is part of DirectX can be used, and this is why the span around the image is needed. The image itself is made invisible by setting the opacity to zero, and then the image can be applied to the span via the filter to show its transparency.

    See if all this works for what you want to achieve.

  11. #11
    Join Date
    Jul 2008
    Posts
    196
    whoa man...thanks i do have a lot of work to do deciphering this .

    seriosly,you didnt need to do all this.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles