SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34
  1. #26
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I sit the #backnav div outside the #wrapper and use absolute positioning then it would be removed from the flow right? Then I would just add some padding to first element in the #contents wrapper to account for collisions.

    Code CSS:
    #backnav ul {
        position:absolute;
        top: 0;
        right: 50px;
        margin: 0;
        color: #ddd;
        background: #333;
        height: 24px;
        padding: 0 8px;
    }
     
    #searchwrapper {
        min-height: 76px;
        padding-top: 24px;
    }

    That should fix that 100% height issue shouldn't it? The problem now is the #footer still sits below the fold, adding a negative top margin doesn't seem to do anything at all. Any ideas?




    Quote Originally Posted by deathshadow60 View Post
    You do know how MASSIVE 36pt is on a 120dpi system, right? (specifically that's the same as saying font-size:60px for lf/120, and font-size:48px for sf/96). Also, you seem to be specifying px heights on things with default or pt measurements -- that's just BEGGING for it to break before we even TALK layout.
    This h1 is intended to be an image in the future, but thanks, I'll take this into account - I haven't considered the varying dpi's on modern systems.

  2. #27
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creating a negative top margin for the #contents div then adding padding on the first item in the #contents div to compensate appears to work:

    Code CSS:
    #contents {
        width: 960px;
        margin: -60px auto 0px auto;
    	padding: 10px;
    	min-height: 100%;
    	position: relative;
    	padding:10px 10px 35px;/* protect footer */
    	zoom:1.0;/* ie haslayout*/
    }
    #searchwrapper { /*previously named #searchbar*/
        min-height: 76px;
        white-space: nowrap;
        text-align: center;
    	border-bottom: 1px solid #aaaaaa;
    	padding-top: 84px;
    }

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    As long as you maintain the 100% by compensating with negative margins you should be ok (which is how the sticky footer works anyway). Of course you then have to protect those elements as in the sticky footer method with padding (or wide borders) other elements.

  4. #29
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul you've been a big help

  5. #30
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When the window has a smaller width than the content and the sidebar - having a fixed sidebar, the content scrolls horizontally beneath it. Is there a away it could become "unfixed" (for lack of a better term) in CSS? So if the sidebar is expanded and the window width is too small - when scrolling horizontally the sidebar moves with the content and is able to move out of the window, yet it should still remain fixed when scrolling vertically.

    I have also moved the #backnav inside the #wrapper div so it could position itself relative to it's right edge - however the #wrapper no longer expands to the remaining width.

    wrapper:
    Code CSS:
    body{
    	text-align:center;/* for inline-block centerimg*/
    	white-space:nowrap;/*stop IE8/9 from dropping column*/	
    }
    #wrapper,#sidebar,#footer{white-space:normal;text-align:left;}/* reset whitespace and text */
     
    html, body {
        margin: 0;
        padding: 0;
        font-family: "Georgia", Serif;
    	height: 100%;
    }
     
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    #wrapper:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
     
    #contents {
        width: 960px;
        margin: -60px auto 0px auto;
    	padding: 10px;
    	min-height: 100%;
    	position: relative;
    	padding:10px 10px 35px;/* protect footer */
    	zoom:1.0;/* ie haslayout*/
    	text-align: center;
    }
     
    * html #contents {/* ie6 and under only*/
        height:100%;
    }
     
    #wrapper {
    	zoom:1.0;/* ie haslayout*/
    	overflow:hidden;/* make an auto width rectangular block next to a float */
    	min-width:980px;/* same total width as wrapper*/
    	margin:0 auto;
    	position:relative;
    	z-index:1;
    	min-height:100%;
    	border-top:none;
    	border-bottom:none;
    	display:inline-block;
    	vertical-align:top;
    	border: 3px red solid;
    }
     
    * html #wrapper{height:100%;display:inline}/* ie6 inline-block hack*/
    *+html #wrapper{display:inline}/* ie7 inline-block hack */

    sidebar:
    Code CSS:
    #sidebar {
    	background-color: #333333;
    	width: 220px;
    	padding: 10px;
    	margin-left:-240px;
    	color:#fff;
    	position:fixed;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	padding:20px 20px 5px;
    	height: 100%;
    	overflow:auto;
    	z-index:2;
    	-webkit-transition:margin 1s ease-in;
    	-moz-transition:margin 1s ease-in;
    	-ms-transition:margin 1s ease-in;
    	transition:margin 1s ease-in;
    }
     
    #sidebar:hover { margin:0 }
     
    #dummy-column{
           width: 220px;
           float:left;
           margin-left:-240px;
           padding:0 30px 0 20px;
           height:100px;
           position:relative;
    		-webkit-transition:margin 1s ease-in;
    		-moz-transition:margin 1s ease-in;
    		-ms-transition:margin 1s ease-in;
    		transition:margin 1s ease-in;
     
    }
    #sidebar:hover + #dummy-column { margin:0 }

    backnav:
    Code CSS:
    #backnav ul {
        position:absolute;
        top: 0;
    	right: 50px;
        margin: 0;
        padding: 0;
        color: #ddd;
        background: #333;
    	height: 24px;
    	-webkit-border-bottom-right-radius: 12px;
    	-webkit-border-bottom-left-radius: 12px;
    	-moz-border-radius-bottomright: 12px;
    	-moz-border-radius-bottomleft: 12px;
    	border-bottom-right-radius: 12px;
    	border-bottom-left-radius: 12px;
    	padding: 0 8px;
    	z-index:3;
    }
     
    #backnav li {
    	display: inline-block;
        float: left;
        list-style: none;
        padding: 4px 5px 2px;
        font: 12px "Georgia", Serif;
    }
     
    #backnav li a{
    	display: inline-block;
    	color: #dddddd;
    	text-decoration: none;
    }

    html:
    Code HTML4Strict:
    <html>
    <head>
    	<base href="http://localhost/~RyanKing/public/" />
    	<link rel="stylesheet" type="text/css" href="_stylesheets/styles.css" />
    	<title><?php echo $str_pageTitle ?></title><!-- String -->
    </head>
    <body>
    	<div id="sidebar"></div>
    	<div id="dummy-column"></div>
     
     
    	<div id="wrapper">
    		<div id="backnav"><?php echo $str_backnav ?><!-- Unordered list of Links--></div>
    		<div id="contents">
    			<div id="searchwrapper">
    				<h1><?php echo $str_heading ?><!-- String --></h1> <div id="searchbar"><input type="text" id="searchfield"/>
    				<input type="image" src="_images/searchbutton.png" id="searchbutton" alt="Search"/></div>
    			</div>
    			<div id="marquee"><img src="<?php echo $str_imgUrl ?>" /><!-- Image 800x320 --></div>
    			<div id="catnav"><?php echo $str_catnav ?><!-- Unordered list of Image-Links 238x77--></div>
    		</div>
    		<div id="footer"><?php echo $str_footnav ?><!-- Unordered list of Links--></div>
    	</div>
    </body>
    </html>

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You seem to have upset the dynamics of the page with the above code. You can only use the 100% routines on the wrapper. It will not propagate to any nested elements and therefore min-height:100% on #contents will have no effect. You get one shot at achieving the 100% effect and you must use the main page wrapper to do this. Any other method will fail (apart from display:table and height:100%).

    The example I posted earlier showed how to get your backnav outside the wrapper using floats and a negative margin.

    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>Untitled Document</title>
    <style type="text/css">
    body {
    	text-align:center;/* for inline-block centerimg*/
    	white-space:nowrap;/*stop IE8/9 from dropping column*/
    }
    #wrapper, #sidebar, #footer {
    	white-space:normal;
    	text-align:left;
    }/* reset whitespace and text */
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    #wrapper:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    #sidebar {
    	background-color: #333333;
    	width: 220px;
    	position:fixed;
    	top:0;
    	bottom:0;
    	left:0;
    	margin-left:-240px;
    	color:#fff;
    	overflow:auto;
    	z-index:2;
    }
    #content {
    	padding:10px 10px 35px;/* protect footer */
    	zoom:1.0;/* ie haslayout*/
    }
    #wrapper {
    	margin:0 auto;
    	position:relative;
    	z-index:1;
    	min-height:100%;
    	width:960px;
    	background:#fcf;
    	border: 1px solid #000;
    	border-top:none;
    	border-bottom:none;
    	display:inline-block;
    	vertical-align:top;
    }
    * html #wrapper {
    	height:100%;
    	display:inline
    }/* ie6 inline-block hack*/
    *+html #wrapper { display:inline }/* ie7 inline-block hack */
    #footer {
    	position:absolute;
    	bottom:0;
    	left:0;
    	background:red;
    	height:30px;
    	width:100%;
    }
    #sidebar {
    	border-right:10px solid gold;
    	padding:0 20px 0;
    	-webkit-transition:margin 1s ease-in;
    	-moz-transition:margin 1s ease-in;
    	-ms-transition:margin 1s ease-in;
    	transition:margin 1s ease-in;
    }
    #sidebar:hover { margin:0 }
    #dummy-column {
    	width: 220px;
    	float:left;
    	margin-left:-240px;
    	padding:0 30px 0 20px;
    	-webkit-transition:margin 1s ease-in;
    	-moz-transition:margin 1s ease-in;
    	-ms-transition:margin 1s ease-in;
    	transition:margin 1s ease-in;
    	height:1px;
    	position:relative;
    }
    #sidebar:hover + #dummy-column { margin:0 }
    .backnav{
    	float:right;
    	width:200px;
    	background:blue;
    	margin-right:-210px;
    }
    </style>
    </head>
    
    <body>
    <div id="sidebar">
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    </div>
    <div id="dummy-column"></div>
    <div id="wrapper">
    <div class="backnav">backbav test</div>
    		<div id="content">
    				<h1>Hover over sidebar</h1>
    				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
    				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
    				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
    		</div>
    		<div id="footer">Footer</div>
    </div>
    </body>
    </html>
    Regarding the fixed sidebar then fixed positioning means the element will not scroll with the document and if part of the element falls outside the viewport then there is no way to retrieve it. It can't be fixed when you want it to be fixed and then suddenly change to normal. Its either one or the other. You would need to script that behaviour.

  7. #32
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The example I posted earlier showed how to get your backnav outside the wrapper using floats and a negative margin.
    Thanks Paul - but this makes the the #backnav scroll to the right as the #sidebar expands and this is not what I'm after.

    I would like it to site 50px off the right edge of the window - if the window is too small for the contents then I would like it to sit 50px off the right edge of the #wrapper containing the #contents rather than the window.

    So provided the the #wrapper auto-expands to the remaining width the absolute positioning the #backnav should work.
    The problem is #wrapper no longer auto-expands it has a static width (presumably 980px) when I use the css from my previous post.


    On further examination what appears to be causing the problem is display:inline-block; in #wrapper - taking that out allows the #wrapper to auto-expand again but causes the wrapper to jump below the sidebar if the window's width is too small. Do you know of a way to avoid this without scripting?




    Quote Originally Posted by Paul O'B View Post
    Regarding the fixed sidebar then fixed positioning means the element will not scroll with the document and if part of the element falls outside the viewport then there is no way to retrieve it. It can't be fixed when you want it to be fixed and then suddenly change to normal. Its either one or the other. You would need to script that behaviour.
    It was bound to come at some point

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    You can't really mess with the structure because it will break somewhere else.

    Why can't you just absolutely place the backnav to the right of the screen if you want it outside the wrapper.

    Something like this:

    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>Untitled Document</title>
    <style type="text/css">
    body {
    	text-align:center;/* for inline-block centerimg*/
    	white-space:nowrap;/*stop IE8/9 from dropping column*/
    }
    #wrapper, #sidebar, #footer {
    	white-space:normal;
    	text-align:left;
    }/* reset whitespace and text */
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    #wrapper:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    #sidebar {
    	background-color: #333333;
    	width: 220px;
    	position:fixed;
    	top:0;
    	bottom:0;
    	left:0;
    	margin-left:-240px;
    	color:#fff;
    	overflow:auto;
    	z-index:2;
    }
    #content {
    	padding:10px 10px 35px;/* protect footer */
    	zoom:1.0;/* ie haslayout*/
    }
    #wrapper {
    	margin:0 auto;
    	position:relative;
    	z-index:1;
    	min-height:100%;
    	width:960px;
    	background:#fcf;
    	border: 1px solid #000;
    	border-top:none;
    	border-bottom:none;
    	display:inline-block;
    	vertical-align:top;
    }
    * html #wrapper {
    	height:100%;
    	display:inline
    }/* ie6 inline-block hack*/
    *+html #wrapper { display:inline }/* ie7 inline-block hack */
    #footer {
    	position:absolute;
    	bottom:0;
    	left:0;
    	background:red;
    	height:30px;
    	width:100%;
    }
    #sidebar {
    	border-right:10px solid gold;
    	padding:0 20px 0;
    	-webkit-transition:margin 1s ease-in;
    	-moz-transition:margin 1s ease-in;
    	-ms-transition:margin 1s ease-in;
    	transition:margin 1s ease-in;
    }
    #sidebar:hover { margin:0 }
    #dummy-column {
    	width: 220px;
    	float:left;
    	margin-left:-240px;
    	padding:0 30px 0 20px;
    	-webkit-transition:margin 1s ease-in;
    	-moz-transition:margin 1s ease-in;
    	-ms-transition:margin 1s ease-in;
    	transition:margin 1s ease-in;
    	height:1px;
    	position:relative;
    }
    #sidebar:hover + #dummy-column { margin:0 }
    .backnav{
    	position:absolute;
    	width:100%;
    	top:0;
    	min-width:960px;
    	z-index:9;
    }
    .backnav div{float:right;background:blue;padding:0 10px;margin:0 50px 0 0}
    </style>
    </head>
    
    <body>
    <div id="sidebar">
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    		<p>Sidebar test</p>
    </div>
    <div id="dummy-column"></div>
    <div class="backnav"><div>backnav test</div></div>
    <div id="wrapper">
    		<div id="content">
    				<h1>Hover over sidebar</h1>
    				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
    				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
    				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
    		</div>
    		<div id="footer">Footer</div>
    </div>
    </body>
    </html>

  9. #34
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I suppose I'm getting a bit nit-picky now - that'll have to do for those with js disabled. Thanks Paul.


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
  •