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 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a few questions...<div> and css3

    Okay here is my site, its hardly anything yet... http://www.newenglandsurfer.com

    First question is that on the <div> that starts with 08/06/06: called "text" how do I get that div to align to the left, not just the text but to have the div against the left border?

    Also is my css up to date, i tried my best but I'm just getting started with css.

    Thanks for the help in advance!



    here is the css code

    body {
    margin: 0;
    padding: 0;
    background-color:#555555;
    }


    .page {
    width: 800px;
    height: 1000px;
    margin: 0 auto;
    text-align: center;
    background: #FFFFFF
    }


    .header {
    width: 800px;
    margin: 0 auto;
    text-align: center;
    background: #FFFFFF;
    }


    .text {
    width: 400px;
    border: 1px solid #060C6F;
    margin: 0 auto;
    background: #FFFFFF;
    }



    h1,h2,h3,h4,h5,h6{
    margin-bottom: 0px;
    padding-bottom: 0px;
    }

    h1 {
    font-family:Verdana,sans-serif;
    font-size:60%;
    }

    h2 {
    font-family:Verdana,sans-serif;
    font-size:60%;
    }

    h3 {
    font-size:60%;
    }



    a:link {
    color: blue }
    a:visited {
    color: purple }

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by petergriffen View Post
    First question is that on the <div> that starts with 08/06/06: called "text" how do I get that div to align to the left, not just the text but to have the div against the left border?
    Remove the code that you’re using to center it: margin: 0 auto. To left-align the text you would use text-align: left. The reason the text is centered is because you applied text-align: center to a parent element (i.e., .page) and the children elements (e.g., .text) are inheriting that style.

    Quote Originally Posted by petergriffen View Post
    Also is my css up to date, i tried my best but I'm just getting started with css.
    Looks up-to-date to me.

    I would generally apply margin: 0; padding: 0 to everything though so that browsers’ differing default margins and padding don’t cause problems and so that you don’t end up declaring margins or padding to be zero over and over later: * {margin: 0; padding: 0;}. You can also condense hexadecimal codes (#ffffff would become #fff) or use keywords (white) for readability. Zero doesn’t require a unit so margin-bottom: 0px could be margin-bottom: 0.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    one more quick question how would i align that h3 tag "Copyright © 2006 www.NewEnglandSurfer.com All Rights Reserved " to the bottom of the page.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by petergriffen View Post
    one more quick question how would i align that h3 tag "Copyright © 2006 www.NewEnglandSurfer.com All Rights Reserved " to the bottom of the page.
    Code:
    .page {
      position: relative;
      }
    h3 {
      position: absolute;
      bottom: 0;
      }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for your help so far i tried to get that tag centered properly...i tought that
    h3 {
    font-size:60%;
    position: absolute;
    bottom: 0;
    left:50%;
    }
    is the way to do it but it did not work

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by petergriffen View Post
    thanks for your help so far i tried to get that tag centered properly...
    To center the footer horizontally, you would make the h3 element’s width equal to that of the layout and use text-align: center to center its content. Remember that when you absolutely position a div element, it no longer expands automatically; instead it expands with its content.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    Oct 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to get it to align at the bottom of the page causes it to not center with the page and not color through the entire width

    h3 {
    font-size:60%;
    bottom: 0;
    position: absolute;
    background:#FFF;
    text-align: center
    }

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    I just tried the code and instructions I provided in my prior two posts, in the context of your page, and it works fine. text-align: center is not necessary after all though since your footer is inheriting that style from a parent element already. In plain English (or CSS, rather), here again is the code you need in case you still don’t get it:

    Code:
    .page {
      position: relative;
      }
    h3 {
      position: absolute;
      bottom: 0;
      width: 100%; /* "you would make the h3 element's width equal to that of the layout" */
      }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New Coder
    Join Date
    Oct 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the help...im sorry i really dont know this stuff. So you need to specify the width because its absolute?

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by petergriffen View Post
    So you need to specify the width because its absolute?
    Unless you want the element’s width to expand with its content like a table, yes. Absolutely positioned elements, like floated elements, are removed from normal document flow and lose the expand-horizontally-to-fill-all-available-space property.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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