oh dear! where do i start? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

lilblackgirl -> oh dear! where do i start? (10/12/2006 16:26:12)

i took the simplest client site i had and recently converted it to pure CSS for layout and everything else. well, now i'm on a CSS only/no tables kick and am attempting to convert a site that's entrenched with tables and i don't know where to begin.

Here's the site: http://www.hospitalreceivables.org/

Here is where i'm getting bound up.

1. The two company logos to the right top (OHA & HealthShare) - do i create a header div, split it into three and float each (the third being the HRS logo)? or cut the div in two, create a single image with the OHA & HS images and then create an image map?

2. Navigation - i assume i can just create it using list styles in block display with some creativity for the headers. Easier said than done.

3. Main content - the background is what's getting me. I know the basic content can just be set up as divs, but is it just defining the bg image and then creating the divs separately for each group of "white boxes"?

And I don't HAVE to do any of this, but i'm trying to challenge myself and i think i'm succeeding in that respect. I'm just asking for some suggestions or shoves in the right direction.

Any help or suggestions would be greatly appreicated!

LBG



womble -> RE: oh dear! where do i start? (10/12/2006 17:40:13)

quote:

ORIGINAL: lilblackgirl
1. The two company logos to the right top (OHA & HealthShare) - do i create a header div, split it into three and float each (the third being the HRS logo)? or cut the div in two, create a single image with the OHA & HS images and then create an image map?

Don't bother with an image map - keep it simple. Float the main image left and the other two right.

quote:

2. Navigation - i assume i can just create it using list styles in block display with some creativity for the headers. Easier said than done.

One of the best places to check out for CSS menus is Listamatic (and Listamatic2) - there's more variations there on styled lists than you can shake a stick at. [;)]

quote:

3. Main content - the background is what's getting me. I know the basic content can just be set up as divs, but is it just defining the bg image and then creating the divs separately for each group of "white boxes"?

Ewwww! The background! Hmmmm....

Yup, set the background image and then set up divs for the content blocks wherever you want them.




lilblackgirl -> RE: oh dear! where do i start? (10/13/2006 8:40:42)

Ok, first question. When floating the images, do i create separate divs for both? I.e., do i need to create a div or can you just float an image?

Yeah, Listmatic was one of the sites i was eyeing for ideas. I just wasn't certain if it would be difficult to do with the way the navigation bar was broken up into sections and the headings were different. But i guess a bit of alteration isn't bad. Which leads to...

the background. [:D] Yeah, i know it's hideous, but the client wanted it and liked it. Yellow pinstriping wasn't my first choice, but it worked for them. So, creating separate divs for each section on each page for the 'articles' is the way to go?

Once i can get the basic layout rebuilt, i'm going to try with some other colors and do away with the yellow, if possible.

thanks for the suggestions, Womble.



Tailslide -> RE: oh dear! where do i start? (10/13/2006 9:25:40)

You don't need different divs to float the images - either give them a specific class and add a float:left or float:right class in your stylesheet (if you have other images that you don't want to float) or refer to them via the div that they're already in so it could be: 

#header img {float:left;}


for instance which is what I'd probably do unless I had other images within the header that I didn't want to float.



jaybee -> RE: oh dear! where do i start? (10/13/2006 9:42:22)

If I have a graphics heavy site, I know there's a likelihood I'll need to have images all over the place so I put

.imgleft {float:left;}
.imgright {float:right;}

in the stylesheet so when I get to an image and want to shift it, it's just a matter of giving it a class of imgleft or imgright.

Tail's example is perfect if you need to shift images only in the header

and

img {float:right;}

will float all images right



lilblackgirl -> RE: oh dear! where do i start? (10/13/2006 10:55:29)

and this is my concern. I've got two images in the top right coner, so if i float:right both of them, won't one cover the other?



womble -> RE: oh dear! where do i start? (10/13/2006 13:04:26)

Nope, they shouldn't do. They'll just float up against each other. I'm trying to think of an example to show you, but it's nearly tea-time so my brain's not functioning right! [:D]

<edit>
Can't find what I was thinking of, but Maxdesign's Floatutorial might help you out. Again not what I was thinking of, but the url=http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm]multiple floats[/url] section of this page show the effect - the boxes spelling out "what" are all floated.</edit>



jaybee -> RE: oh dear! where do i start? (10/13/2006 13:09:39)

They will float next to each other unless the page gets too narrow for them to do so, in which case one will drop below the other. The only way they'll cover each other up is if you specify position and then put two different z-indexes on them.



lilblackgirl -> RE: oh dear! where do i start? (10/16/2006 11:38:21)

I'm not sure why i make this harder than it should be. [&o]

thanks womble and jaybee!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.298828E-02