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 Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    To float or to position

    I am working on a header.
    Logo goes in left corner and controlls the height of the header.
    Nav Bar goes top right corner
    h2 tag goes along the bottom of the header(bottom right of picture.

    My 1st question--Would I use Float or Position to place nav bar and tag phrase within the red box?

    Problem 1
    I have set the file up for float, but you will notice the tag phrase is not at the bottom of the box? How can I get the "custom creative solution" to be at the bottom and not putting a green stripe within my logo? P.S. The logo is attached

    Thanks you for you time.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
         <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <title>
                   Home
              </title>
              <style type="text/css" media="all">
    <!--
              /*WRAPPER CSS */
              #wrapper{
              text-align:auto;
              margin:0 auto;
              width:780px;
              /* Temporary borders Wrapper Red */
              border:solid 3px #FFFF00;
              }
              /*HEADER CSS */
              #header{
              background-color: #8859a4;
              margin:0;
              padding:0;
              /*position:relative;*/  /*Used for positioning*/
              /* Temporary borders Header orange */
              border:dashed 1px #00FF00;
              background:red;
              }
              #header img{
              width: 350px; /*Set Image Width*/
              border:solid 1px #0000FF;
              /*position:bottom;*/
              /*display:block;*/  /*Not exactly sure wheather I need to use this or not*/
              float:left;  /*Float the image to the left, thus allowing text to be put on the right side*/
              }
              #header h2{
              /*position:absolute;*/  /*Used for absolute positioning*/
              left:358px;
              color:#FFFFFF;
              background-color:#33FF99;
    		  }
    
              /*BUTTONS CSS */
              #buttons{
              background-color: #000000;
              margin-top:15px;
              padding:0px;
              height:1em;
              float:right;
              /*position:top;*/  /*Used for positioning*/
              /* Temporary borders Header orange */
              border:dashed 1px #FFCC00;
    
              }
              #buttons ul{
              /*color:#00FF66;*/
              margin:0;
              padding:0;
              list-style:none;
              float:  left;
              }
              #buttons li{
              float: left;
              }
              #buttons li a:link, #buttons li a:visited{
              background:#666666;
              padding: .2em, .5em;
              display:block;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-size:.8em;
              font-weight:bold;
              color: #d5b718;
              text-decoration:none;
              line-height: 1.2em;
              margin-right:.5em;
              }
              #buttons li a:hover{
              color:#0000FF;
              background:#FFFF00;
              }
              #buttons li a.current, #buttons li a.current:hover, #buttons li a.current:active{
              color:#666666;
              background:#d5b718;
              cursor:default;
              }
    
              -->
              </style>
         </head>
         <body bgcolor="#AF8FC2" background="../zimages/page_background/blacktotransparent.png">
              <div id="wrapper">
    
                   <!--Header div tag Start -->
                   <div id="header">
                        <img src="../zimages/header/weblogo.png" alt="web logo"><!--Logo Image-->
                         <!--Buttons div tag Start-->
                        <div id="buttons">
                             <ul>
                                  <li>
                                       <a href="#" class="current">Home</a>
    
                                  </li>
                                  <li>
                                       <a href="#">Services</a>
                                  </li>
                                  <li>
                                       <a href="#">Features</a>
                                  </li>
                                  <li>
    
                                       <a href="#">Testimonials</a>
                                  </li>
                                  <li>
                                       <a href="#">Support</a>
                                  </li>
                                  <li>
                                       <a href="#">About Us</a>
    
                                  </li>
                             </ul>
                        </div><!-- Buttons div tag end -->
                        <h2>
                             custom creative solutions
                        </h2><!--Tag Linge-->
                        <!--Clearing floot so footer will sit under two columns-->
                        <br class="clearfloat">
                        <!--Clear Float end-->
    
                   </div><!-- header div tag end -->
              </div><!-- wrapper div tag end -->
         </body>
    </html>
    Attached Thumbnails Attached Thumbnails To float or to position-weblogo.png  

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You could use either one really. Personally, I would probably work with a right float for at least the navigation but it's really up to you.

    If your logo size will be changing often then there is some benefit to using position:absolute; on the h2 element (provided you give the header position:relative; to contain it). That way if your logo became much taller than it used to be you wouldn't have to adjust the top margin/padding on the h2 to keep it at the bottom of the header. The drawback would be that when your logo becomes too short (top-to-bottom) your h2 would overlap your navigation. You could solve this with a "min-height" on the header though, but that means living with the fact that your logo might not always control the height of the header. If short headers are never anticipated though this isn't much of a concern.

    As for your problem, I can say that in general you would align the h2 by defining a set height for the element and then setting appropriate top margin to it so that it lines up where you want it.

    Now I also see that you have a lingering left:358px; style which needs to go away if you are using a float instead of positioning (in fact, I don't see the float:right; anywhere - if you are relying solely on the image being left floated but you want the tagline to be right justified you will need to at least add text-align:right; to the h2 style along with some right-hand padding or margins if needed).

    Anyway, you might try something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
         <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <title>
                   Home
              </title>
              <style type="text/css" media="all">
    <!--
              /*WRAPPER CSS */
              #wrapper{
              text-align:auto;
              margin:0 auto;
              width:780px;
              /* Temporary borders Wrapper Red */
              border:solid 3px #FFFF00;
              }
              /*HEADER CSS */
              #header{
              background-color: #8859a4;
              margin:0;
              padding:0;
              /*position:relative;*/  /*Used for positioning*/
              /* Temporary borders Header orange */
              border:dashed 1px #00FF00;
              background:red;
    overflow:auto; /*This takes the place of your clearfloat <br> tag...*/
              }
              #header img{
    height:100px;
              width: 350px; /*Set Image Width*/
              border:solid 1px #0000FF;
              /*position:bottom;*/
              /*display:block;*/  /*Not exactly sure wheather I need to use this or not*/
              float:left;  /*Float the image to the left, thus allowing text to be put on the right side*/
              }
              #header h2{
              /*position:absolute;*/  /*Used for absolute positioning*/
     /*         left:358px;*/
              color:#FFFFFF;
              background-color:#33FF99;
    height:30px;
    line-height:30px;
    margin-bottom:0;
    margin-top:72px;
    padding-right:20px;
    text-align:right;
    		  }
    
              /*BUTTONS CSS */
              #buttons{
              background-color: #000000;
              margin-top:15px;
              padding:0px;
              height:1em;
              float:right;
              /*position:top;*/  /*Used for positioning*/
              /* Temporary borders Header orange */
              border:dashed 1px #FFCC00;
    
              }
              #buttons ul{
              /*color:#00FF66;*/
              margin:0;
              padding:0;
              list-style:none;
              float:  left;
              }
              #buttons li{
              float: left;
              }
              #buttons li a:link, #buttons li a:visited{
              background:#666666;
              padding: .2em, .5em;
              display:block;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-size:.8em;
              font-weight:bold;
              color: #d5b718;
              text-decoration:none;
              line-height: 1.2em;
              margin-right:.5em;
              }
              #buttons li a:hover{
              color:#0000FF;
              background:#FFFF00;
              }
              #buttons li a.current, #buttons li a.current:hover, #buttons li a.current:active{
              color:#666666;
              background:#d5b718;
              cursor:default;
              }
    
              -->
              </style>
         </head>
         <body bgcolor="#AF8FC2" background="../zimages/page_background/blacktotransparent.png">
              <div id="wrapper">
    
                   <!--Header div tag Start -->
                   <div id="header">
                        <img src="../zimages/header/weblogo.png" alt="web logo"><!--Logo Image-->
                         <!--Buttons div tag Start-->
                        <div id="buttons">
                             <ul>
                                  <li>
                                       <a href="#" class="current">Home</a>
    
                                  </li>
                                  <li>
                                       <a href="#">Services</a>
                                  </li>
                                  <li>
                                       <a href="#">Features</a>
                                  </li>
                                  <li>
    
                                       <a href="#">Testimonials</a>
                                  </li>
                                  <li>
                                       <a href="#">Support</a>
                                  </li>
                                  <li>
                                       <a href="#">About Us</a>
    
                                  </li>
                             </ul>
                        </div><!-- Buttons div tag end -->
                        <h2>
                             custom creative solutions
                        </h2><!--Tag Linge-->
                        <!--Clearing floot so footer will sit under two columns-->
                       <!-- <br class="clearfloat"> This is bad practice!! -->
                        <!--Clear Float end-->
    
                   </div><!-- header div tag end -->
              </div><!-- wrapper div tag end -->
         </body>
    </html>
    I have highlighted my changes. I might have overlooked some so take a look at the code and get to know it. Let me know if you have any questions about the how or why of these changes.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    cc4digital (10-22-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning cc4digital,
    Is there any reason your logo can't be a background?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home</title>
    <style type="text/css" media="all">
    body {
    	background: #ccc;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper{
    	width:780px;
    	margin:0 auto;
    	border:solid 3px #FFFF00;
    	padding: 0 0 600px 0;
    }
    #header{
    	width: 780px;
    	height: 100px;
    	background: #8859a4 url(weblogo.png) no-repeat left;
    	border:dashed 1px #00FF00;
    	overflow: auto;
    }
    #header h2{
    	width: 300px;
    	float: left;
    	margin: 70px 0 0 30px;
    	color:#FFFFFF;
    }
    #buttons{
    background-color: #000000;
    margin-top:15px;
    padding:0px;
    height:1em;
    float:right;
    border:dashed 1px #FFCC00;
    }
    #buttons ul{
    margin:0;
    padding:0;
    list-style:none;
    float:  left;
    }
    #buttons li{
    float: left;
    }
    #buttons li a:link, #buttons li a:visited{
    background:#666666;
    padding: .2em, .5em;
    display:block;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #d5b718;
    text-decoration:none;
    line-height: 1.2em;
    margin-right:.5em;
    }
    #buttons li a:hover{
    color:#0000FF;
    background:#FFFF00;
    }
    #buttons li a.current, #buttons li a.current:hover, #buttons li a.current:active{
    color:#666666;
    background:#d5b718;
    cursor:default;
    }
    
    
    </style>
         </head>
    <body>
        <div id="wrapper">
            <div id="header">
                    <div id="buttons">
                        <ul>
                            <li>
                            	<a href="#" class="current">Home</a>
                            </li>
                            <li>
                            	<a href="#">Services</a>
                            </li>
                            <li>
                            	<a href="#">Features</a>
                            </li>
                            <li>
                            	<a href="#">Testimonials</a>
                            </li>
                            <li>
                            	<a href="#">Support</a>
                            </li>
                            <li>
                            	<a href="#">About Us</a>
                            </li>
                        </ul>
                    <!--end buttons --></div>
                <h2>custom creative solutions</h2>
            <!--end header--></div>
        <!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by cc4digital View Post
    ...Logo goes in left corner and controlls the height of the header...
    Yeah, the OP apparently wants the logo to be the determining factor for the height of the entire header. I'm getting the impression that this is for some sort of template, but I might be wrong.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Oops, I saw that but immediately forgot it.
    Still, floats are the way to do it -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home</title>
    <style type="text/css" media="all">
    body {
    	background: #ccc;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper{
    	width:780px;
    	margin:0 auto;
    	border:solid 3px #FFFF00;
    	padding: 0 0 600px 0;
    }
    #header{
    	width: 780px;
    	background: #8859a4;
    	border:dashed 1px #00FF00;
    	overflow: auto;
    }
    #header img {
    	float: left;
    }
    #header h2{
    	width: 300px;
    	float: left;
    	clear: left;
    	margin: 10px 0 0 30px;
    	color:#FFFFFF;
    }
    #buttons{
    background-color: #000000;
    margin-top:15px;
    padding:0px;
    height:1em;
    float:right;
    border:dashed 1px #FFCC00;
    }
    #buttons ul{
    margin:0;
    padding:0;
    list-style:none;
    float:  left;
    }
    #buttons li{
    float: left;
    }
    #buttons li a:link, #buttons li a:visited{
    background:#666666;
    padding: .2em, .5em;
    display:block;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #d5b718;
    text-decoration:none;
    line-height: 1.2em;
    margin-right:.5em;
    }
    #buttons li a:hover{
    color:#0000FF;
    background:#FFFF00;
    }
    #buttons li a.current, #buttons li a.current:hover, #buttons li a.current:active{
    color:#666666;
    background:#d5b718;
    cursor:default;
    }
    </style>
         </head>
    <body>
        <div id="wrapper">
            <div id="header">
            	<img src="weblogo.png" width="350" height="100" alt="logo image" />
                    <div id="buttons">
                    	<ul>
                            <li>
                            	<a href="#" class="current">Home</a>
                            </li>
                            <li>
                            	<a href="#">Services</a>
                            </li>
                            <li>
                            	<a href="#">Features</a>
                            </li>
                            <li>
                            	<a href="#">Testimonials</a>
                            </li>
                            <li>
                            	<a href="#">Support</a>
                            </li>
                            <li>
                            	<a href="#">About Us</a>
                            </li>
                        </ul>
                    <!--end buttons --></div>
                <h2>custom creative solutions</h2>
            <!--end header--></div>
        <!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up Reply and Thansk

    Rowsdower! & Excavator.

    1st THANK YOU MUCH FOR YOUR REPLIES AND COMMENTS.

    Now to answer your question--
    I will look the code of all your examples over this morning, but I wanted to reply to your question 1st.

    Rowsdower!: You could use either one really.
    Great explanation. I think one of my big issue is I prefer to use float, but when it comes to moving an item to a specific location within a box I have a lack of knowledge. I then fall back to position. I did read in my CSS manual to never mix float and position together.

    Excavator: Is there any reason your logo can't be a background?
    Actually, that would be a posibility, but my current background is a black to purple gradient for page properties. Thus the reason for the transparent png logo.


    Rowsdower!: Yeah, the OP apparently wants the logo to be the determining factor for the height of the entire header. I'm getting the impression that this is for some sort of template, but I might be wrong.
    The webpage layout is not a template. I am currently learning CSS and at the same time reading as many books as I can along with taking a classes at the local Community College. It is sad because most of the people in my class are using Dreamweaver design mode only. Of course, I use it too-- but I do a lot of work within the code view. Most in my class have no idea what the code view is. For exampe. The instructor was teaching everyone to use frames. I brought up the idea that you can do the same thing with CSS fixed and it was shot down quickly. Frames are fine for some situation, but you then have multiple pages for one page and search engines will send a user to one of the linking pages instead of the main page.

    Thanks again for the input and I will extract each of your example after breakfast.

    Chuck

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Rowsdower a couple of quesitons??

    Quesiton 1
    I had left:358px for my h2 tag. You used text-align:right. then padded-right to move to the left. Why would left:358px not work? I would think if my image is 350px wide that left:358px would move my text 8 pix to the right of the right side of the image.

    Question 2
    Margin-top:72 move the h2 down 72px and you made the line height and the height 30 pix. My guess is you made the line height 30 px so it has a actual size. Thus, you moved down 72px +30px or 102px which put the box at the bottom in line with the image. Am I correct in what you did here?

    Question3 and Issue
    My h2 has a green background. Currently, my logo has tranparency in it. Therefore, my current layout has a green strip going under/through my logo. How can I stop the background color of the h2 tag from showing up in my logo? Do I need to use position here or can I start the line at 358px from left edge? (See jpg for explainaiton of green stripe)

    Attached Thumbnails Attached Thumbnails To float or to position-headercurrent.jpg  

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Sorry cc4digital,
    I didn't see that part about the h2 going on the right. I still think floats are the way to go.

    Using left:385px; would only work if you used position:absolute;

    Stop your green bar from going under your transparent log by giving the h2 a width.
    Like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home</title>
    <style type="text/css" media="all">
    body {
    	background: #ccc;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper{
    	width:780px;
    	margin:0 auto;
    	border:solid 3px #FFFF00;
    	padding: 0 0 600px 0;
    }
    #header{
    	width: 780px;
    	background: #8859a4;
    	border:dashed 1px #00FF00;
    	overflow: auto;
    }
    #header img {
    	float: left;
    }
    #header h2{
    	width: 395px;
    	float: right;
    	margin: 30px 0 0 0;
    padding: 0 0 0 10px;
    	color:#FFFFFF;
    background: #33FF99;
    }
    #buttons{
    background-color: #000000;
    margin-top:15px;
    padding:0px;
    height:1em;
    float:right;
    border:dashed 1px #FFCC00;
    }
    #buttons ul{
    margin:0;
    padding:0;
    list-style:none;
    float:  left;
    }
    #buttons li{
    float: left;
    }
    #buttons li a:link, #buttons li a:visited{
    background:#666666;
    padding: .2em, .5em;
    display:block;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #d5b718;
    text-decoration:none;
    line-height: 1.2em;
    margin-right:.5em;
    }
    #buttons li a:hover{
    color:#0000FF;
    background:#FFFF00;
    }
    #buttons li a.current, #buttons li a.current:hover, #buttons li a.current:active{
    color:#666666;
    background:#d5b718;
    cursor:default;
    }
    </style>
         </head>
    <body>
        <div id="wrapper">
            <div id="header">
            	<img src="weblogo.png" width="350" height="100" alt="logo image" />
                    <div id="buttons">
                    	<ul>
                            <li>
                            	<a href="#" class="current">Home</a>
                            </li>
                            <li>
                            	<a href="#">Services</a>
                            </li>
                            <li>
                            	<a href="#">Features</a>
                            </li>
                            <li>
                            	<a href="#">Testimonials</a>
                            </li>
                            <li>
                            	<a href="#">Support</a>
                            </li>
                            <li>
                            	<a href="#">About Us</a>
                            </li>
                        </ul>
                    <!--end buttons --></div>
                <h2>custom creative solutions</h2>
            <!--end header--></div>
        <!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    cc4digital (10-22-2009)

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by cc4digital View Post
    Quesiton 1
    I had left:358px for my h2 tag. You used text-align:right. then padded-right to move to the left. Why would left:358px not work? I would think if my image is 350px wide that left:358px would move my text 8 pix to the right of the right side of the image.

    Question 2
    Margin-top:72 move the h2 down 72px and you made the line height and the height 30 pix. My guess is you made the line height 30 px so it has a actual size. Thus, you moved down 72px +30px or 102px which put the box at the bottom in line with the image. Am I correct in what you did here?

    Question3 and Issue
    My h2 has a green background. Currently, my logo has tranparency in it. Therefore, my current layout has a green strip going under/through my logo. How can I stop the background color of the h2 tag from showing up in my logo? Do I need to use position here or can I start the line at 358px from left edge? (See jpg for explainaiton of green stripe)

    Question 1: Already fielded by Excavator for the most part. When you said that the h2 should be in the bottom right I was assuming that you wanted right justification. That's the only reason for the text-align:right; and the right hand padding suggestions. If you prefer to have left justification you can just remove those two lines from the CSS. The suggestion to remove the left:385px stands no matter which way you want the text to be aligned though.
    Question 2: Yes, you are correct about the logic. The total height of your image would be 100px image height + 1px top border + 1px bottom border = 102px. With the 30px height for the h2 element that leaves 72px that we need to move down from the top in order to have the bottom of the h2 rest at the bottom of the header. This math is why using position could have benefits in a template type of setting (since position:absolute; bottom:0; will always find the bottom automatically rather than having to manually adjust the top margin whenever your logo changes height). If you aren't going the template route then I totally agree with Excavator that using positioning (absolute or otherwise) is an inferior choice in this case. Floats are the better option for you.
    Question 3: Already fielded by Excavator
    Last edited by Rowsdower!; 10-22-2009 at 12:56 PM. Reason: Typos...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Excavator Thank you for the response, couple of general questions

    Thank you for your time and responses. I have reiviewed your code and reviewed each line of code. (I am not here to just have you do my code, I am here to learn css.)

    Questions:
    *****************************************
    * {
    margin: 0;
    padding: 0;


    I had to look this one up. I discovered this to be a universal selector. It resets the web page to margin 0 and padding 0. Looks like it is used in order to support older browsers.
    Is my research correct?
    *****************************************
    #wrapper{
    width:780px;
    margin:0 auto;
    border:solid 3px #FFFF00;
    padding: 0 0 600px 0;
    /*text-align:auto; removed by Excavator */
    }


    I do not understand the padding statement-> 0 0 600px 0;
    My current thinking is the wrapper box would only 180px because if the width is 780px, padding is 600px right, the remaining space is only 180 px. Don't quite get this.
    Why 600px to right?

    I notice your removed text-align:auto;
    I commented it and I did not see any change. I gather that is why you removed it.
    I thought IE required text-align:auto to format the wrapper to the center of the page?
    *****************************************
    #header{
    width: 780px;
    background: #8859a4;
    border:dashed 1px #00FF00;
    overflow: auto;
    }


    You added width of 780px.
    Is that to be sure the header box is = to the wrapper width?

    You removed margin:0; padding 0;
    Is this because of the universal selctor above already defined this?

    Don't quite get the overflow:auto:
    I know it is used in case text is to long and runs out of the box.
    What text did you see this happening with?
    *****************************************
    #header h2{
    width: 395px;
    float: right;
    margin: 30px 0 0 0;
    padding: 0 0 0 10px;
    color:#FFFFFF;
    background: #33FF99;
    }


    I like the idea of float right better than text-align:right. Seems cleaner.
    Just wondering if I did use text-align right if it would do the same thing as float:right?

    One thing has me puzzled.
    If I floated the logo image to the left, then isn't the natural flow for the text to be on the right side of the image?
    [It is interesting because without float-right the text goes under logo image]

    If not true, could I use margin to push the text from the left margin to the other side of the image?
    eg if image was 350 wide then eg. margin-left: 355px;
    *****************************************
    One last request: then I think I understand all the new changes and have a much better understanding of css.
    If I wanted to just have the custom creative solution highlighted
    (therefore no green to the right of solution) then I would use a class and embed it within html code?

    [eg-->add to html: class="HL_green"
    add to css: .HL_green{
    color:#FFFFFF;
    background:#33FF99;
    }


    Again, I want to thank you for all your feedback.
    Everyone makes CSS sound so easy, but for me I find it difficult. Dreamweaver CS3 doesn't always show the layout correctly, and different browsers can show different things. Just when you think you have got it you find you need to deal with a work around.
    Last edited by cc4digital; 10-22-2009 at 02:28 PM.

  • #11
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thanks to response

    THANKS FOR THE RESPONSE. I actually think I am starting to understand it. One of my big issue was my confusion between position and floats. As revealed in my code by the left: statment.
    Ok, this is good. Wow, it is a great feeling when you read something and actually start to understand the logic.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by cc4digital View Post
    Questions:
    *****************************************
    * {
    margin: 0;
    padding: 0;


    I had to look this one up. I discovered this to be a universal selector. It resets the web page to margin 0 and padding 0. Looks like it is used in order to support older browsers.
    Is my research correct?
    That is a CSS re-set. Different browsers have different default margin/padding on things and, by setting them all to 0, we are able to specify our own instead.



    *****************************************
    #wrapper{
    width:780px;
    margin:0 auto;
    border:solid 3px #FFFF00;
    padding: 0 0 600px 0;
    /*text-align:auto; removed by Excavator */
    }


    I do not understand the padding statement-> 0 0 600px 0;
    My current thinking is the wrapper box would only 180px because if the width is 780px, padding is 600px right, the remaining space is only 180 px. Don't quite get this.
    Why 600px to right?
    The order goes like this: top,right,bottom,left.
    I just put 600px bottom padding on there for presentation. I could just as easily put height:600px; and got the same look.


    I notice your removed text-align:auto;
    I commented it and I did not see any change. I gather that is why you removed it.

    I thought IE required text-align:auto to format the wrapper to the center of the page?
    I'm not sure but I don't think there is any such thing as text-align:auto;
    http://www.w3schools.com/css/pr_text_text-align.asp

    To center #wrapper, or any element, you give it a width then apply margin:0 auto;



    *****************************************
    #header{
    width: 780px;
    background: #8859a4;
    border:dashed 1px #00FF00;
    overflow: auto;
    }


    You added width of 780px.
    Is that to be sure the header box is = to the wrapper width?
    Yes.




    You removed margin:0; padding 0;
    Is this because of the universal selctor above already defined this?
    Also yes. When you put the reset at the top of your CSS, the cascading property of CSS applies it to everything.

    One other thing about that, the * is just a leftover selector from DOS days that means everything.




    Don't quite get the overflow:auto:
    I know it is used in case text is to long and runs out of the box.
    What text did you see this happening with?
    *****************************************
    #header h2{
    width: 395px;
    float: right;
    margin: 30px 0 0 0;
    padding: 0 0 0 10px;
    color:#FFFFFF;
    background: #33FF99;
    }
    That clears the floats. Here is a good explanation of that - http://www.quirksmode.org/css/clearing.html



    I like the idea of float right better than text-align:right. Seems cleaner.
    Just wondering if I did use text-align right if it would do the same thing as float:right?
    We float things so you can put other things beside them. Experiment with text-align:left and see what happens.





    One thing has me puzzled.
    If I floated the logo image to the left, then isn't the natural flow for the text to be on the right side of the image?
    [It is interesting because without float-right the text goes under logo image]
    Yes, if there is room it would go beside it. Once it is too wide to fit, the natural flow is for it to go below where there is room.




    If not true, could I use margin to push the text from the left margin to the other side of the image?
    eg if image was 350 wide then eg. margin-left: 355px;
    Again, yes. I think. A good 2-column layout uses just that principle. Check out an example at http://nopeople.com/CSS/equal_length_columns/index.html





    *****************************************
    One last request: then I think I understand all the new changes and have a much better understanding of css.
    If I wanted to just have the custom creative solution with a highlighted
    (therefore no green to the right of solution) then I would use a class and embed it within html code?

    [eg-->add to html: class="HL_green"
    add to css: .HL_green{
    color:#FFFFFF;
    background:#33FF99;
    }
    I think in this case there would be no need to add a class. h1, h2, h3 ... are sort of intended to be used once per page and, since your motto would likely be the same in the header of each page, directly styling the h2 would work fine.





    Again, I want to thank you for all your feedback.
    Everyone makes CSS sound so easy, but for me I find it difficult. Dreamweaver CS3 doesn't always show the layout correctly, and different browsers can show different things. Just when you think you have got it you find you need to deal with a work around.
    I think you're in the right place - this is the best forum I've ever found for learning CSS.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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