your opinion on css code

Discussion in 'HTML' started by Fredo Vincentis, Nov 10, 2003.

  1. Hi guys,

    I have been spending quite some time on learning to layout with only css
    rather than tables, but I am not quite sure whether my thinking is going
    down the right lines.

    I was wondering whether you could have a look at a layout I created with css
    and give me some feedback on whether I use the styles and tags efficiently?
    The stylesheet seems pretty long to me and probably a bit confusing, so
    maybe I am doing something wrong.

    The file is at http://www.terra-mia.com/version2/

    Thanks for your opinion!
    Fredo Vincentis, Nov 10, 2003
    #1
    1. Advertising

  2. Fredo Vincentis

    Nico Schuyt Guest

    Fredo Vincentis wrote:
    > I was wondering whether you could have a look at a layout I created
    > with css and give me some feedback on whether I use the styles and
    > tags efficiently? The stylesheet seems pretty long to me and probably
    > a bit confusing, so maybe I am doing something wrong.
    > The file is at http://www.terra-mia.com/version2/


    - The fixed font makes it impossible to scale (view-text size-larger)
    Use em or %
    - The absolute positioning makes is very complex and not flexible.
    See what happens if you resize in Mozilla or Opera
    Use floating div's
    - Use CSS hover instead of javascript for the main menu.
    - No need to repeat the font-family so many times.
    Most elements inherit from body
    - Validate the pages in http://validator.w3.org

    Good luck!
    Nico
    Nico Schuyt, Nov 10, 2003
    #2
    1. Advertising

  3. "Nico Schuyt" <> wrote in message
    news:3faf681f$0$13882$...
    > Fredo Vincentis wrote:
    > > I was wondering whether you could have a look at a layout I created
    > > with css and give me some feedback on whether I use the styles and
    > > tags efficiently? The stylesheet seems pretty long to me and probably
    > > a bit confusing, so maybe I am doing something wrong.
    > > The file is at http://www.terra-mia.com/version2/

    >
    > - The fixed font makes it impossible to scale (view-text size-larger)
    > Use em or %
    > - The absolute positioning makes is very complex and not flexible.
    > See what happens if you resize in Mozilla or Opera
    > Use floating div's


    I had difficulties with floating div's in IE for Mac. Is that just me or did
    others have those problems as well?

    > - Use CSS hover instead of javascript for the main menu.


    Does the hove work for all current browsers? I remember when I first started
    on css it didn't work in NN.

    > - No need to repeat the font-family so many times.
    > Most elements inherit from body
    > - Validate the pages in http://validator.w3.org
    >
    > Good luck!


    Thanks heaps for the comments!
    Fredo Vincentis, Nov 10, 2003
    #3
  4. Fredo Vincentis

    Nico Schuyt Guest

    Fredo Vincentis wrote:
    > "Nico Schuyt" wrote
    >> Fredo Vincentis wrote:


    >>> The file is at http://www.terra-mia.com/version2/


    >> Use floating div's


    > I had difficulties with floating div's in IE for Mac. Is that just me
    > or did others have those problems as well?


    No. I had problems too some time ago. Solved it by adding clear: both; to
    the definition of a specific div box.

    >> - Use CSS hover instead of javascript for the main menu.


    > Does the hove work for all current browsers? I remember when I first
    > started on css it didn't work in NN.


    Well, very old browsers will perhaps not work correctly. Best way to deal
    with that is to suppress CSS completely. The site will look different but be
    good accessible.
    A js solution will not work in about 10-15% (js not installed or enabled)

    > Thanks heaps for the comments!


    My pleasure :)
    Nico
    Nico Schuyt, Nov 10, 2003
    #4
  5. Fredo Vincentis

    Warren Oates Guest

    In article <bonm4i$1hsb$>,
    "Fredo Vincentis" <> wrote:

    :I have been spending quite some time on learning to layout with only css
    :rather than tables, but I am not quite sure whether my thinking is going
    :down the right lines.

    Why? CSS rules apply to tables. I spent some time setting up forms and
    so on using CSS only, someting like:

    <style type="text/css">
    body {margin: 14px;}
    div {font-weight: bold; font-family: verdana, helvetica, sans-serif;
    letter-spacing: 0.1em; font-size: 12px;}
    div.d1 {position: absolute; top: 18; left: 100; }
    div.d2 {padding-top: 4px; height: 14px}
    div.d3 {position: absolute; top: 10; left: 210}
    </style>
    </head>
    <body>

    <form ACTION="ins.php" METHOD=POST>

    <div class="d1">
    <div class="d2"> name:</div>
    <div class="d2"> telephone:</div>
    <div class="d2"> email:</div>
    <div class="d2"> city: </div>

    <div class="d2"> booked: </div>
    <div class="d2"> arriving:</div>
    <div class="d2"> leaving:</div>
    <div class="d2"> how many: </div>
    <div class="d2"> which room: </div>

    <div class="d3">
    <div class="d2"><input type="text" name="name"></div>
    <div class="d2"><input type="text" name="phone"></div>
    <div class="d2"><input type="text" name="email"></div>
    <div class="d2"><input type="text" name="city"></div>
    <div class="d2"><input type="text" name="booked"></div>
    <div class="d2"><input type="text" name="came"> &nbsp; (yyyy-mm-dd)</div>
    <div class="d2"><input type="text" name="went"> &nbsp; (yyyy-mm-dd)</div>

    <div class="d2"><input type="text" name="how_many"></div>
    <div class="d2"><input type="text" name="room"></div>
    <div class="d2"><input type="password" name="pass"></div>
    </div>

    <div>
    <input type=submit name="insert_bb" value="submit" />
    </div>
    <div style="margin-top: 26em;">

    comments:<br />
    <textarea cols=50" rows="10" name="comments">
    </textarea>

    menu:<br />
    <textarea cols=50" rows="10" name="menu">
    </textarea></div>

    </form>
    <form>

    which looks okay and all, but in the end, I've gone back to formatting
    tabular data in tables. I use fixed and absolute positioning for warning
    boxes and menu bars and some design stuff, but tables do what you want
    too.

    (I have never had the courage to submit that code to The Validator)
    --
    Looks like more of Texas to me.
    .... Arizona, where the nights are warm and the roads are straight.
    Warren Oates, Nov 10, 2003
    #5
  6. > which looks okay and all, but in the end, I've gone back to formatting
    > tabular data in tables.


    Which raises the question: Is a form tabular data?

    What are people's thoughts on that? Personally, I wouldn't consider them
    tabular data... because it's a form... But, there are more experienced
    people than me in this newsgroup I'd rather hear from so I'll pass it on to
    you guys/gals.

    Nicko.
    e n | c k m a, Nov 11, 2003
    #6
  7. Fredo Vincentis

    Adrienne Guest

    Gazing into my crystal ball I observed "e n | c k m a" <>
    writing in news:ugYrb.6106$:

    >> which looks okay and all, but in the end, I've gone back to formatting
    >> tabular data in tables.

    >
    > Which raises the question: Is a form tabular data?
    >
    > What are people's thoughts on that? Personally, I wouldn't consider
    > them tabular data... because it's a form... But, there are more
    > experienced people than me in this newsgroup I'd rather hear from so
    > I'll pass it on to you guys/gals.
    >
    > Nicko.
    >
    >
    >


    I used to use tables for forms, and then I discovered that CSS was actually
    easier.

    For example, something like this if the querystring was ?required=name#name

    <%
    dim required
    required = request.querystring("required")
    %>

    #<%=required%> {background-color: #ffe4e1; color: #000;}
    #<%=required%>1 {color:red; background-color:yellow; font-weight:bold}

    <label for="name" id="name1">Name: </label> <input type="text" name="name"
    id="name" value="<%=name%>" />

    When the server parses out the HTML it turns out like this:

    #name {background-color: #ffe4e1; color: #000;}
    #name1 {color: red; background-color:yellow; font-weight:bold}

    <label for="name" id="name1">Name: </label> <input type="text" name="name"
    id="name" value="" />

    Sure, I could probably do that with tables, but ids, CSS and labels sure
    are sweet. What's even nicer is the browser automatically goes to the id
    called name, where the label is nicely highlighted, and the input box is
    also nicely highlighted.

    I usually also like using the fieldset element to separate various parts of
    the form, and the legend element. You can duplicate that with tables, but
    then you have to use a lot of extra markup. Forms=KISS, no tables.

    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
    Adrienne, Nov 11, 2003
    #7
  8. Fredo Vincentis

    Warren Oates Guest

    In article <Xns942FE2B3B4E02arbpenyahoocom@207.115.63.158>,
    Adrienne <> wrote:

    :Sure, I could probably do that with tables, but ids, CSS and labels sure
    :are sweet. What's even nicer is the browser automatically goes to the id
    :called name, where the label is nicely highlighted, and the input box is
    :also nicely highlighted.

    What about positioning?
    --
    Looks like more of Texas to me.
    .... Arizona, where the nights are warm and the roads are straight.
    Warren Oates, Nov 11, 2003
    #8
  9. > What about positioning?

    'float: left' makes positioning fairly easy for forms, I've found.
    e n | c k m a, Nov 11, 2003
    #9
  10. Fredo Vincentis

    Warren Oates Guest

    In article <FE7sb.7065$>,
    "e n | c k m a" <> wrote:

    :'float: left' makes positioning fairly easy for forms, I've found.

    But it doesn't line stuff up neatly. I believe that forms are in fact a
    type of table, and I use tables to format them. I would _never_ use a
    table for page layout (headers, sidebars, like that), but they're
    perfect for forms and fetched data. I spent hours formattting forms and
    stuff I pulled out of a database with CSS, and finally just went back to
    a table. It took less html and less CSS and less brain-strain and it
    looks a whole lot better
    --
    Looks like more of Texas to me.
    .... Arizona, where the nights are warm and the roads are straight.
    Warren Oates, Nov 11, 2003
    #10
  11. Warren Oates wrote:

    > :'float: left' makes positioning fairly easy for forms, I've found.
    >
    > But it doesn't line stuff up neatly.


    It does if you set the width of the label.
    Leif K-Brooks, Nov 11, 2003
    #11
  12. Fredo Vincentis

    Isofarro Guest

    e n | c k m a wrote:

    >> which looks okay and all, but in the end, I've gone back to formatting
    >> tabular data in tables.

    >
    > Which raises the question: Is a form tabular data?
    >
    > What are people's thoughts on that? Personally, I wouldn't consider them
    > tabular data... because it's a form...


    The fundamental question boils down to: is there a two dimensional
    relationship in a form. Two dimensional (or 2.5 dimensional) data is what
    tables are best at describing.

    Looking at forms, I see two lists side by side. One list containing labels
    and one list containing input elements. That is one dimension.

    Now for each input element (or collection of input elements) there is a
    label which really acts as a header/title of the input element/collection.
    So there is a second dimension to the data.

    So IMO, typical forms contain two dimensional data. So tables are a good
    method of describing that structure.


    --
    Iso.
    FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
    Recommended Hosting: http://www.affordablehost.com/
    Web Design Tutorial: http://www.sitepoint.com/article/1010
    Isofarro, Nov 11, 2003
    #12
  13. Fredo Vincentis

    Isofarro Guest

    Leif K-Brooks wrote:

    > Warren Oates wrote:
    >
    >> :'float: left' makes positioning fairly easy for forms, I've found.
    >>
    >> But it doesn't line stuff up neatly.

    >
    > It does if you set the width of the label.


    Labels are inline elements. AIUI widths are not applicable to inline
    elements. So you'd really have to display: block on a label first.


    --
    Iso.
    FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
    Recommended Hosting: http://www.affordablehost.com/
    Web Design Tutorial: http://www.sitepoint.com/article/1010
    Isofarro, Nov 11, 2003
    #13
  14. Fredo Vincentis

    Kris Guest

    In article <>,
    Isofarro <> wrote:

    > > It does if you set the width of the label.

    >
    > Labels are inline elements. AIUI widths are not applicable to inline
    > elements. So you'd really have to display: block on a label first.


    Which unfortunately triggers an old Mozilla bug that still manifests
    itself in Netscape 6 and Camino0.7 and down. The latter is likely to be
    updated with a newer version of the engine, though.

    The result is a dissapearing label, but I had a case in which an entire
    part of the page disappeared.

    --
    Kris
    erlands (nl)
    Kris, Nov 11, 2003
    #14
  15. > The result is a dissapearing label, but I had a case in which an entire
    > part of the page disappeared.


    I had a bug like that and people in this newsgroup told me to use
    class="lbl" to overcome it. At least in NS6.x
    e n | c k m a, Nov 11, 2003
    #15
  16. Toby A Inkster, Nov 12, 2003
    #16
  17. > Others, such as Google's front page, probably aren't.

    what about an "E-Mail Us" page/form?

    Nicko.
    e n | c k m a, Nov 12, 2003
    #17
  18. Fredo Vincentis

    Warren Oates Guest

    In article <>,
    Toby A Inkster <> wrote:

    :Toby A Inkster BSc (Hons) ARCS
    :Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

    Good lord, do you people NEVER check your work on Macs? Try this page on
    OS-9, IE 5.17. (Mozilla works fine, NN 4.8, well, it'll never work
    there, but your forms render so it's useable).

    <ot />
    And please, no "market share" nonsense. There are a lot of Macs and OS-9
    will be around for a long time to come. Macs are more expensive than
    PCs, the people who buy them count for more in their "market share"
    demographic than the people who buy the $399.00 Celery packages. People
    who buy Macs buy the expensive software (Quark, Photoshop, AfterEffects,
    Final Cut, ProTools, hell, Avid ...) to work on their expensive
    machines. You can "prove" anything with statistics, just look at Michael
    Moore.
    --
    Looks like more of Texas to me.
    .... Arizona, where the nights are warm and the roads are straight.
    Warren Oates, Nov 12, 2003
    #18
  19. Warren Oates wrote:

    > In article <>,
    > Toby A Inkster <> wrote:
    >
    >: Toby A Inkster BSc (Hons) ARCS
    >: Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    >
    > Good lord, do you people NEVER check your work on Macs?


    Send me a free Mac and I will. :)

    I put my site up. It's valid. It's semantically sound. If some browsers
    have problems with it, so be it.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Nov 12, 2003
    #19
  20. Toby A Inkster wrote:
    > Warren Oates wrote:
    >
    >
    >>In article <>,
    >> Toby A Inkster <> wrote:
    >>
    >>: Toby A Inkster BSc (Hons) ARCS
    >>: Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    >>
    >>Good lord, do you people NEVER check your work on Macs?

    >
    >
    > Send me a free Mac and I will. :)
    >
    > I put my site up. It's valid. It's semantically sound. If some browsers
    > have problems with it, so be it.


    That's a perfectly valid approach for personal sites like yours. A bit
    more testing is necessary on commercial sites, unfortunately.


    Matthias
    Matthias Gutfeldt, Nov 12, 2003
    #20
    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. mono
    Replies:
    1
    Views:
    328
    David Waz...
    Jul 4, 2003
  2. Ray Dixon [MVP]

    Re: Your opinion about stored procedures

    Ray Dixon [MVP], Jul 25, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    383
    Peter Gossmann
    Jul 26, 2003
  3. Jerry

    Please share your opinion with me.

    Jerry, Aug 3, 2003, in forum: ASP .Net
    Replies:
    4
    Views:
    315
    Rajeev Soni
    Aug 4, 2003
  4. Martin Feuersteiner
    Replies:
    2
    Views:
    1,209
  5. Miguel Dias Moura
    Replies:
    0
    Views:
    376
    Miguel Dias Moura
    Feb 2, 2006
Loading...

Share This Page