css - Static header and footer with full length menu navigation -


I've really tried everything that I can think I've tried dozens of coding samples of stack and tutorial sites . I can not do any work to do this work, which I do, and I am trying to understand it. I do not get along with CSS.

Here's what I'm trying to do:

  • Static header (always on screen.)
  • Footer that is always the bottom of the page (With content scrolling, but if there is not enough content then it will appear at the bottom of the screen.
  • Left menu with background, which goes all the way down the footer.

    I am having trouble going out of the background. This is 100% guardian, relative It is a common problem for me to be able to get the perfection and this code is now working with the exception of the background. + I honestly just want to make an image of the background and repeat it. Here is the code: / P>

      & lt ;! DOCTYPE html public "- // W3C // DTD XHTML 1.0 transitional // n" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- Transitional.dtd "& gt; html xmlns =" ​​http://www.w3.org/1999/xhtml "gt;> head> gt; meta http-equiv =" content type "content = "Text / html; charset = UTF - 8 "/> & gt; Title & gt; Untitled Document & lt; / Title & gt; & Lt; Style type = "text / css" & gt; Html, body {margin: 0; Padding: 0; Height: 100%;} # Main_Repher {min-height: 100%; Status: Relative;} # Headers {Width: 1 00%; Background: # 0F0; Height: 42px; Status: fixed; Left: 0; Top: 0; #content {margin-left: 200px; Background: # F00; } #footer {width: 100%; Height: 32px; Status: Completed; Bottom: 0; Left: 0; Background: # 00F; } #content_draper {padding-down: 32px; Padding-top: 42px; Overflow: Auto; } #left_manu {width: 200px; Background: #ff 0; Swim left; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "main_wrapper" & gt; & Lt; Div id = "header" & gt; & Lt; / Div & gt; & Lt; Div id = "content_wrapper" & gt; & Lt; Div id = "left_menu" & gt; Menu & lt; / Div & gt; & Lt; Div id = "content" & gt; Concent & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   

    As you can see in the bedell code, what do I want to do is to get the yellow background full height and any content added to the whole page To scroll down, the footer will be the cause of the move to the bottom and the header will remain constant, except for the color of the yellow background, except the whole height it still works.

    The easiest thing to do is to add an image in the background which repeats in the Y direction.

      Background image: url (images / background.gif); Background repeat: repeat-y;   

    This is done, but is a better way!

Comments

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -