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
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    more problems with CSS float

    On my site I am trying to create a conversation, with one person's name styled one way, and the other person's styled another. I made the styles with CSS, but I think I did all my float stuff incorrectly.

    Page in question

    Obviously I don't want all the "me"s and the "manager"s to be nested, any idea how to fix this?

    relevant CSS:

    .manager
    {
    float: left;
    font:bold ;
    font-size: 14px;
    color: #FF6A6A;

    }

    .me
    {
    float: left;
    font: bold;
    font-size: 14px;
    color:#3366FF;

    }

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use clear:left; but you're using div's totally the wrong (semantic) way...

    One of the best methods would be to use <span>'s as they are displayed inline by default.

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed them to span's, but now all the styles aren't being applied to them. I'm assuming I need to change the css file somehow since I changed the div's to span's, but I'm not quick sure what to do.

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't see the change you've made online?

    You can keep the CSS just remove the floats, eg.

    .manager {
    font: bold;
    font-size: 14px;
    color: #FF6A6A;
    }

    .me {
    font: bold;
    font-size: 14px;
    color: #36F;
    }


    Just a note: Font sizes in px won't resize in IE, and (I'm sure you know but) tables should not be used for layout...

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay thanks, I realized that I changed my div starting tags, but I forgot to change my close tags...stupid I know.

    And I didn't know that the font wont resize in IE with px, should I just use % instead?

    And yes I'm quite aware that tables are becoming quite outdated for layouts, I just haven't really had a whole lot of time to really understand exactly how to make a layout purely with CSS. Plus in my web design class we learn basically nothing (literally the teacher asks ME how to do stuff on a regular basis, it's pathetic), so I'm having to learn all this stuff on my own.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well em is probably the best way to define a font size value.

    Feel free to stick around; ask and learn! ...and check out http://www.w3schools.com/

  • #7
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's where I learned HTML 4 years ago, back in 8th grade.

    And I just started actually using CSS this year, so I'm way behind the times!

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hehe well there's quite a good introduction to CSS on w3schools, and many people would also recommend http://www.htmldog.com/ .

    The best method in my opinion to learning CSS is just to practice experimenting with layouts etc (I still do!).

  • #9
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay great, thank you very much Mark, you've been a huge help.

  • #10
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem!


  •  

    Posting Permissions

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