css help

Discussion in 'Technology' started by Phil Mitchell, Apr 18, 2007.

Users Viewing Thread (Users: 0, Guests: 0)

  1. Phil Mitchell

    Phil Mitchell check me a dollar brer?

    Joined:
    May 19, 2005
    Messages:
    8,831
    Likes Received:
    1
    Location:
    Melbourne
    css help

    i want to plonk a few images/coloured rectangles dotted about a web page and use them to display text....they must all have scrollbars as the text may be long

    how do you do it mofos?
  2. 1615634792921.png
  3. Phil Mitchell

    Phil Mitchell check me a dollar brer?

    Joined:
    May 19, 2005
    Messages:
    8,831
    Likes Received:
    1
    Location:
    Melbourne
    is it possible to create a textbox and then give it a background image/colour?

    actually would i just create a normal text box and give it css properties?
  4. trance_fan

    trance_fan Registered User

    Joined:
    Nov 7, 2002
    Messages:
    9,022
    Likes Received:
    0
    hmm can you not just use a layer, give that a background colour, and then add a text box to the layer?

    (by layer i mean a DIV...it's a Layer in Dreamweaver)
  5. Phil Mitchell

    Phil Mitchell check me a dollar brer?

    Joined:
    May 19, 2005
    Messages:
    8,831
    Likes Received:
    1
    Location:
    Melbourne
    will give that a try, cheers UK!
  6. trance_fan

    trance_fan Registered User

    Joined:
    Nov 7, 2002
    Messages:
    9,022
    Likes Received:
    0
    one thing to note, if you need the site to work in IE and Firefox then check the page in both - Firefox interprets some CSS differently (and actually ignores some altogether) to IE, and will sometimes not line the boxes up properly, text will overflow etc.

    You may also see problems with larger text sizes so make sure it's a relative size, not fixed/absolute, so give it a check.

    You could also use tables and then put DIV's within those tables, which may improve matters as far as alignment is concerned.
  7. Jason Bourne

    Jason Bourne Registered User

    Joined:
    Oct 14, 2002
    Messages:
    5,258
    Likes Received:
    0
    Chris is right.

    Use <div> to place your information in and then use CSS rules for alignment..

    Might need to use the positioning rule.. i think that absolute positioning may need to be used in your instance.

    Also specify widths/heights in % as it improves layout in different resolutions..

    I think that Mr Screech is also informing you of the box model hack for IE5/6.. Firefox interprets the box model differently to the way that IE5/6 does.. If you have a 200px box with 10px of padding and a 1px border then firefox will calculate the actual box to be 200+10+1 = 211px wide.. where as IE5/6 will calculate 200-10-1=189px.

    I'll post up the hack for this later if you need it..
  8. trance_fan

    trance_fan Registered User

    Joined:
    Nov 7, 2002
    Messages:
    9,022
    Likes Received:
    0
    do it
  9. Jason Bourne

    Jason Bourne Registered User

    Joined:
    Oct 14, 2002
    Messages:
    5,258
    Likes Received:
    0
    Dead Simple.

    Say you have a sidebar that you wish to style and position with CSS then the code could be like so -

    #sidebar {
    padding: 10px;
    border: 5px solid black;
    width: 200px;
    }

    However IE5/6 would interpret this as meaning the width of the box is actually 170px when you want 200px so u change the value to incorporate the padding and border size and then add the following line at the bottom:

    #sidebar {
    padding: 10px;
    border: 5px solid black;
    width: 230px; /*for IE5/Win */
    width:200px; /* actual value */
    }


    As IE will style upon the first rule but will not overide that.. where as Firefox does overide prior values with later edits.

    There is also another rule - the "Be nice to Opera rule"
    As in some instances Opera fails to generate the correct results from the code, therefore you can add the following to the CSS file:

    html>body #sidebar {
    width: 200px;
    }

    This will not allow your box ( :lol: ) to be rendered and positioned correctly in majority of browsers. :)

Share This Page