CSS Newbie

Discussion in 'HTML' started by Bastard, Apr 16, 2006.

  1. Bastard

    Bastard Guest

    Well I'm finally ditching tables and moving on to CSS layouts for my
    sites.... yes I know I'm a latecomer!

    I'm having a few problems getting my head around it at the moment and would
    really value some help.

    I've been using CSS Layout generators to set up the basics of my site, my
    theory being that I can pick their code apart and learn what's going on.

    I've created a site that I want to carry on with except I have no deciced
    that I want to add a left hand column. Simple! Oh so I thought......

    I'm currently staring at the site I am in the middle of and a pregenerated
    site with a LH column. I CANNOT work out the difference between the code at
    all, I'm flicking between their respective HTML and CSS files and just not
    seeing it!

    Maybe it's the time of night but I'm starting to get frustrated, if anyone
    can help me I'd be terribly grateful,

    Site with column to be added: http://www.tastymota.com/dfa/test1/test.html
    Generated site with column: http://www.tastymota.com/dfa/test3/test.html

    Many thanks,

    Me!

    PLEASE HELP ME AGHH! I just spent another half an hour starting at since I
    started writing this!
    Bastard, Apr 16, 2006
    #1
    1. Advertising

  2. Bastard

    Martin Jay Guest

    In message <444183c9$0$27481$>, Bastard
    <> writes
    >I've been using CSS Layout generators to set up the basics of my site, my
    >theory being that I can pick their code apart and learn what's going on.
    >
    >I've created a site that I want to carry on with except I have no deciced
    >that I want to add a left hand column. Simple! Oh so I thought......
    >
    >I'm currently staring at the site I am in the middle of and a pregenerated
    >site with a LH column. I CANNOT work out the difference between the code at
    >all, I'm flicking between their respective HTML and CSS files and just not
    >seeing it!
    >
    >Maybe it's the time of night but I'm starting to get frustrated, if anyone
    >can help me I'd be terribly grateful,
    >
    >Site with column to be added: http://www.tastymota.com/dfa/test1/test.html
    >Generated site with column: http://www.tastymota.com/dfa/test3/test.html


    There are several differences between the .css files.

    <http://www.tastymota.com/dfa/test1/css.css> and
    <http://www.tastymota.com/dfa/test3/test.css>.

    It just goes to show how tinkering with style sheets can change the way
    a page looks. Note how the left column on the page
    <http://www.tastymota.com/dfa/test1/test.html> is at the bottom of the
    page.

    I suggest you use Firefox <http://www.mozilla.com/firefox/> and its DOM
    Inspector plug-in to help you find out what's where and why.

    Another tip, especially useful if you're using Internet Explorer, is to
    give elements a background colour or border to highlight them.
    --
    Martin Jay
    Martin Jay, Apr 16, 2006
    #2
    1. Advertising

  3. Bastard

    Bastard Guest

    "Martin Jay" <> wrote in message
    news:...
    > In message <444183c9$0$27481$>, Bastard
    > <> writes
    >>I've been using CSS Layout generators to set up the basics of my site, my
    >>theory being that I can pick their code apart and learn what's going on.
    >>
    >>I've created a site that I want to carry on with except I have no deciced
    >>that I want to add a left hand column. Simple! Oh so I thought......
    >>
    >>I'm currently staring at the site I am in the middle of and a pregenerated
    >>site with a LH column. I CANNOT work out the difference between the code
    >>at
    >>all, I'm flicking between their respective HTML and CSS files and just not
    >>seeing it!
    >>
    >>Maybe it's the time of night but I'm starting to get frustrated, if anyone
    >>can help me I'd be terribly grateful,
    >>
    >>Site with column to be added: http://www.tastymota.com/dfa/test1/test.html
    >>Generated site with column: http://www.tastymota.com/dfa/test3/test.html

    >
    > There are several differences between the .css files.
    >
    > <http://www.tastymota.com/dfa/test1/css.css> and
    > <http://www.tastymota.com/dfa/test3/test.css>.
    >
    > It just goes to show how tinkering with style sheets can change the way a
    > page looks. Note how the left column on the page
    > <http://www.tastymota.com/dfa/test1/test.html> is at the bottom of the
    > page.
    >
    > I suggest you use Firefox <http://www.mozilla.com/firefox/> and its DOM
    > Inspector plug-in to help you find out what's where and why.
    >
    > Another tip, especially useful if you're using Internet Explorer, is to
    > give elements a background colour or border to highlight them.
    > --
    > Martin Jay



    DOM is a well kept secret! I had to hunt around for it and then reinstall
    Firefox to get it, it's very handy though thank you for telling me about
    that.

    So my problem is in the CSS files? I can ignore the HTML? I've just lost
    another 2 hours of my life picking and poking with nothing to show for it.

    As I'm just learning CSS I'm still learning all the tags. By the way, when
    you say elements are these things like "footer, header, etc?"

    I'm not looking for the answer but a shove in the right direction would help
    prevent me going grey/bald!

    Many thanks for your help again
    Bastard, Apr 16, 2006
    #3
  4. Bastard

    Toby Inkster Guest

    Bastard wrote:

    > As I'm just learning CSS I'm still learning all the tags. By the way, when
    > you say elements are these things like "footer, header, etc?"


    An element, in short, is something that begins with:

    <something>

    and ends with:

    </something>

    For example, this is a P element:

    <p>Lala <b>lala</b> la.</p>

    and it contains some text, and a B element.

    (The matter is confused somewhat by the fact that some elements (e.g.
    <hr>) don't have/need an closing tag, and some have an optional opening
    tag too!)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./dexter_freebish/tripped_into_divine/08_wild_things.ogg
    Toby Inkster, Apr 16, 2006
    #4
  5. Bastard

    Bastard Guest

    "Toby Inkster" <> wrote in message
    news:5n.co.uk...
    > Bastard wrote:
    >
    >> As I'm just learning CSS I'm still learning all the tags. By the way,
    >> when
    >> you say elements are these things like "footer, header, etc?"

    >
    > An element, in short, is something that begins with:
    >
    > <something>
    >
    > and ends with:
    >
    > </something>
    >
    > For example, this is a P element:
    >
    > <p>Lala <b>lala</b> la.</p>
    >
    > and it contains some text, and a B element.
    >
    > (The matter is confused somewhat by the fact that some elements (e.g.
    > <hr>) don't have/need an closing tag, and some have an optional opening
    > tag too!)
    >
    > --
    > Toby A Inkster BSc (Hons) ARCS
    > Contact Me ~ http://tobyinkster.co.uk/contact
    > Now Playing ~ ./dexter_freebish/tripped_into_divine/08_wild_things.ogg


    Ah ha! Fantastic! Thank you very much....

    Is <b> being replaced by <strong> ?
    I seem to know little bits here and there but filling in these blanks is
    really helping thank you.
    Bastard, Apr 16, 2006
    #5
  6. Barbara de Zoete, Apr 16, 2006
    #6
  7. Bastard

    Martin Jay Guest

    In message <44421e85$0$27445$>, Bastard
    <> writes
    >So my problem is in the CSS files? I can ignore the HTML? I've just lost
    >another 2 hours of my life picking and poking with nothing to show for it.


    It's not a wasted two hours. Remember all the things you've learned. :)

    >As I'm just learning CSS I'm still learning all the tags. By the way, when
    >you say elements are these things like "footer, header, etc?"


    Yes. Something like:

    ..footer{
    border: 1px Red Solid;
    }

    or

    ..Header{
    background-color: Red;
    }

    You can also do the same with HTML tags. For example:

    p{
    border: 1px Red Solid;
    }

    >I'm not looking for the answer but a shove in the right direction would help
    >prevent me going grey/bald!


    It's all down to a small keyboard mistake: look at #maincol in the
    stylesheet. It appears that you've accidentally deleted the width.

    width:;

    instead of

    width: 500px;

    or whatever you want.
    --
    Martin Jay
    Martin Jay, Apr 16, 2006
    #7
  8. On Sun, 16 Apr 2006 14:58:54 +0200, Martin Jay <>
    wrote:

    >> As I'm just learning CSS I'm still learning all the tags. By the way,
    >> when
    >> you say elements are these things like "footer, header, etc?"

    >
    > Yes. Something like:
    >
    > .footer{
    > border: 1px Red Solid;
    > }


    [ ... ]

    > You can also do the same with HTML tags. For example:
    >
    > p{
    > border: 1px Red Solid;
    > }
    >


    You're confusing elements with which you markup a page, and selectors you
    use in your stylesheets. [.footer] Is a selector. A class selector to be
    more specific, as #footer would be a selector for an id. p Is just a
    selector, in this case to make the styles applicable on all parageraph
    elements in a html page. Those paragraph elements you mark up with tags
    like <p>In here you can put the text for a paragraph.</p>.

    Selectors, elements, tags. Different things and because creating pages and
    layout quite technical, it is a good thing to use these names correctly.


    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Barbara de Zoete, Apr 16, 2006
    #8
  9. Bastard

    Toby Inkster Guest

    Bastard wrote:

    > Is <b> being replaced by <strong> ?


    B and STRONG are two different elements.

    The B element makes an element bold. The STRONG element emphasises it
    strongly -- it's up to the browser how it should do this. Many browsers do
    this by using bold text, but some use, for example, a different colour.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./rolling_stones/get_off_my_cloud.ogg
    Toby Inkster, Apr 16, 2006
    #9
  10. Bastard

    Bastard Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:p.s73px0ztl8uz2z@zoete_b...
    > On Sun, 16 Apr 2006 14:46:09 +0200, Bastard <>
    > wrote:
    >
    >> Is <b> being replaced by <strong> ?

    >
    > Only if the element needs strong emphasis.
    >
    >
    > --


    Is B not bold and Strong also bold? Sorry, Google is my friend!
    Bastard, Apr 16, 2006
    #10
  11. Bastard

    Bastard Guest

    "Martin Jay" <> wrote in message
    news:...
    > In message <44421e85$0$27445$>, Bastard
    > <> writes
    >>So my problem is in the CSS files? I can ignore the HTML? I've just lost
    >>another 2 hours of my life picking and poking with nothing to show for it.

    >
    > It's not a wasted two hours. Remember all the things you've learned. :)
    >
    >>As I'm just learning CSS I'm still learning all the tags. By the way, when
    >>you say elements are these things like "footer, header, etc?"

    >
    > Yes. Something like:
    >
    > .footer{
    > border: 1px Red Solid;
    > }
    >
    > or
    >
    > .Header{
    > background-color: Red;
    > }
    >
    > You can also do the same with HTML tags. For example:
    >
    > p{
    > border: 1px Red Solid;
    > }
    >
    >>I'm not looking for the answer but a shove in the right direction would
    >>help
    >>prevent me going grey/bald!

    >
    > It's all down to a small keyboard mistake: look at #maincol in the
    > stylesheet. It appears that you've accidentally deleted the width.
    >
    > width:;
    >
    > instead of
    >
    > width: 500px;
    >
    > or whatever you want.
    > --
    > Martin Jay



    I LOVE YOU!!! x x x x

    Ok one final thing!

    If page width is 700
    And left column is 100 and main column is 600 why does it not work?! Is it
    something to do with my padding? I thought this ocurred INSIDE an
    'element?'.

    It would be nice if the left column was equal to the height of the main
    column - which will obviously grow and shrink according to content - it's
    not as simple as setting left column's height to 100% is it?

    Thank you so much for your help, I was considering making my way back to
    tables for a while back there!
    Bastard, Apr 16, 2006
    #11
  12. On Sun, 16 Apr 2006 15:26:40 +0200, Bastard <>
    wrote:

    > "Barbara de Zoete" <> wrote in message
    > news:eek:p.s73px0ztl8uz2z@zoete_b...
    >
    >> On Sun, 16 Apr 2006 14:46:09 +0200, Bastard <>
    >> wrote:
    >>
    >>> Is <b> being replaced by <strong> ?

    >>
    >> Only if the element needs strong emphasis.

    >
    > Is B not bold and Strong also bold? Sorry, Google is my friend!


    And how, do you imagine, does bold sound in an aural browser for example?
    And how does strong emphasis possibly sound?

    Use Google with caution.


    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Barbara de Zoete, Apr 16, 2006
    #12
  13. On Sun, 16 Apr 2006 15:28:40 +0200, Bastard <>
    wrote:

    > It would be nice if the left column was equal to the height of the main
    > column - which will obviously grow and shrink according to content - it's
    > not as simple as setting left column's height to 100% is it?


    Since you declare google to be your friend, go Google for 'Two column
    layout'


    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Barbara de Zoete, Apr 16, 2006
    #13
  14. Bastard

    Martin Jay Guest

    In message <op.s73qmzcsl8uz2z@zoete_b>, Barbara de Zoete
    <> writes
    >On Sun, 16 Apr 2006 14:58:54 +0200, Martin Jay
    ><> wrote:


    >>> As I'm just learning CSS I'm still learning all the tags. By the
    >>>way, when
    >>> you say elements are these things like "footer, header, etc?"

    >>
    >> Yes. Something like:
    >>
    >> .footer{
    >> border: 1px Red Solid;
    >> }

    >
    >[ ... ]
    >
    >> You can also do the same with HTML tags. For example:
    >>
    >> p{
    >> border: 1px Red Solid;
    >> }


    >You're confusing elements with which you markup a page, and selectors
    >you use in your stylesheets. [.footer] Is a selector. A class selector
    >to be more specific, as #footer would be a selector for an id. p Is
    >just a selector, in this case to make the styles applicable on all
    >parageraph elements in a html page. Those paragraph elements you mark
    >up with tags like <p>In here you can put the text for a paragraph.</p>.


    >Selectors, elements, tags. Different things and because creating pages
    >and layout quite technical, it is a good thing to use these names
    >correctly.


    Thank you for your concise explanation. As I was typing I thought
    someone might pick me up on it, especially as this is alt.html. :)
    --
    Martin Jay
    Martin Jay, Apr 16, 2006
    #14
  15. Bastard

    Bastard Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:p.s73r2pjel8uz2z@zoete_b...
    > On Sun, 16 Apr 2006 15:28:40 +0200, Bastard <>
    > wrote:
    >
    >> It would be nice if the left column was equal to the height of the main
    >> column - which will obviously grow and shrink according to content - it's
    >> not as simple as setting left column's height to 100% is it?

    >
    > Since you declare google to be your friend, go Google for 'Two column
    > layout'
    >


    Sorry I can't decide if you've currently developed an attitude?

    I am using search engines as well as this newgsgroup, if I solve my problem
    before I hear a reply I will let you all know!

    Thanks
    Bastard, Apr 16, 2006
    #15
  16. On Sun, 16 Apr 2006 15:58:22 +0200, Bastard <>
    wrote:
    > "Barbara de Zoete" <> wrote in message
    > news:eek:p.s73r2pjel8uz2z@zoete_b...
    >
    >> On Sun, 16 Apr 2006 15:28:40 +0200, Bastard <>
    >> wrote:
    >>
    >>> It would be nice if the left column was equal to the height of the main
    >>> column

    >>
    >> Since you declare google to be your friend, go Google for 'Two column
    >> layout'

    >
    > Sorry I can't decide if you've currently developed an attitude?
    >
    > I am using search engines as well as this newgsgroup,


    I was giving an answer. This two column with equal height question gets
    asked about 42 times a year. And that is in this newsgroup alone. Add the
    ciwa* groups to that and it easily doubles.
    If you search Google Groups for two column layout you'll get good answers
    on the 'how to' questions you could have on that subject.



    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Barbara de Zoete, Apr 16, 2006
    #16
  17. Bastard

    Martin Jay Guest

    In message <4442468b$0$27450$>, Bastard
    <> writes
    >I LOVE YOU!!! x x x x


    Gosh! :)

    >Ok one final thing!


    >If page width is 700
    >And left column is 100 and main column is 600 why does it not work?! Is it
    >something to do with my padding? I thought this ocurred INSIDE an
    >'element?'.


    Yes, it probably is the padding. Padding and border width will increase
    the element's size when it's displayed. So,

    ..left
    {
    width: 100px;
    padding: 10px;
    }

    Would have a total width of 120px on-screen. 100px, plus 10px left and
    right.

    Just to confuse things, it's the opposite way around in versions of
    Internet Explorer for Windows prior to Internet Explorer 6 (and IE6 in
    "quirks mode.") :(

    >It would be nice if the left column was equal to the height of the main
    >column - which will obviously grow and shrink according to content - it's
    >not as simple as setting left column's height to 100% is it?


    Try adding "background-color: #506066;" to #pagewidth in the css.
    --
    Martin Jay
    Martin Jay, Apr 16, 2006
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    699
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    452
    Jukka K. Korpela
    Sep 9, 2003
  3. Joshua Beall
    Replies:
    1
    Views:
    414
    Bertilo Wennergren
    Dec 10, 2003
  4. Noozer
    Replies:
    10
    Views:
    2,039
    Mitja
    Oct 13, 2004
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,272
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page