Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Discussion in 'Website Design Critique:' started by br3n, Jul 20, 2009.

  1. br3n

    br3n Senior Member

    Spent today giving it a little overhaul, its still what i'd call a temporary design but at least this time I've avoided tables! I realise this is still far from perfect but its an improvement. Gained a little more knowledge of css as well so always a bonus.

    Brendan 'br3n' Patterson - Designer of furniture & graphics

    Any tips on the code side of life would be well recieved - I know the html needs tidying up but at least it validates. Used some additional h1/h2 tags I hope in the correct manner?

  2. Aarlev

    Aarlev Member

    Just a few quick things. I'm sure Harry can give you some more extensive feedback. :)

    Your menu should be a list.

    Like this..

    <ul id="menu">
    <li><a href="#furniture">furniture</a></li>

    You could make your subtitles <h3> instead so you don't have to put <strong></strong tags. You don't really need all the <p> tags around the images either. Just control the images in the CSS instead (img {margin:; padding:; etc..})

    Love the design and user experience. Simple and straight to the point. :up:
  3. glenwheeler

    glenwheeler Senior Member

    Very nice bud, i agree with the previous post though...
  4. br3n

    br3n Senior Member

    Made a few changes (before reading this), added an h3 and moved a few bits around, also forgot a copyright :eek:

    I really.. really dont know anything about code (im learning as I go along) - could you eleborate on the list? as for the images its dreamweaver putting it all in there :S will have a look at some other css' and see what info I can steal!
  5. mrp2049

    mrp2049 Senior Member

  6. Levi

    Levi Moderator Staff Member

    I'm not keen on the background either, 1 its wood and 2 it just looks out of place. I'd try a darker background maybe even a dark (almost black) brushed metal
  7. mrp2049

    mrp2049 Senior Member

    I think the background works fine, but without something behind the work, it doesnt stand out enough for me.
  8. charles

    charles Senior Member

    I quite liked your old site...
  9. br3n

    br3n Senior Member

  10. muzmoz

    muzmoz Junior Member


    I've just completed my first couple of sites without using tables! It took a while to get my head round CSS and I'm still picking up ideas and little bits of code all the time.

    None of the work I've done would have been at all possible without this amazing list of links

    77 Resources to Simplify Your Life as a Web Designer | Vandelay Design Blog

    Maybe you've seen it before, but there are some brilliant menus, layout ideas, code helpers and solutions in general and it seems to have helped me enourmously in understanding code. I think it's just seeing it in a nice clear concise layout.

    Anyway, I think your site looks great. You've got some excellent work which helps!

    Have a look at some of the links to minimalist websites on Vandelay aswell. I'm usually inspired by some of the stuff I see there.
  11. br3n

    br3n Senior Member

    Thx muzmoz will take a look. I dont want to get too into code as its not something I ever want to do, But its strangly intreaguing. (sp?)

    Can anyone help me - if I wanted to centre it all but remain left aligned (same as the old site) how would I go about doing this? ta.


    Also, tried making the headings for each project an h4, but I couldnt get it to be on the same line as the rest of the p. Spoke to a friend who said make it display:inline; but then it went next to the image and not under it - got all confused and changed it back. WIP :)
  12. muzmoz

    muzmoz Junior Member

    I have a couple of straightforward solutions which may or may not work!

    Put <center> directly under the <body> tag. Then, put </center> directly above the </body> tag.


    Somewhere between the <head></head> tags, put:

    <style type="text/css">
    text:centre; [ you'll have to try this bit out!]


    I think you can also use another piece of code in the CSS above, I'm guessing here, it's hard not sitting in front of dreaweaver atm, but try body text align or something like that and see if you get a prompt from DW.

    Hope that helps!
  13. Renniks

    Renniks Senior Member

    in the css sheet
    or on the page in the css
    or if you dont have either of those set up using
    <style type="text/css">


    #blockname { width:definedwidth; margin-left:auto; margin-right:auto }

    where there is a block with a defined width (I assume your central piece will have a defined width, I cant be bothered to check the code :D
  14. Aarlev

    Aarlev Member

  15. br3n

    br3n Senior Member

    Illl have a look through all the links, I dont have a 'wrapper' at the mo? assume thats like a div?

    Also - can anyone tell me why my <hr> is yellow in FF as intended but white in IE8 ?
  16. Aarlev

    Aarlev Member

    Yeah a wrapper is just a DIV containing the rest of your elements.

    A very basic 3 column site could be set up like this for example. (Where the "container" is the wrapper).

    <div id="container">

    <div id="header"></div>
    <ul id="menu"><li></li></ul>
    <div id="content">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
    <div class="clear"></div>



    Then you can float the 3 columns left for example. But this was just to show what the wrapper is.

    <hr> was deprecated in HTML 4.01. You should use the CSS border properties instead.


    border-bottom:2px solid #whatevercolor;

    CSS Border Properties - CSS Basics - Chapter 13
  17. Renniks

    Renniks Senior Member

    <hr> is not deprecated and is a perfectly legitimate way of putting lines in places. Creating divs of certain sizes to have borders for that sake alone is a much worse practise. The deprecated part of hr were it's style properties, and these should be fixed by controlling the <hr> in css styles only. (align, shade etc.)
  18. br3n

    br3n Senior Member

    OK made some changes as suggested, <strong> tags removed and replaced with a span class.
    Also removed the <p> from images and css'ed with display block.

    Had some issues getting my head around not "stacking" the w3c images - was getting lost trying to do it like img.w3c and took a knowledgable friend explaining that

    Progress! centre aligned next! [ DONE! ]
  19. Renniks

    Renniks Senior Member

    Well done on the progress with all the coding. I imagine it makes you happy to progress with this as you have the product you want to make it better, rather than learning code for codes sake.

    I find it odd that someone in web design isn't knowledgable on this stuff but after being here for a while now, lots and lots of designers aren't and dont care as there is so very much to learn in design.
  20. Aarlev

    Aarlev Member

    Sorry, I meant all "presentation attributes" of the hr element were deprecated in HTML 4.01, and are not supported in XHTML 1.0 Strict DTD.

    I've always been taught that presentational markup is never good practice, and that it's better to use borders than <hr>?

    Furthermore according to this article on Sitepoint (scroll down to "horizontal rulez ok"), it looks like you'll have to wrap them in DIV's to get them to act similar cross browser. SitePoint Design View

    Would you have to create any extra DIVS? Could he not just put a class on the P of his intro text and then a border-bottom on that?

    Maybe the resident code gurus Harry and Sunburn can clear this up? :)

    (This was supposed to come after your post, but due to the DF database issues today it showed up in the beginning of the thread so I reposted it here.:))

Share This Page