A Flash Developer Resource Site

Results 1 to 17 of 17

Thread: CSSv2 - open battle

  1. #1
    No I can't do it by tommorow.. 1stbite's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    1,300

    CSSv2 - open battle

    As requested by the clickster:

    Rules:
    1 - Must use supplied XHTML 1.0 strict source page and the only tags that can be added/removed/edited are divs and spans.

    2 - No image restrictions, but keep it reasonable (this would be a judgement call by the participants).

    3 - All images not in the content itself must be added with CSS not with html src element.

    4 - You may create your own CSS style sheet or edit the css style sheet provided.

    5 - State compatible browsers your CSS design is aimed at. ie 'all browsers except MSIE' or 'MSIE only' etc

    6 - No limit amount of entries per member.

    7 - There is no skill level requirement, so entries from all skill levels will be gratefully accepted.

    8 - Please only offer positive and constructive feedback on all submitted entries unless requseted not to give feedback at all (see rule 7).

    9 - If you wish not to have feedback on your entry please state with your submission.

    10 - Have fun...

    Source files provided below in next post as either zip folder or txt:

    LIST OF ENTRIES:
    (please name your entry for the list or we will give it a lame name for you )
    1 - none
    Last edited by 1stbite; 11-15-2004 at 01:50 PM.
    and in a blink of an eye...
    Media and Multimedia Courses in Nottingham - First Diploma | IMedia | HND | Foundation Degrees | BA(Hons) Top Ups.

    Give a Twit a chance!

  2. #2
    No I can't do it by tommorow.. 1stbite's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    1,300

    zip file

    zip file containing xhtml and css files
    Attached Files Attached Files
    and in a blink of an eye...
    Media and Multimedia Courses in Nottingham - First Diploma | IMedia | HND | Foundation Degrees | BA(Hons) Top Ups.

    Give a Twit a chance!

  3. #3
    No I can't do it by tommorow.. 1stbite's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    1,300

    xhtml file as txt

    txt file of xhtml source
    Attached Files Attached Files
    and in a blink of an eye...
    Media and Multimedia Courses in Nottingham - First Diploma | IMedia | HND | Foundation Degrees | BA(Hons) Top Ups.

    Give a Twit a chance!

  4. #4
    No I can't do it by tommorow.. 1stbite's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    1,300

    css file as txt

    txt file of css
    Attached Files Attached Files
    and in a blink of an eye...
    Media and Multimedia Courses in Nottingham - First Diploma | IMedia | HND | Foundation Degrees | BA(Hons) Top Ups.

    Give a Twit a chance!

  5. #5
    Sounds good, thanks for taking the initiative.

    Perhaps add a rule of the sort "State caompatible browsers" as, like me, there may be a few IE haters in the crowd.

  6. #6
    bidibidibidi clicky2's Avatar
    Join Date
    Mar 2004
    Location
    Indianapolis, Indiana
    Posts
    470
    Thanks 1stbite!

    I'll probably work on something over the next few weeks. Any limit to the number of submissions?

  7. #7
    No I can't do it by tommorow.. 1stbite's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    1,300
    ok jasu i added browser compatibility rule good thinking...

    and also added clicky2's idea, no limit to entries i think is ok, think as its open battle no limit should be set, will change if enough objection to any rule added...
    and in a blink of an eye...
    Media and Multimedia Courses in Nottingham - First Diploma | IMedia | HND | Foundation Degrees | BA(Hons) Top Ups.

    Give a Twit a chance!

  8. #8
    Senior Member Vincent26381's Avatar
    Join Date
    Feb 2003
    Location
    The Netherlands
    Posts
    833
    A few questions about the xhtml:

    why the <i> here?

    PHP Code:
    <div class="headlogo"><a href="http://www.flashkit.com/"><i>Flashkit.com</i></a></div
    (why is the logo a class anyway?)

    in the list of links you have "&nbsp;»" in front of any list item, why?

    I *think* you can't order the links the same way as flashkit itself has is, you need the list differently ordened (display:inline) or have classes or id's for each list of links.

    The input field and button is missing in this class. (again it could be an id):
    PHP Code:
    <div class="headNavSearch"
    Why "&nbsp;" here:
    PHP Code:
    <li><a href="http://www.flashkit.com/myfk2/home.php?domain_id=1">movies</a>&nbsp;(0)</li

    (not to argue, just to have a nice clean start of a cool battle.)

    BTW why not restrict the xhtml as it is and only have the option to change the css.

    Vincent
    SWIS BV

    Last edited by Markp.com on 07-23-2003 at 02:25 AM

  9. #9
    If I may,

    Originally posted by Vincent26381
    A few questions about the xhtml:

    why the <i> here?

    PHP Code:
    <div class="headlogo"><a href="http://www.flashkit.com/"><i>Flashkit.com</i></a></div
    (why is the logo a class anyway?)
    In my opinion, the only reason that line was added was because the site had no header (I would have changed <i>...</i> to <h1>...</h1>)

    You should be free to change, add, remove any and all classes and ids, as well as add or remove spans and divs wherever you please. The actual content should stay the same.


    in the list of links you have "&nbsp;»" in front of any list item, why?
    It was part of the content of the original page


    I *think* you can't order the links the same way as flashkit itself has is, you need the list differently ordened (display:inline) or have classes or id's for each list of links.
    ordering of links is the same as in the original page. The display:inline will be your choice as it would be part of the styling, as well as classes or ids.


    The input field and button is missing in this class. (again it could be an id):
    PHP Code:
    <div class="headNavSearch"
    There is none in the original page

    Why "&nbsp;" here:
    PHP Code:
    <li><a href="http://www.flashkit.com/myfk2/home.php?domain_id=1">movies</a>&nbsp;(0)</li
    That will keep it from wrapping, we wouldn't want

    movies
    (0)

    now would we


    BTW why not restrict the xhtml as it is and only have the option to change the css.

    Technically, that is how it will be played out, with the exception of divs, spans, classes and ids, the rest of the XHTML should remain unchanged. So, no adding images in XHTML, only through CSS. No adding other sections, and so on.

  10. #10
    Senior Member Vincent26381's Avatar
    Join Date
    Feb 2003
    Location
    The Netherlands
    Posts
    833
    the only reason that line was added was because the site had no header (I would have changed <i>...</i> to <h1>...</h1>)
    that should be fine.

    ordering of links is the same as in the original page. The display:inline will be your choice as it would be part of the styling, as well as classes or ids.
    display: inline would be in the css. By adding divs, it should be possible to change the lay-out.


    There is none in the original page.
    Sorry, thought that search box was the same as this page.



    That will keep it from wrapping, we wouldn't want

    movies
    (0)

    now would we
    I prefer the css way:
    PHP Code:
    white-spacenowrap 
    (as it's more design than content)


    Technically, that is how it will be played out, with the exception of divs, spans, classes and ids, the rest of the XHTML should remain unchanged. So, no adding images in XHTML, only through CSS. No adding other sections, and so on.

    Thanks!

    I might want to play if I have some time.
    Vincent
    SWIS BV

    Last edited by Markp.com on 07-23-2003 at 02:25 AM

  11. #11
    Junior Member
    Join Date
    Aug 2003
    Posts
    21
    I wrote the base XHTML code (seen here), and I did state that there were a few errors that I didn't have time to correct.

    why the <i> here?
    Note the source files above, the <i> element is merely there to hide all text within the element from CSS capable browsers (I could have used any element, but this was unused). Thus, CSS browsers see the image, non-CSS'ers see the text within the image.

    (why is the logo a class anyway?)
    This, and I believe the other errors you pointed out were already in the original source. I did little HTML editing, aside from making everything XHTML compliant.

  12. #12
    Originally posted by LiquidGuy
    Note the source files above, the <i> element is merely there to hide all text within the element from CSS capable browsers (I could have used any element, but this was unused). Thus, CSS browsers see the image, non-CSS'ers see the text within the image.

    You know, a span is more traditional as it has no effect on the text

  13. #13
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Ok - I was a little bored this afternoon so I thought i'd put something together for this (appologies in advance for the cliché hand on keyboard photo...)

    http://www.moddular.org/fk (css file)

    Browsers Tested (all windows):

    Works in Opera 7.23, 7.54, 7.6p3, Firefox 0.8 (I'd imagine it would work in other more recent versions of FF/mozilla too)

    Very Close: Netscape 7

    Sort of ok: Opera 6.01

    Destroyed by: IE 6, IE 5.5

    xhtml and css

    There are a couple of minor changes in the xhtml - a few divs were removed, and a couple added in different places - there is also an extra span tag.


  14. #14
    Señor member
    Join Date
    Dec 2000
    Location
    Huddersfield, UK
    Posts
    1,819
    cliché indeed but very slick
    Company, Meet Creative
    sign up, help spread the word and win a shuffle.
    ------------------------
    welcomebrand

  15. #15
    No I can't do it by tommorow.. 1stbite's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    1,300
    sweet...

    cliché maybe, but all the same very cool.
    and in a blink of an eye...
    Media and Multimedia Courses in Nottingham - First Diploma | IMedia | HND | Foundation Degrees | BA(Hons) Top Ups.

    Give a Twit a chance!

  16. #16
    It's loverly catbert (nice touch with the access key hints)

  17. #17
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Thanks, CSS can be fun when you don't need to worry about fixing things for internet explorer

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center