View Full Version : Would like to use CSS for my site

03-05-2005, 12:10 PM
Hi, as i mentioned earlier, i'd like to use some CSS on my site. At least for text styling and positioning.

I gave it a shot awhile ago, but i was told that it was so bad, i gave up. Something about my code not being symantic or something. I couldn't believe how rude some people were when i asked for help.(not this forum). I've helped people alot with questions regarding photoshop, but i've never thought less of them because they were new to the program. Anyways........

I went ahead and did my site with tables, etc. It's not done, but getting close. Here's a link to it. My Webpage ('http://www.leopardsbaseball.com/site5.htm')

And here's a link to a gif of the layout i'd like to use to start implementing CSS. It's incomplete as well, but it gives a good idea of how i would like to use CSS.

new layout ('http://www.leopardsbaseball.com/testimage.gif')

I'd like to style and position text in the content boxes, and next to the kids pics as links to the galleries. On the right side there will be a few photos that can be clicked on to view larger versions. The empty space in the center of the page and on the bottom right will be for text, links, etc.

I'd like to add and position the images as well, but not sure if this can be accomplished with CSS.

I thought i could just use the whole bg image as a whole instead of piecing it together. This seems like it would be the easier approach at first until i learn a little more.

A few things that concern me would be with the text in css. What if someone uses larger fonts, and their text extends out of the content boxes, etc.

That's one reason that i will sometimes make my text part of my graphic, so that i know this wont happen.

Thanks in advance for any help/input.


03-06-2005, 03:11 PM
Yes the whole thing can be done in CSS, but it won't be easy.

1. create a wrapper div to keep your page centered in all browsers
inside your wrapper put your background image of the two-color blue image and give it a zindex of 1
Everything below goes inside your wrapper div with a zindex of 2
2. create a header div for your logo the exact size of your logo graphic.
3. create left nav div for your photos and links with float left, left margin 5 px (to see the underlying background as a left border) width appx 100 px (or whatever you need to get the thumbnails and text in), right border with 1 px solid line.
3. create your main content div for all your basic content, left margin 5, right margin 5
4. inside your main content div create a div to hold your graphics/text pullouts
give them a float left or right depending on where you want them.
(Use relative positioning to move them up or down inside your main content div)
5. create a footer div to put in your copyright info etc.

By using floats inside your main content area, the text of your content will always flow around your graphics no matter if usrs resize their text size or not.

I hope you get the idea of how to use CSS on this site, but it will take a bit of studying to understand the use of floats, and relative positioning.


03-09-2005, 11:20 AM
Thanks Mike,

Would i be able to use this image as my bg? It's not finished, but close.

bg image ('http://www.leopardsbaseball.com/test.gif')

What i'm asking is could i just incorporate all of this in the bg? Then i could just position my text and a few photos using css. Or would that make things more difficult?


03-09-2005, 09:05 PM
You can but.....

By using the whole image as a background the only users who see your site the way you intend it, is those using a browser screen size set to the same size as the size you use to design it.

You are much better off splitting up your page into DIV's and positioning them with CSS
Then you have complete control of the page layout no matter what browser screen size your visitors are using.

Take a look at:
First Call Help ('http://www.firstcallhelp.com')
It uses the same type of CSS layout I am talking about.