...

View Full Version : Design help please?



Doctor_Varney
09-23-2010, 01:21 AM
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?

Doctor_Varney
09-23-2010, 02:35 AM
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

_Aerospace_Eng_
09-23-2010, 02:44 AM
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.

Doctor_Varney
09-23-2010, 02:49 AM
Oh great... It uses an IE hack. :rolleyes:

Fed up with this. :mad:

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

_Aerospace_Eng_
09-23-2010, 02:55 AM
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.

Doctor_Varney
09-23-2010, 02:57 AM
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

DrDOS
09-23-2010, 03:05 AM
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/program.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.

aiyahoouu
09-23-2010, 03:25 AM
Tables is the most simple, but is now not recommended use div

:rolleyes:

Lerura
09-23-2010, 06:27 AM
Maybe something like this (http://www.lerura.dk/DVarney/) is what you need!

(.zip (http://www.lerura.dk/DVarney/DVarney.zip))

Doctor_Varney
09-23-2010, 06:58 AM
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...? :confused:


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

Doctor_Varney
09-23-2010, 06:58 AM
Maybe something like this (http://www.lerura.dk/DVarney/) is what you need!

(.zip (http://www.lerura.dk/DVarney/DVarney.zip))

Thanks!

Dr. V

Doctor_Varney
09-23-2010, 10:33 AM
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

DrDOS
09-23-2010, 02:36 PM
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.

teedoff
09-23-2010, 03:39 PM
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!

Apostropartheid
09-23-2010, 06:01 PM
viola inspiration!
I did not know the ability to play a musical instrument came spontaneously...=)

Doctor_Varney
09-23-2010, 06:54 PM
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!

Thanks. I can probably 'live with' that design for a while. I figured with CSS I'd be able to swap those background images, from time to time, to keep it fresh.

Do you think the secondary menu in the black space should be more ordered or more chaotic in it's <li> positioning? I thought I could use "text-indent:" for that.

-----------------------------------------------------------

Astro - you remind me of myself, on another forum (where I'm less well behaved). :D

Dr. V

nicoleploehn
09-23-2010, 10:31 PM
I guess I have a similar situation.

We have a website that is php based and is laid out in tables. I am taking over the project, HATE TABLES, and this one is nested with them so I can't even find what goes where.

I have managed to get most of it moved to CSS with the use of only tables for pure table needs (search results).

On the search results page the height of the page will vary and i have a shading on the left and the shading on the right that i need to run the length of the page.

For example:

http://www.iwantausedride.com/pre-owned.php?task=pre-owned (this is how it is now)

and for the pages that the height doesn't change the new CSS site: http://kuhntest.designgoddessllc.com/index.php has the shading on the left and right.

now my problem is how do i get the CSS to run the length of the page for search results: http://kuhntest.designgoddessllc.com/pre-owned.php?task=pre-owned

Any help you can provide would be most appreciative. Thanks.

_Aerospace_Eng_
09-24-2010, 01:22 AM
Your problem is a bit different and you should have started a new thread rather than hijack this one. You have two options keep your current background images but put your code in two wrappers e.g. wrap1 contains the left shadow as a background image, wrap2 would contain the other. Now you wouldn't have to set a fixed height to the shadows and it would work for any page. You could also do it with one wrapper by combining your images into one wide image but this will take trial and error to determine what width you need.

Doctor_Varney
09-29-2010, 11:20 PM
I did not know the ability to play a musical instrument came spontaneously...=)

Actually it does... in cases of child prodigy. It's well documented.

Dr. V

teedoff
09-30-2010, 02:34 AM
Do you think the secondary menu in the black space should be more ordered or more chaotic in it's <li> positioning? I thought I could use "text-indent:" for that.


Well I think being the nature of your site is what it is, the chaotic look goes well.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum