SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Thread: Two Colours

Hybrid View

  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Colours

    Hiya,

    Using CSS, how do I make whats in the pictures, found at the following URL?:

    Also, How do I add rounded corners, using images?

    http://www.freewebs.com/ticstacs/Two%20Colours.bmp

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Using CSS, how do I make whats in the pictures, found at the following URL?:
    It depends on what you are wanting to use it for - My guess is that you are wanting to use it as a background and place text over the top. If this is the case just use it as a background image on an element.

    without images - it's just 2 block level elements with background colors.

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Colours

    How do you do I without using images, using two divs instead?

    TicTac

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    That's a very easy question, maybe you need to pick up a good book to work through - I find starting out with a good book helps me pick up a topic like CSS much more easily. Bulletproof Web Design - by Dan Cederholm is excellent.
    Code:
    .light {
      height: 13px;
      background: #A8CC46;
    }
    .dark {
      height: 13px;
      background: #9EC631;
    }
    Code:
    <div class="light"></div>
    <div class="dark"></div>

  5. #5
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not easy.
    How do I get the two divs to be 5px in height?

    TicTac

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's easy if you understand CSS. As Mark has said, this is something quite easy within CSS so try picking up a book however, the solution for this is:

    Just change the height from 13px to 5px.

    However, IE6 and below has a little bug and won't display a box smaller than it's base font so you'll need to reset those to zero.

    Use Mark's HTML above and change the CSS to:

    Code:
    .light {
      height: 5px;
      background: #A8CC46;
      font-size: 0;
    }
    .dark {
      height: 5px;
      background: #9EC631;
      font-size: 0;
    }

  7. #7
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Colours

    How do I add rounded corner images to the four corners of the two divs joined together?

    TicTac

  8. #8
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You use google.

    There are lots of sites that will show you. Just search.

  9. #9
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do I search for?

    TicTac

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you never used google? try searching for something like

    rounded corners css

    there's loads of different methods. I personally create a top and bottom div and then float a div left and right with a background image in each but there are other ways.

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  12. #12
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I come up with the following way of doing it, how come all but the top-left corner doesn't line up under FireFox (FF)?, but does in Internet Explorer (IE)?

    http://www.freewebs.com/ticstacs/Corners/Index.html

    TicTac

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Presumably because you're using an incomplete doctype and therefore IE is rendering in quirks mode which is baaaad!!

    Have a read of this.

    http://www.alistapart.com/articles/doctype/

  14. #14
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which "DocType" should I use? Strict?

    TicTac

  15. #15
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you've got full control over the code then I'd always use strict html4.01

    There are times when you may be using a content management system where the source code isn't entirely in your control and under these circumstances I may use the transitional html doctype.

    note: this won't fix the problem in firefox but it will make IE behave more like Firefox so you'll have an easier time correcting any problems

  16. #16
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where do I get the "strict html4.01" DocType from?

    TicTac

  17. #17
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link that I mentioned above

    Here's the strict html 4.01 doctype

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  18. #18
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Now works in both browsers.
    Cheers Mate!

    TicTac

  19. #19
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Upon a user putting their mouse over the 2 coloured divs, how do I change the colours of the divs?

    TicTac

  20. #20
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if this sounds harsh but you really need to learn how to use google or invest in buying a book that teaches you the basics of HTML and CSS that you can work through.

    Here's an example that I found through google though

    http://www.smileycat.com/miaow/archi...lock-hover.php

    I would suggest buying a book though or trying to put your own site together and come for advice when you get stuck

  21. #21
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Or start using a little free Editor, my first one in 1996 ? was Hotdog

  22. #22
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Colours

    CSSWIZ,

    How come the images don't nest inside the "Light" div?

    HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="Index.css" />
    </head>
    
    <body>
    <div class="light">
    <img class="Corner_TL" src="Corner_TL.bmp">
    <img class="Corner_TR" src="Corner_TR.bmp">
    </div>
    <div class="dark"></div>
    </body>
    </html>
    CSS:

    Code:
    .light
    {
      width: 57px;
      height: 15px;
      background: RGB(150,195,26);
      font-size: 0;
    }
    .dark
    {
      width: 57px;
      height: 13px;
      background: RGB(138,188,0);
      font-size: 0;
    }
    
    .Corner_TL
    {
      TOP: 0px;
      LEFT: 0px;
      POSITION: absolute;
    }
    
    .Corner_TR
    {
      TOP: 0px;
      LEFT: 100px;
      POSITION: absolute;
    }
    TicTac

  23. #23
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    because position absolutes are related to a starting point (left top) of the screen, a position relative can move that starting point , so something probably needs a position relative

    PS Looks to me your on a crash course HTML Editing , rounded corner boxes are not exactly the first thing to start with

  24. #24
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS Looks to me your on a crash course HTML Editing , rounded corner boxes are not exactly the first thing to start with
    What do you mean?

    TicTac

  25. #25
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He means that you're starting with some complex methods but don't understand the basics. Take things one step at a time, if you don't understand what position absolute and relative are for then you shouldn't be using them


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
  •