Tue, Mar 25, 1:26 AM CDT

Renderosity Forums / Suggestion Box

All Forums

Welcome to the Suggestion Box Forum

Forum Moderators: msansing

Suggestion Box F.A.Q (Last Updated: 2025 Mar 21 7:30 am)

This forum is designed for suggestions from the community on how you feel we can improve Renderosity.

Subject: navigation improvement

Jaqui opened this issue on Sep 24, 2007 ยท 3 posts
Back to Forum Print
Jaqui ( ) posted Mon, 24 September 2007 at 11:13 PM ยท edited Sun, 16 March 2025 at 4:19 AM

This is something that most sites need to address, in that all the navigation elements scroll off the screen when you start going through the page..
The following two css sections fix both the header div and footer div at the top and bottom of the browser window, fixing the navigation and legal stuff on the screen at all times.
This does not stop the main content section from actually scrolling, just keeps the header and footer displayed constantly.

[quote]

#header { border-bottom: 1px solid #73a2bd;<br></br>    background: #88aacc repeat scroll 0% 50%;<br></br>    position: absolute;<br></br>    top: 0pt;<br></br>    left: 0pt;<br></br>    width: 100%;<br></br>    height: 200px;<br></br>    overflow: auto;<br></br>    text-align: center;<br></br>    }<br></br><br></br>  * html #header { height: 200px;<br></br>    }<br></br><br></br>  #footer { border-top: 1px solid #73a2bd;<br></br>    background: #88aacc repeat scroll 0% 50%;<br></br>    position: absolute;<br></br>    bottom: 0pt;<br></br>    left: 0pt;<br></br>    width: 100%;<br></br>    height: 50px;<br></br>    overflow: auto;<br></br>    text-align: center;<br></br>    }<br></br><br></br>  * html #footer { height: 50px;<br></br>    }<br></br>[/quote]<br></br><br></br><br></br>The full css file:<br></br>[quote]<br></br><br></br>  body { border: 0pt none ;<br></br>    margin: 0pt;<br></br>    padding: 0pt;<br></br>    background: #eeeeee repeat scroll 0% 50%;<br></br>    height: 100%;<br></br>    max-height: 100%;<br></br>    font-family: arial,verdana,sans-serif;<br></br>    font-size: 76%;<br></br>    overflow: hidden;<br></br>    }<br></br><br></br>  * html body { padding: 180px 0pt 50px;<br></br>    background-color: #eeeeee;<br></br>    }<br></br><br></br>  #container { padding: 20px;<br></br>    background: #eeeeee repeat scroll 0% 50%;<br></br>    font-family: "times new roman",serif;<br></br>    font-size: 1.2em;<br></br>    position: fixed;<br></br>    top: 200px;<br></br>    left: 0pt;<br></br>    bottom: 50px;<br></br>    right: 0pt;<br></br>    overflow: auto;<br></br>    text-align: left;<br></br>    }<br></br><br></br>  * html #container { height: 100%;<br></br>    width: 100%;<br></br>    background-color: #eeeeee;<br></br>    }<br></br><br></br>  #header { border-bottom: 1px solid #73a2bd;<br></br>    background: #88aacc repeat scroll 0% 50%;<br></br>    position: absolute;<br></br>    top: 0pt;<br></br>    left: 0pt;<br></br>    width: 100%;<br></br>    height: 200px;<br></br>    overflow: auto;<br></br>    text-align: center;<br></br>    }<br></br><br></br>  * html #header { height: 200px;<br></br>    }<br></br><br></br>  #footer { border-top: 1px solid #73a2bd;<br></br>    background: #88aacc repeat scroll 0% 50%;<br></br>    position: absolute;<br></br>    bottom: 0pt;<br></br>    left: 0pt;<br></br>    width: 100%;<br></br>    height: 50px;<br></br>    overflow: auto;<br></br>    text-align: center;<br></br>    }<br></br><br></br>  * html #footer { height: 50px;<br></br>    }<br></br><br></br>  h1 { margin: 0pt;<br></br>    padding: 0pt;<br></br>    font-size: 3em;<br></br>    }<br></br><br></br>  #footer p { margin: 5px 10px 0pt;<br></br>    color: #73a2bd;<br></br>    }<br></br><br></br>  #header img { margin: 0px 0px 0pt;<br></br>    }<br></br><br></br>  #container img { margin: 0px;<br></br>    }<br></br><br></br>  #absolute { border: 0px solid rgb(0, 0, 0);<br></br>    padding: 10px;<br></br>    background: #eeeeee repeat scroll 0% 50%;<br></br>    position: absolute;<br></br>    top: 100%;<br></br>    right: 200px;<br></br>    width: 80%;<br></br>    }<br></br><br></br>  #left { border: 0px solid rgb(0, 0, 0);<br></br>    padding: 10px;<br></br>    background: #eeeeee repeat scroll 0% 50%;<br></br>    float: left;<br></br>    color: rgb(0, 0, 0);<br></br>    width: 20%;<br></br>    }<br></br><br></br>  #right { border: 0px solid rgb(0, 0, 0);<br></br>    padding: 10px;<br></br>    background: #eeeeee repeat scroll 0% 50%;<br></br>    float: right;<br></br>    color: rgb(0, 0, 0);<br></br>    }<br></br><br></br>  a { text-decoration: underline;<br></br>       color:#000000;<br></br>       font-weight: bold;<br></br>       font-size: 1em;<br></br>   }<br></br><br></br>    a:visited { text-decoration: underline;<br></br>    color: #ff4400;<br></br>    font-weight: bold;<br></br>    font-size: 1em;<br></br>    }<br></br><br></br>  a:hover { text-decoration: underline;<br></br>    color: #FF0000;<br></br>    font-weight: bold;<br></br>    font-size: 1em;;<br></br>    }<br></br><br></br>  .grey { color: rgb(136, 136, 136);<br></br>    }<br></br><br></br>  .ltgrey { color: rgb(221, 221, 221);<br></br>    }<br></br><br></br>  img#mascot { float: right;<br></br>    }<br></br><br></br>  #header ul { border-top: 1px solid rgb(115, 162, 189);<br></br>    clear: both;<br></br>    text-align: center;<br></br>    }<br></br><br></br>  #header ul { margin: 0pt;<br></br>    padding: 0pt;<br></br>    background: transparent repeat scroll 0% 50%;<br></br>    list-style-type: none;<br></br>    height: 3em;<br></br>    }<br></br><br></br>  #header ul li { display: inline;<br></br>    color: rgb(115, 162, 189);<br></br>     font-size: 1.3em;<br></br>    }<br></br><br></br>  .strike { text-decoration: line-through;<br></br>    }<br></br><br></br>  .lft { float: left;<br></br>    }<br></br><br></br>  .rgt { float: right;<br></br>    }<br></br><br></br>  .columnone { width: 15%;<br></br>    float: left;<br></br>    text-align: left;<br></br>    margin-right: 2%;<br></br>    }<br></br>  .columntwo { width: 70%;<br></br>    float: left;<br></br>    text-align: left;<br></br>    margin-right: 2%;<br></br>    }<br></br><br></br>  .columnthree { width: 15%;<br></br>    float: right;<br></br>    text-align: right;<br></br>    margin-left: 2%;<br></br>    }<br></br><br></br><br></br>  hr { border: 0pt none ;<br></br>    clear: both;<br></br>    height: 1px;<br></br>    color: rgb(136, 136, 136);<br></br>    background-color: rgb(136, 136, 136);<br></br>    }<br></br><br></br>  .columnthree a, .columnthree a:visited { font-size: 1em;<br></br>    color: rgb(0, 0, 0);<br></br>    text-decoration: underline;<br></br>    }<br></br><br></br>  .columnthree a:hover { color: rgb(136, 136, 136);<br></br>    text-decoration: none;<br></br>    }<br></br>[/quote]<br></br><br></br>The basic xhtml to implement it:<br></br>[quote]<br></br><br></br><span class="pi"><?xml version="1.0" ?></span><br></br><span class="doctype"></span><br></br><<span class="start-tag">html</span><span class="attribute-name"> xmlns</span>=<span class="attribute-value">"http://www.w3.org/1999/xhtml" </span><span class="attribute-name">lang</span>=<span class="attribute-value">"en"</span>><br></br><<span class="start-tag">head</span>><br></br><<span class="start-tag">meta</span><span class="attribute-name"> http-equiv</span>=<span class="attribute-value">"Content-Type" </span><span class="attribute-name">content</span>=<span class="attribute-value">"application/xhtml+xml; charset=UTF-8"</span><span class="error"><span class="attribute-name">/</span></span>><br></br><<span class="start-tag">title</span>>Jaqui-Greenlees</<span class="end-tag">title</span>><br></br><<span class="start-tag">meta</span><span class="attribute-name"> name</span>=<span class="attribute-value">"Author" </span><span class="attribute-name">content</span>=<span class="attribute-value">"Jaqui Greenlees"</span><span class="error"><span class="attribute-name">/</span></span>><br></br><<span class="start-tag">meta</span><span class="attribute-name"> name</span>=<span class="attribute-value">"description" </span><span class="attribute-name">content</span>=<span class="attribute-value">"" </span><span class="error"><span class="attribute-name">/</span></span>><br></br><<span class="start-tag">meta</span><span class="attribute-name"> name</span>=<span class="attribute-value">"keywords" </span><span class="attribute-name">content</span>=<span class="attribute-value">"" </span><span class="error"><span class="attribute-name">/</span></span>><br></br><<span class="start-tag">meta</span><span class="attribute-name"> http-equiv</span>=<span class="attribute-value">"Content-Style-Type" </span><span class="attribute-name">content</span>=<span class="attribute-value">"text/css" </span><span class="error"><span class="attribute-name">/</span></span>><br></br><<span class="start-tag">link</span><span class="attribute-name"> rel</span>=<span class="attribute-value">"stylesheet" </span><span class="attribute-name">media</span>=<span class="attribute-value">"all" </span><span class="attribute-name">type</span>=<span class="attribute-value">"text/css" </span><span class="attribute-name">href</span>=<span class="attribute-value">"css/fixed.css"</span><span class="error"><span class="attribute-name">/</span></span>><br></br></<span class="end-tag">head</span>><br></br><<span class="start-tag">body</span>><br></br>      <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"header"</span>><br></br><<span class="start-tag">img</span><span class="attribute-name"> src</span>=<span class="attribute-value">"images/name.png" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"Jaqui Greenlees"</span><span class="error"><span class="attribute-name">/</span></span>><br></br><<span class="start-tag">h2</span>>Welcome</<span class="end-tag">h2</span>><br></br>        <<span class="start-tag">ul</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Software</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Consulting</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Web Design</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Contact Me</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Privacy Policy</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>About Me</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Downloads</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Videos</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Blog</<span class="end-tag">a</span>> | </<span class="end-tag">li</span>><br></br>          <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">""</span>>Links</<span class="end-tag">a</span>></<span class="end-tag">li</span>><br></br>        </<span class="end-tag">ul</span>><br></br>      </<span class="end-tag">div</span>><br></br><<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"container"</span>><br></br><<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"columnone"</span>><br></br><<span class="start-tag">p</span>></<span class="end-tag">p</span>><br></br></<span class="end-tag">div</span>><br></br><<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"columntwo"</span>><br></br><p></p><br></br></<span class="end-tag">div</span>><br></br></<span class="end-tag">div</span>><br></br><<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"columnthree"</span>><br></br><<span class="start-tag">p</span>></<span class="end-tag">p</span>><br></br></<span class="end-tag">div</span>><br></br>  <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"footer"</span>><br></br><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"http://validator.w3.org/check?uri=referer"</span>><br></br><<span class="start-tag">img</span><span class="attribute-name"> style</span>=<span class="attribute-value">"border:0;width:88px;height:31px" </span><span class="attribute-name">src</span>=<span class="attribute-value">"http://www.w3.org/Icons/valid-xhtml10" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"Valid XHTML 1.0 Strict" </span><span class="attribute-name">height</span>=<span class="attribute-value">"31" </span><span class="attribute-name">width</span>=<span class="attribute-value">"88" </span><span class="error"><span class="attribute-name">/</span></span>></<span class="end-tag">a</span>><br></br> <<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"http://jigsaw.w3.org/css-validator/check/referer"</span>><br></br>  <<span class="start-tag">img</span><span class="attribute-name"> style</span>=<span class="attribute-value">"border:0;width:88px;height:31px"<br></br></span><span class="attribute-name">src</span>=<span class="attribute-value">"http://jigsaw.w3.org/css-validator/images/vcss" <br></br></span><span class="attribute-name">alt</span>=<span class="attribute-value">"Valid CSS!" </span><span class="error"><span class="attribute-name">/</span></span>><br></br> </<span class="end-tag">a</span>><br></br>Copyright &<span class="entity">copy;</span> 2006 Jaqui Greenlees all rights reserved.<br></br></<span class="end-tag">div</span>><br></br><br></br></<span class="end-tag">body</span>><br></br></<span class="end-tag">html</span>><br></br>[/quote]<br></br><br></br>The first line, the xml declaration, actually enables the css and xhtml to function correctly in all browsers.<br></br>it is a single line hack that makes IE versions before 7 work with it. :)<br></br>no need to have tons of code to have a site work for all browsers.<br></br><br></br>for proof of this, checking my own site that uses this exact code is all that is needed.<br></br><br></br>http://jaqui-greenlees.net

SndCastie ( ) posted Tue, 25 September 2007 at 8:42 AM

Thank you for your suggestion will add it to our list


Sandy
An imagination can create wonderful things

SndCastie's Little Haven

Jaqui ( ) posted Tue, 25 September 2007 at 10:39 AM

no problem. it's a simple fix, when the code is readily available ;)

Privacy Notice

This site uses cookies to deliver the best experience. Our own cookies make user accounts and other features possible. Third-party cookies are used to display relevant ads and to analyze how Renderosity is used. By using our site, you acknowledge that you have read and understood our Terms of Service, including our Cookie Policy and our Privacy Policy.