Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Design help please?

    Hi, I'm at my wits end. I want to design something eyecatching for my business and after much trial and error, I ended up with this (see attached) which I've spent ages working on, to get visual appeal.

    After weeks of solid coding which ultimately goes 100% wrong (a thousand catch-22's) at every attempt, I've come to the conclusion this just ain't ever gonna work in CSS.

    So its back to the drawing board (AGAIN!!!) for what seems like the hundreth time... Problem is, I'm fresh out of ideas now. I feel like I've exhausted my creative spirit now.

    Would anyone be interested in throwing in suggestions for how I could re-design this, so that it can be practical in HTML/CSS?

    I need it to be fluid (meaning scalable when the window is resized) and I also want it not to break up when the user resizes their text. Designing for this level of flexibility is my biggest challenge. I've had the most trouble trying to get that 'floating' gothic arch to work with relative positioning.

    Any ideas?

    I'm open to completely new design ideas, so it doesn't have to look exactly like this.

    Thanks for looking.

    Dr. V

    Edit: Just had a thought... That design needs three columns, doesn't it? The floating arch is a bad idea, right? Maybe there is hope for this one yet.

    Having said that - what are your opinions of this layout?
    Attached Thumbnails Attached Thumbnails Design help please?-wireframe_003.jpg  
    Last edited by Doctor_Varney; 09-23-2010 at 02:06 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Update:

    Can't float. IE6 won't do floating properly with percentages and neither will it do "position relative". That means fluid layout is out; floats are out, relative positioning is out. What do I have left to work with?

    Tables?

    Images?

    PDF?

    Swedish massage?

    Bucket of cold water?


    Dr. V
    Last edited by Doctor_Varney; 09-23-2010 at 02:47 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Fluid layout is not out. And yes the design will work using semantic html and CSS, notice I said semantic. And no the float isn't out either. You just need to use it properly. Start from scratch. Look at this layout.

    http://bonrouge.com/2c-hf-fluid%28r%29.php

    Put your arched menu in the right column, make your menu position:relative; and use a negative top value or use a negative top margin instead. You can even set a right margin to your right column but make sure your content has a larger enough right margin to over come the width. Don't use percent margins or percent widths, that will cause you trouble. You could even use em for widths and margins but understanding how an EM works can be tricky.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Doctor_Varney (09-23-2010)

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Oh great... It uses an IE hack.

    Fed up with this.

    What ****ing drugs were these guys on when they invented CSS?!
    ----------------------------------------------------------------------

    Thanks anyway. I'll use it... Hacks 'n spacks 'n all... Whatever.
    ----------------------------------------------------------------------

    What do you mean by "semantic"? I know what I mean by it, but what are you saying?

    Dr. V
    Last edited by Doctor_Varney; 09-23-2010 at 02:54 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can't expect to not tweak IE 6 and still get a decent layout. Its not the developers of CSS that were wrong, its the developers of IE6 that didn't get it right. IE6 has issues, a lot of them. Just read www.positioniseverything.net, and you will see that there are a lot of issues that you need "hacks" for. I don't support IE6 too often anymore unless it was requested by the client but fixing IE bugs usually costs more than its worth. A lot of users have since moved on to new IE browsers or even Firefox and Chrome. The people stuck in IE6 won't even care or much less notice that a site doesn't look right or they are with a company who can't update because of budget issues. If all else fails and you still can't do it, hire a professional.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Thank you for your patience, Aerospace. Yeah, I will consider these points.

    It's just that it is too hard. It will go wrong again. I need to come up with a design which doesn't need floats or any of that nonsense. Not every site needs columns, does it? There must be a way of making it look good without all that? I'm going on a hunt for designs that use simplicity and see if I can get inspired.

    Dr. V
    Last edited by Doctor_Varney; 09-23-2010 at 03:04 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,020
    Thanks
    15
    Thanked 239 Times in 239 Posts
    This link was posted on another topic here. It shows how most web pages are laid out today. Even the fancy wordpress ones.

    http://www.westsierrahanoverians.com...html#fortunato

    With a ridged inner part that sits in the middle of the page. The big banner that sits at the top is make of background images. The rest of the page is contained in a div of fixed width.

    And there's a good reason for that plan. You no longer have a choice between a 1024x768 or 800x600 pixel display. The sizes are all over the place. And the pages have more content of fixed size. Imagine the difference between someone looking at a page with 1024x768@75ppi and 1600x100@100ppi, or even 2400x1500@125ppi.

  • #8
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tables is the most simple, but is now not recommended use div


  • #9
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Maybe something like this is what you need!

    (.zip)

  • Users who have thanked Lerura for this post:

    Doctor_Varney (09-23-2010)

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by DrDOS View Post
    The rest of the page is contained in a div of fixed width.
    It's made entirely with tables!

    It shows how most web pages are laid out today. Even the fancy wordpress ones.
    But I thought everyone was using CSS DIV positioning...?

    And there's a good reason for that plan. You no longer have a choice between a 1024x768 or 800x600 pixel display. The sizes are all over the place. And the pages have more content of fixed size. Imagine the difference between someone looking at a page with 1024x768@75ppi and 1600x100@100ppi, or even 2400x1500@125ppi.
    I'm not sure what you mean... how this plan works, considering the variety of sizes. I mean, surely, those background images (and fixed DIV) don't lend themselves to scaling...???

    I like that design... apart from the big colour image stuck there, though I went to the link for the people who designed the WestSierraHanoverians site http://www.pixelgraphixdesign.com/index.html and I like their page a lot better. Now, I could really do something with that idea. It's very simple and straightforward. I'm very fond of the light wood and paper textures that people are using these days.

    What I can't understand is why it uses tables, when this doesn't look be too hard for even me to do with CSS. So are you saying designers are going back to tables now?

    Dr. V
    Last edited by Doctor_Varney; 09-23-2010 at 07:19 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #11
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by lerura View Post
    Maybe something like this is what you need!

    (.zip)
    Thanks!

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #12
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Well, I did get a flash of inspiration after looking at the horse sites. So I had a play around in Photoshop in the early hours of this morning...

    It's got a more modern feel to it and hopefully won't be too hard to code up.

    Dr. V
    Attached Thumbnails Attached Thumbnails Design help please?-wireframe_001.jpg  
    Last edited by Doctor_Varney; 09-23-2010 at 10:37 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #13
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,020
    Thanks
    15
    Thanked 239 Times in 239 Posts
    Darn, you're right, that page is made with tables. Well most of the sites on that plan have at least one big div that contains everything. And the contents are positioned by putting it in various divs that are positioned in some way.

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Well, I did get a flash of inspiration after looking at the horse sites. So I had a play around in Photoshop in the early hours of this morning...

    It's got a more modern feel to it and hopefully won't be too hard to code up.

    Dr. V

    Nice! That does look awesome!. To me, much cleaner look and easy navigation. See, when you get frustrated and feel like giving up, viola inspiration!

  • #15
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by teedoff View Post
    viola inspiration!
    I did not know the ability to play a musical instrument came spontaneously...=)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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