SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking learn baby, LEARN

    Hi there, fellow designers.

    It's now 4 projects ago, since I decided to go tableless and use CSS all the way. The hardest part was beginning from scratch, and then working around all the little browserbugs. But I guess all new things are difficult.

    Anyway, I wanted to share my experience with you, because most postings I found here are problems with combinations of table-design and CSS. Could you do a serious sitedesign with no tables at all?

    So I went out looking for a serious website and set myself the task of redesigning it with only CSS and XHTML. No javascript, no rollover-images, no ghost-images, no tables.

    10 hours later, I got myself 2 templates and 2 stylesheets that looked (almost) exactly like the original, in all standard-compliant (PC) browsers (IE6, NS7, Moz1.3, OP7) . Here and there some differences could be spotted, but overall it turned out to be a nice example to get YOU started also, I think.

    This is not a sitecheck, I have no permission of MediaTemple but this is just an educational example of the powers of CSS. I would appreciate if this thread could be used to rethink this design (the CSS and XHTML) or experiment with your solutions.

    Here it is:
    - original (MT)site
    - redesigned CSSonly templates by Wisbin

    On the redesigned templates you have access to my CSS basic scheme (the rough layout), the 2 templates (splash and section), the original pages and all the CSS involved.

    BTW, they did not validate .. i know.. but that looks worse than it is, there is only 1 problem, I cant fix (for now). I hope to get a solution from your feedback.

    Have Fun and feel free to use this on your own projects (offcourse)!
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Nice work! Your design is a bit larger (IE6/PC) than MediaTemple's though. Are you using pixels or percentages for layout?

  3. #3
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    flexible layout

    thnx.

    I used flexible layout, most of the time. Resize the window and see...
    (I also put the css-files on the submenu to the left of my redesing).

    On the mainwrapper I used min-width:400px and max-width:1000px though. But IE doesn't like that

    cheers!


    PS Have you had any experience with this kind of (total) CSS designing?
    Last edited by wisbin; Jan 13, 2003 at 11:06.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  4. #4
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wisbin,

    This is excellent. Thank you for posting. I'm reworking a site now using the same principles of CSS and this will help me tremendously.

    I resized my browser as you suggested in IE and it looks just as good as the original.

    URAlly

    If a user is using IE 6 and their text is set to large fonts, how do you compensate for the difference though, or how does the user know to resize?

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aye, I too had an experiment like this once. I never finished it, but I re-did the Penny Arcade website. Cut the HTML down by half, and I wasn't even finished.

    Also, my newly launched yet uncomplete site is all CSS/XHTML, has a print media stylesheet, uses proper H1-H6 structure, that sort of thing.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    Aye, I too had an experiment like this once. I never finished it, but I re-did the Penny Arcade website. Cut the HTML down by half, and I wasn't even finished.

    Also, my newly launched yet uncomplete site is all CSS/XHTML, has a print media stylesheet, uses proper H1-H6 structure, that sort of thing.
    Hey Peter, some weeks ago I checked out your old website and I really liked it, and I was thinking if i should implement those IE only fetures like filters to my sites also since IE is now like 90% of all browsers.
    Now in your new site (also very good) i see that you decided to leave those IE only fetures and emphasize on standards. Also the look of your site is now more "standard" than it was before. Why you decided to change direction?

  7. #7
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    Also, my newly launched yet uncomplete site is all CSS/XHTML, has a print media stylesheet, uses proper H1-H6 structure, that sort of thing. [/B]
    Just an FYI, in Mozilla 1.2 on Linux, when I hover over a link in the main navigation bar, the bottom of all of those links gets cut off by a blue bar. Only way to see them again is to reload.

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like a browser glitch to me. I can think of no logical or even half-logical reason that would make that occur.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    S7even, that is a good question.

    The main reason for the change is the motive behind making the site in the first place. My first (now old) site was made because
    1. I needed a site to showcase my work
    2. I wanted something original and unique
    3. I wanted to show-off some of the DHTML fanciness I had learned
    That was pretty much it.

    Now, with my new site, I have a completely different agenda. My new site needed to be
    1. A place where I could send prospective clients to learn about me, the work I do, and my past projects
    2. A portfolio for my work and resume
    3. A place for me to be involved with the web development community (read: News and Developer's corner)
    4. A place where people could contact me
    5. A shining example of the type of work I am capable of
    6. Built with CSS/XHTML to not only prove to myself and prospective clients that I could do it, but give me some much needed experience in this area
    That about clear it up for you?

    P.S. Although I still really enjoy my old site, in retrospect I feel it showcases just as well what I did not know back then as what I did.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    Sounds like a browser glitch to me. I can think of no logical or even half-logical reason that would make that occur.
    Although I'm not sure _why_ this was causing a problem, I downloaded your stylesheets and index page source and played around with it enough to figure out _what_ the problem is.

    If you remove the "position:relative;" statement from the "ul#nav a:link, ul#nav a:visited, ul#nav a:active" block in typo.css, the page works fine under Mozilla. Of course, I'd test it under the major MS Windows browsers before you make that change.

  11. #11
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile thanx a lot

    Originally posted by URAlly before *beetle* took over this thread
    Wisbin,

    This is excellent. Thank you for posting. I'm reworking a site now using the same principles of CSS and this will help me tremendously.

    I resized my browser as you suggested in IE and it looks just as good as the original.

    URAlly

    If a user is using IE 6 and their text is set to large fonts, how do you compensate for the difference though, or how does the user know to resize?
    .. I use the font-size:smaller; a lot, its the best thing if you dont want absolute pixels I guess.

    CHeers..
    Last edited by wisbin; Jan 15, 2003 at 08:58.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  12. #12
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow aye

    Originally posted by beetle
    Aye, I too had an experiment like this once. I never finished it, but I re-did the Penny Arcade website. Cut the HTML down by half, and I wasn't even finished.

    Also, my newly launched yet uncomplete site is all CSS/XHTML, has a print media stylesheet, uses proper H1-H6 structure, that sort of thing.

    Good for you. It's a nice way to learn CSS, although the copyright and trade dress protection staff of those sites will not appreciate it. I will take it offline soon.

    BTW your uncompleted redesign is a bit to flexible, it only works "good" in IE, You have some trouble with the topnav. See this image:
    http://www.ict-id.nl/temp/sitepoint/...eterbailey.gif
    I guess you need some margin/padding-left on the #nav.. good luck.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  13. #13
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks wisbin. As much as I'd like my site to look good on any browser/machine/whatever, I'm not REAL concerned about what it looks like at less than 800x600.

    Is that Opera7? I'll re-check my layout stylesheet, it's been a while since I did any tweaking.

    KillAllDash9
    Thank you as well, I'll test that out.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  14. #14
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wisbin... I got a question for ya!

    In you 2nd navigational panel (Company, Newsroom, ...) how did you get the little image to show on the mouseover!?

    Very well done by the way!

  15. #15
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ok.. here it is..

    But be warned.. it's not valid Xhtml.. because I use the <a> tag OUTSIDE or OVER the <li> and not inside it.. anyway.. it works .. still working on a valid version though..

    the HTML
    Code:
    <ul class="navmain">
      <a href="#" class="menu">
         <li class="inlinenavmain">company </li>
      </a>
       ...
    </ul>
    the CSS
    Code:
    /* the UL and LI declarations */
    
    ul.navmain {
    margin:0px 0px 0px 0px;
    padding:5px 0px 0px 0px;
    font-size:12px;
    font-variant:small-caps;
    font-weight:bold;
    text-align:right;
    color:#FFF;
    }
    
    li.inlinenavmain {
    display:inline; 
    padding:0px 5px;
    margin:0px 5px;
    border-right: 0px dotted #222;
    }
    
    /* the ancor/hover thingies */
    
    a.menu, a.menu:link, a.menu:visited  {
    text-decoration:none;
    color:#FFF;	
    }
    
    a.menu:hover {
    text-decoration:none;
    color:#000;
    background:url(../../images/MT/bullet_arrowFFF.gif) no-repeat left;
    }
    thats about it..
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  16. #16
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you use the <li> anyways? Just so browsers with no CSS support will see your links as a list?

  17. #17
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow yup

    yeah.. thats one of them, and also:

    - I got 3 levels to work with, the UL, the LI and the <a>

    and it feels logical to use LIST items for menu.

    ...and I did try other another strategie, with only the <a>tag (example here) but I wasn't completly satified with that one...

    well.. I guess, there is always something to improve just keep on experimenting I think..

    cheers
    Last edited by wisbin; Jan 17, 2003 at 14:55.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  18. #18
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: ok.. here it is..

    I've not really looked at your code, but from the quotes of your code, try this:

    Code:
    <ul class="navmain">
      <li class="inlinenavmain"><a href="#" class="menu">company</a> </li>
    ...
    </ul>
    CSS:
    Code:
    /* the UL and LI declarations */
    
    ul.navmain {
    margin:0px 0px 0px 0px;
    padding:5px 0px 0px 0px;
    font-size:12px;
    font-variant:small-caps;
    font-weight:bold;
    text-align:right;
    color:#FFF;
    }
    
    li.inlinenavmain {
    display:inline; 
    padding:0px;
    margin:0px;
    }
    
    /* the ancor/hover thingies */
    
    a.menu {
    display: block;
    padding:0px 5px;
    margin:0px 5px;
    border-right: 0px dotted #222;
    }
    
    a.menu, a.menu:link, a.menu:visited  {
    text-decoration:none;
    color:#FFF;	
    }
    
    a.menu:hover {
    text-decoration:none;
    color:#000;
    background:url(../../images/MT/bullet_arrowFFF.gif) no-repeat left;
    }
    Just some quick code, totally untested in anything apart from my head

    (what is the 0px border for again?)

    Douglas
    Hello World

  19. #19
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking ok

    I will test your suggestion soon! thnx for putting your head in this.

    the 0 border? I tend to leave some border declarations in but putting them "off" while designing, hence the 0px someplaces.. and the fact that I am very lazy and too excited, thats a deadly combination...(or was it a trick question
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  20. #20
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Good article on manipulating unordered lists:
    http://www.alistapart.com/stories/taminglists/

  21. #21
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy nope ..

    thats not working, DougBTX.

    And the article was read.

    Still I dont get it right. Well it is ok now, but not in valid XHTML.

    I want this effect to work with the <a> inside the <li>, but I cant seem to get it work with the bg-image on hovering the <a>. Even if I concentrate on the padding and margin. It just doesn't work. I'm not sure if it is possible. All examples I see change the bg-color, not showing an image.

    Maybee, I'll see the light soon.. thnx for the replies and any more help, examples, tips ... much appreciated!

    cheers
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  22. #22
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking got it

    http://www.sitepointforums.com/showt...threadid=93278

    this example uses a unorderd LIST for menus, with a hover on the inside <a>-tag, so it validates now.

    ...still.. on hover, the background of the <a>-box is not completely stretched to rightborder of the containing LI-element.

    there is always something to improve

    .. duno how (yet)

    cheers!
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..



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
  •