Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Very Basic CSS Assistance

    Hi All,

    I need some assistance with a page I am building. I am going to start off with a disclaimer.

    Disclaimer begin
    I am not a coder. I have very basic CSS skills (hence my asking for help). I am a novice. I am not looking for comments such as "If you don't know what you are doing you shouldn't be doing it" or similar. If you don't have anything constructive to add, please scroll on to the next post that may interest you.
    Disclaimer end

    Sad I had to add that disclaimer, I'm only doing it out of past experience!

    Anyone who is helpful and wanting to assist, please read on!

    So, here is my problem. I have struggled thus far to reach this point:

    Dev Index

    But the thing I can't work out is the footer bar. I want it to be on the bottom, no matter how large the text on the page is. I have used floats as the main body so they stretch according the text amount. I have placed the footer div at the bottom of the HTML, yet, as you can see, it seems to still appear up behind the main content. Arrggh.

    Here is my CSS (excuse the formatting):

    Code:
    /* == global styles == */
    
    body  {
        font-family: "Helvetica Neue", Arial, sans-serif; /* default page font */
        background: #ebebeb  url(../images/topBanner.png) repeat-x;
        margin: 0;          /* shorthand for all margins = 0 */
        padding: 0;         /* no padding */
    }
    
    p, h1, h2, h3, h4, h5, h6, li {
        margin: 1ex 1em;
    }
    
    p {
        color: #525252;
    	font-size: .8em;
    }
    
    #outerDiv {
        width: 760px;       /* sets the content width */
        margin: 0 auto;     /* no top/bottom margin, centered horizontally */
        background: #ebebeb;
        }
        
    /* == header == */
    
    #headerDiv {
    	height: 320px;
    	background: #ebebeb url(../images/headerLogo.png) no-repeat;
    }
    
    /* == content == */
    
    #contentDiv {
    	position: relative;
    }
    
    /* == menu == */
    
    #menuDiv {
    	width: 760px;
    	position: absolute;
    	left: 180px;
    	bottom: 0;
    	background: #ebebeb url(../images/longShadow.png) no-repeat -180px top;
    }
    
    #menuDiv ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #menuDiv li {
        float: left;
        margin: 0;
        padding: 0;
    }
    
    #menuDiv a {
    	left: 100px;
        font-size: .6em;
        display: block;
        color: #525252;
        text-decoration: none;
        padding: 0 15px 0 21px;
        margin-right: 10px;
        background: url(../images/menuSprite.png) 0 -25px;
        border: none;
    	font: .8em/25px "Helvetica Neue", Arial, sans-serif;
    }
    
    #menuDiv a:hover {
        color: #82b32a;
        background-position: 0 0;
    }
    
    #menuDiv a.current {
    	color: #525252;
    	margin-bottom: -15px;
    	height: 30px;
    	background-position: 0 -50px;
    }
    
    #menuDiv a.current:hover {
    	cursor: default;
    }
    
    /* == main content == */
    
    #mainDiv {
        position: absolute;
    	background: url(../images/containerBG.png) no-repeat;
    
    }
    
    #leftDiv {
    	float: left;
    	padding: 15px;
    	width: 450px;
    }
    
    #rightDiv {
    	float: right;
    	padding: 15px;
    	width: 250px;
    }
    
    /* == footer == */
    
    #footerDiv {
    	background: #6f6f6f;
    	height: 100px;
    	bottom: 100%;
    }
    
    
    #footerContent {
    	width: 670px;
    	padding: 10px;
    }
    
    #footerContent p {
    	font: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    	font-size: .6em;
    	color: #424242;
    }
    
    
    /* == miscellaneous styles == */
    
    .clear {
        clear: both;
        height: 0;
        margin: 0;
        padding: 0;
    }
    Here is the body HTML (again, excuse the formatting):

    Code:
    <body>
    <div id="outerDiv">
    	
      <div id="headerDiv">
      </div> <!--headerDiv-->
      
      <div id="contentDiv">
        
       	<div id="menuDiv">
        	  <ul>
              <li><a href="home.php" class="current">Home</a></li>
                    <li><a href="survey.php">Survey</a></li>
                    <li><a href="health.php">Health Services</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
              </ul>
    
        </div> <!--menuDiv-->
            
            <div id="mainDiv">
            
            	<div id="leftDiv">
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices nulla a lectus tincidunt molestie. Mauris quis mauris eget libero auctor semper in id leo. Aenean ullamcorper tortor ac purus gravida sed 	congue lectus lobortis. Cras mauris velit, semper vel adipiscing ac, aliquam sed urna. Pellentesque tristique auctor diam, sed ultrices velit blandit in. Donec id quam neque. Pellentesque tempor lacus ut purus cursus id viverra erat ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
           	  </div> 
            	<!--leftDiv-->
                
                <div id="rightDiv">
            	<img src="images/mainApple.png" width="240" height="357" />
            	</div> 
                <!--rightDiv-->
            
           
            </div> <!--mainDiv-->
    
      </div> <!---contentDiv--->       
    
    
    </div> <!--outerDiv-->
    
    <div id="footerDiv">
    
    	<div id="footerContent">
        
        <p>footer testing message</p>
        
        </div><!--footerContent-->
        
    </div> <!--footerDiv-->
    </body>
    If anyone could help, that would be supremely helpful!

    Cheers!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Have you tried clearing your float? Try adding


    overflow: auto;

    to your mainDiv css rule. Then remove the position: absolute.

    Without knowing exactly the look you want, thats the best I can offer. Maybe if that doesnt work, try taking a screenshot showing how you want it to look.
    Teed

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Have you tried clearing your float? Try adding


    overflow: auto;

    to your mainDiv css rule. Then remove the position: absolute.

    Without knowing exactly the look you want, thats the best I can offer. Maybe if that doesnt work, try taking a screenshot showing how you want it to look.
    Didn't work

    Another thing is, the shadow under the main header get chopped off on the left hand side, because I have to move the menuDiv over 18-px to make sure it is centered. Anyone know a fix for this?

    Here is what I want it to look like:


  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well when I just remove the position: absolute; I get this:






    When I add overflow: auto; then your mainDiv background comes back, but your menu is removed from its original place. I think you're going to have to move that menu div somewhere else, but I havent figured out where yet.
    Attached Thumbnails Attached Thumbnails Very Basic CSS Assistance-stickyfooter.jpg  
    Last edited by teedoff; 07-20-2011 at 03:25 PM.
    Teed

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    where is it you want the menu to go? it is absent in the picture of how you want it to look

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Well when I just remove the position: absolute; I get this:






    When I add overflow: auto; then your mainDiv background comes back, but your menu is removed from its original place. I think you're going to have to move that menu div somewhere else, but I havent figured out where yet.
    Thank you so much for your help!!

    A side effect of removing the "position: absolute" on #mainDiv is that the background image has gone.

    Any suggestions?
    Last edited by Jaali; 07-21-2011 at 08:26 AM.

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    where is it you want the menu to go? it is absent in the picture of how you want it to look
    If you have a look at the test page you can see where I want the menu. It's in the right place and how I want it looking, except the shadow image. I'm going to try and play with image floating to see if I can get it where I want it!

    Any suggestions are welcome!

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    your site is even easier, and doesn't require any floats for basic layout... unless I missed something... see pic, change the sizes and colors accordingly... there are a number of ways to tackle the logo in the header

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0px; padding:0px;}
    body{background:grey;}
    #header{
      width:100%;
      height: 200px;
      background:green;
      }
    #menubar{
      width:300px;
      height:50px;
      margin:0px auto;
      background:blue;
      }
    #content{
      min-height:500px;
      width:1024px;
      margin:0px auto;
      }
    #footer{
      width:100%;
      height:100px;
      background:purple;
      }
    
    </style>
    </head>
    
    <body>
    <div id="header">change my size and color</div>
    <div id="menubar">change my size and color</div>
    <div id="content">
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    Text Text Text Text Text Text Text Text Text Text Text 
    </div>
    <div id="footer">change my size and color</div>	
    	
    	  
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Very Basic CSS Assistance-sizeandcolor.jpg  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    Jaali (07-24-2011)

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Jaali View Post
    Thank you so much for your help!!

    A side effect of removing the "position: absolute" on #mainDiv is that the background image has gone.

    Any suggestions?
    I told you, if you place

    overflow: auto;

    on your mainDiv, then the background image is back where it's supposed to be, but your menu is removed from its position.

    You will need to rework where the menu is in your code I think. I even posted an image to show you how this all looked.
    Last edited by teedoff; 07-21-2011 at 02:58 PM.
    Teed

  • #10
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    your site is even easier, and doesn't require any floats for basic layout... unless I missed something... see pic, change the sizes and colors accordingly... there are a number of ways to tackle the logo in the header
    Thank you! I used your ideas and made the site more simple than I originally had it.

    Quote Originally Posted by teedoff View Post
    I told you, if you place

    overflow: auto;

    on your mainDiv, then the background image is back where it's supposed to be, but your menu is removed from its position.

    You will need to rework where the menu is in your code I think. I even posted an image to show you how this all looked.
    I have changed the code to make it more simple now, but the menu is in the same place (it's where I want it). Everything is perfect, except the menu needs centering and the shadow to be added (similar to the shadow on the footer).

    Could anyone assist with this? This is my updated code, and you can view the site here

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page 1</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="header">
    <div id="headerImage">
    <img id="headerLogo" src="images/headerLogo.png" width="760" height="295" />
    </div>
    </div>
    <div id="menubar">
        	  <ul>
              <li><a href="home.php" class="current">Home</a></li>
                    <li><a href="survey.php">Survey</a></li>
                    <li><a href="health.php">Health Services</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
              </ul>
    </div>
    <div id="content">
      <img id="contentApple" src="images/mainApple.png" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas euismod sagittis. Curabitur accumsan, nisi ac placerat facilisis, orci massa euismod neque, eget porta urna diam tristique risus. Integer tempus, nibh non tincidunt scelerisque, felis risus pretium diam, at aliquet nibh leo nec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi at enim eros, elementum placerat ante. In blandit dui a metus molestie at placerat erat dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc libero neque, pulvinar sit amet lobortis non, tincidunt non augue. Mauris ipsum lacus, tempor in dignissim vel, sagittis sit amet lorem. Vestibulum lacinia fermentum sapien, eu malesuada nulla hendrerit sed. Donec quis libero vel magna convallis dapibus. Curabitur congue porta velit eu accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque vestibulum porta. Nullam in elementum lacus. </p>
    
      <p>&nbsp;</p>
    </div>
    <div id="footer">
    <div id="footerContent">
      <p>Company A</p>
      <p>111 Test Street</p>
      <p>Suburb, VIC 3000</p>
      <p>Australia</p>
      <p>www.test.com.au</p>
      <p>&nbsp;</p>
      <img id="footerDivide" src="images/footerDivide.png" width="760" height="10" />
      <p>&nbsp;</p>
      <p1>site designed by XxXxXxXxX</p1>
    </div>	
    </div>
    	  
    </body>
    </html>
    Code:
    *{
    	margin:0px; padding:0px;
    }
    
    body{
        background: #ebebeb
    }
    
    p{
    	color: #323232;
    	font: .8em Arial, Helvetica, Geneva, sans-serif;
    }
    
    a {
        text-decoration: none;
        color: #9eada1;
    }
    
    a:hover, a:active {
        color: #566440;
        border-bottom: 1px dashed #566440;
    }
    
    #header{
        width:100%;
        height: 295px;
        background: #ebebeb url(../images/topBanner.png) repeat-x;
    }
    
    #headerImage{
    	text-align: center;
    }
    
    #menubar{
        width:760px;
        height:25px;
    	margin: auto;
    }
      
    #menubar ul {
        list-style: none;
    }
    
    #menubar li {
        float: left;
    }
    
    #menubar a {
        font-size: .6em;
        display: block;
        color: #525252;
        text-decoration: none;
        padding: 0 15px 0 25px;
        margin-right: 5px;
        background: url(../images/menuSprite.png) 0 -25px;
        border: none;
    	font: .8em/25px "Helvetica Neue", Arial, sans-serif;
    }
    
    #menubar a:hover {
        color: #82b32a;
        background-position: 0 0;
    }
    
    #menubar a.current {
    	color: #525252;
    	margin-bottom: -15px;
    	height: 25px;
    	background-position: 0 -50px;
    }
    
    #menubar a.current:hover {
    	cursor: default;
    }
      
    #content{
        min-height:500px;
        width:730px;
        margin:0px auto;
        background: url(../images/containerBG.png) no-repeat;
        padding: 15px;
    }
    
    #contentApple{
    	float: right;
    	margin-left: 5px;
    }
      
    #footer{
        width:100%;
        height:200px;
        background: #6f6f6f;
    }
      
    #footerContent{
        background: url(../images/footerShadow.png) no-repeat;
        width: 720px;
        margin: 0 auto;
        padding: 20px;
    }
    
    #footer p {	
    	font: .7em Arial, Helvetica, Geneva, sans-serif;
    	color: #323232;
    
    }
    
    #footer p1 {	
    	font: .6em Arial, Helvetica, Geneva, sans-serif;
    	color: #424343;
    }
    
    #footerDivde {	
       float: left;
    
    }

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    set width to 408px (sum of all the lis including margins) then use margin: auto;

    Code:
    #menubar ul {
     width: 408px;
     margin: 0 auto;
    }
    margin: auto; set an equal margin on both sides (thus centering your ul)

    ---
    you have a margin on the <a> of the last li (contact us). you could get rid of this with

    Code:
    #menubar ul li:last-child a {
     margin-right: 0;
    }
    then you just change the width to 403px instead of 408px
    Last edited by Sammy12; 07-24-2011 at 07:43 PM.

  • Users who have thanked Sammy12 for this post:

    Jaali (07-25-2011)

  • #12
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    set width to 408px (sum of all the lis including margins) then use margin: auto;

    Code:
    #menubar ul {
     width: 408px;
     margin: 0 auto;
    }
    margin: auto; set an equal margin on both sides (thus centering your ul)

    ---
    you have a margin on the <a> of the last li (contact us). you could get rid of this with

    Code:
    #menubar ul li:last-child a {
     margin-right: 0;
    }
    then you just change the width to 403px instead of 408px
    Thank you so much, you have helped a huge amount!!


  •  

    Posting Permissions

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