Results 1 to 8 of 8

Thread: height not 100%

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default height not 100%

    This is a new template I am working on and temp. located at http://eppingland.com/
    That is the only real page, all the other menus are linking to a copy of the home page.

    CSS is at http://eppingland.com/BruStyles.css

    Code:
    body {
      margin: auto;
       background : url("images/beer-bg.jpg");
      background-repeat : repeat;
      max-width : 960px;
      height:100%;
    }
    #mainPicture {
      height : 200px;
      width : 960px;
      background : url("images/Bruburger-logo.jpg") no-repeat;
      padding-top: 0;
      margin: 0;
    }
    
    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 2px 2px 0px;
    	background-color:#E79600;
    	background-repeat:repeat;
    	border-color:#cccccc #111111 #111111 #cccccc;
    	border-width:1px;
    	border-style:solid;
    }
    ul.pureCssMenu {
            width:766px;
            padding-left:190px;
    }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:196.35px;
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:2px 0px 0px 2px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	background-color:#E79600;
    	border-width:1px;
    	border-color:#C21C02;
    	border-style:solid;
    	text-align:left;
    	text-decoration:none;
    	padding:2px 5px 2px 10px;
    	_padding-left:0;
    	font:16px Georgia;
    	color: #C21C02;
    	text-decoration:none;
    	cursor:default;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:left;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:3px;
    	height:100%;
    	display:inline-block;
    	background-color:#cccccc #111111 #111111 #cccccc;	background-image:none;}
    ul.pureCssMenu ul li.sep span{
    	width:100%;
    	height:3px;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    }
    ul.pureCssMenu li:hover>a{
    	background-color:#C21C02;
    	border-color:#E79600;
    	border-style:solid;
    	font:16px Georgia;
    	color: #FFFFFF;
    	text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    	position:relative;
    	background-color:#C21C02;
    	border-color:#E79600;
    	border-style:solid;
    	font:16px Georgia;
    	color: #FFFFFF;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #666 !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
    ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
    ul.pureCssMenu span{
    	display:block;
    	background-image:url(./images/arr_white.gif);
    	background-position:right center;
    	background-repeat: no-repeat;
       padding-right:12px;}
    ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white.gif);
    }
    ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white.gif)}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
    
    
    div.one {  
          padding: 10px;  
          height:100%;
    } 
    
    .contentBox {
      color:#C21C02;
      font-family: Georgia, "Times New Roman", Times, serif; 
      font-size: 16px;
      clear:both;
      height:100%;
    }
    
    .innerBox {
      color:#C21C02;
      font-family: Georgia, "Times New Roman", Times, serif; 
      font-size: 16px;
      background-color : #ffffff;
      background-image : url("images/content_back.png");
      background-repeat : repeat-y;
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
      padding-bottom : 1em;
      height:100%;
    }
    .innerBox a:link  { 
    color : #FF0000;
    text-decoration:underline;
    }
    .innerBox a:visited {
    color: #FF0000;
    text-decoration : underline; 
    }
    
    .innerBox a:hover  {
    color: #FFFFFF;
    background-color: #8B0000;
    text-decoration: underline;
    }
    
    .innerBox a:active  {
    color : #FF0033; 
    background-color: #FFFFFF;
    text-decoration: underline;
    }
    
    .columns
    {
        width:100%;
    }
    .left
    {
        float:left;
        width:620px;
        
    }
    .right
    {
        margin-left:340px;
    }
    .clear
    {
        clear:both;
    }
    .columns-b
    {
        width:100%;
    }
    .left-b
    {
        float:left;
        width:500px;
        
    }
    .right-b
    {
        margin-left:450px;
    }
    .clear
    {
        clear:both;
    }
    #h1 { 
     text-shadow:black 0.5em 0.5em 0.5em;   
     text-align: center;
        font-family: Georgia, "Times New Roman", Times, serif; 
        font-size: 18px; 
        font-weight: bold; 
        color: #FFFFFF; 
        display: block;
     } 
    #h2 { 
        text-align: center;
        font-family: Georgia, "Times New Roman", Times, serif; 
        font-size: 16px; 
        color: #FFFFFF; 
        display: block;
     } 
    #h3 { 
        text-align: center;
        font-family: Georgia, "Times New Roman", Times, serif; 
        font-size: 12px; 
        color: #FFFFFF; 
        display: block;
        padding: 6px; 
    } 
    #h4 { 
        text-align: center;
        font-family: Georgia, "Times New Roman", Times, serif; 
        font-size: 10px; 
        color: #FFFFFF; 
        display: block;
        padding: 6px; 
    } 
    
    
    #footer {
      background : url("images/footer.gif") no-repeat;
      height:35px;
      text-align : center;
      font-size : 16px;
      font-family : sans-serif;
      color : maroon;
      padding-top: 5px;
    }
    #footer a:link  { 
    color : #7a0026;
    text-decoration:underline;
    }
    
    #footer a:visited {
    color: #7a0026;
    text-decoration : underline; 
    }
    
    #footer a:hover  {
    color: #FFFFFF;
    background-color: #8B0000;
    text-decoration: underline;
    }
    
    #footer a:active  {
    color : #7a0026; 
    background-color: #FFFFFF;
    text-decoration: underline;
    }
    Do you want me to post the HTML?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,937
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    The height of what isn't 100% of what?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I made an adjustment to this code in the css file

    Code:
    .contentBox {
      color:#C21C02;
      font-family: Georgia, "Times New Roman", Times, serif; 
      font-size: 16px;
      clear:both;
      height:100%;
    }
    to this

    Code:
    .contentBox {
      color:#C21C02;
      font-family: Georgia, "Times New Roman", Times, serif; 
      font-size: 16px;
      clear:both;
      height:400px;
    }
    Is this what you are looking for?

    http://www.web-user.info/temp/epland.html
    Thanks,

    Bud

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    oh, I'm sorry for not explaining better, I meant the where the pages' text content is

    yes I was looking to make the entire page height be full height, whatever the screen height of the viewer may be, so thought that height:100% would be proper

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,937
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    What you really might want then is to leave that at 100% and set the html element's height to 100%.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    I added this to the CSS file

    Code:
    html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    now the page is just a bit to long/high, although I will leave this for now because I am unsure of how much content my buddy has for each page

    thanks

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,937
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    html width is natively 100%, by declaring it though it may distort the other dimension. I'd drop that part.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    OK thanks

Similar Threads

  1. Replies: 0
    Last Post: 08-11-2009, 06:19 AM
  2. Replies: 2
    Last Post: 11-04-2007, 05:21 PM
  3. matching div height to dynamic Iframe height
    By Kevisazombie in forum JavaScript
    Replies: 1
    Last Post: 10-07-2007, 10:22 PM
  4. Replies: 0
    Last Post: 08-06-2007, 06:12 AM
  5. Setting a division's height based on Screen Height.
    By xstayxstrongx in forum JavaScript
    Replies: 1
    Last Post: 01-27-2006, 03:15 AM

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
  •