PDA

View Full Version : First CSS-based site


Interstellar Icon
09-01-2009, 03:45 AM
Hi All,

After much pomp and circumstance, I finally have a site that I'm going to build with CSS from the ground up. Here's a proof of the Index page:

http://i237.photobucket.com/albums/ff183/DesignDude/bluestein_index_v31_proof8-31.jpg

If anyone has any thoughts or ideas that would be helpful in converting this to CSS/HTML, I'd be most appreciative. In particular, I'm interested in any thoughts on how I should create my slices, or anything important I should account for in building with CSS/HTML vs. tables.

Thanks in advance for any input or suggestions. :-D

Sam

DWcourse
09-01-2009, 01:51 PM
Find a good 2-column CSS-based layout online to work from. Your curves and drip-shadows are going to give you a bit of trouble but they are doable. Also make the menu a CSS-based text menu with CSS background images - not image rollovers.

Corrosive
09-01-2009, 02:51 PM
It's a little heavy on the drop shadows for my liking. Used sparingly they can create a good effect. Just my opinion tho.

domedia
09-01-2009, 03:10 PM
The white border around the photos on the left hand side are not anti-aliased, you can see the jagged edges of the curve.

Interstellar Icon
09-01-2009, 11:54 PM
Thanks everyone. I have a couple of questions on your input:

Also make the menu a CSS-based text menu with CSS background images - not image rollovers.

Are you talking about having one image with all of the states, and then moving the start point based on the current state? An example of this would be from the Apple site: http://images.apple.com/global/nav/images/globalnavbg.png

If so, that's what I'm planning on doing. If not, please clarify with some more specifics, if you would.

The white border around the photos on the left hand side are not anti-aliased, you can see the jagged edges of the curve.

I noticed that, as well, but didn't think there was anything I could do about it. I created the borders with the Stroke option in the Layer Style dialog box - I don't see any options there for anti-aliasing. Is there a way that I can anti-alias these borders as they're presently constructed, or is there perhaps another method to create them that would allow for it?

Thanks,
Sam

DWcourse
09-02-2009, 03:50 AM
Actually the way Apple does it it cool.

I meant to avoid things like Dreamweaver's rollover image behavior which uses Javascript to actually replace one image with another.

Interstellar Icon
09-07-2009, 07:54 PM
Hi All,

A quick update: I'm well into my first CSS-based design, and so far things are going pretty smoothly. I've come up against a couple of roadblocks, however, so I'm hoping you may be able to lead me in the right direction.

First, here's the Index page of the site:

http://www.spherenine.com/preview/bluestein/index.html

And here are my challenges:

1. The page displays properly in IE, but not in Firefox. In Firefox, the background image of the mainContent div is between 5-10 px lower than it should be. I've looked at all of the associated margins and padding, and can't find the culprit. Any suggestions?

2. There's a "notch" in the sidebar background image (renders in both IE and Firefox), on the right side between the second and third images. I've confirmed this notch is not a part of the background image or the second and third images themselves. Anyone seen anything like this before, and/or know what I can do to fix it?

Thanks in advance for any input or suggestions. :-D

Sam

Interstellar Icon
10-08-2009, 08:58 PM
Hi All,

I've made some progress on this site since my last post, and the questions I asked in it have been resolved. Now on to the new one... :mrgreen:

First, here's the page: http://www.spherenine.com/preview/bluestein/services.html

Here's the challenge: The 'Back to Top' links take the scroll area back to the top, but they don't take the page itself back to the top. I've put this all together from two different tutorials (one for the scroll region, one for the link functionality), so I'm hoping there's a way to make the two work together. Is it possible to have both return to the top? I actually had it working this way when I first created the functionality - but I only had one <dl> tag surrounding all of the answers, and w3c didn't like that very much. http://images.devshed.com/fds/smilies/wink.gif

Also FYI, the styling for both my XHTML and CSS is messed up right now - I started styling the page before I added the link functionality, which was probably a mistake. I'm putting the styling on the back burner for now, and plan to fix it once the link functionality is working.

Thanks in advance for any input or suggestions. http://images.devshed.com/fds/smilies/smile.gif

Sam

domedia
10-09-2009, 01:13 AM
Did you fix this? Page and back to top works well for me.

DWcourse
10-09-2009, 01:38 AM
I think he means back to top takes you to the top of the div content but, on a small screen, not back to the top of the page.

Interstellar Icon
10-09-2009, 01:38 AM
Hey Ove,

On my monitor, Back to Top scrolls the main content section back to the top, but not the page itself. I actually have two scrollbars on my monitor: One for the main content area, and one for the page in the browser itself. I'm wondering if maybe you have a large monitor, and you only have one scrollbar in the main content area?

Please let me know your thoughts, and thanks. :-D

Sam

Interstellar Icon
10-09-2009, 02:14 AM
I found this in a search: http://msdn.microsoft.com/en-us/library/ms534618%28VS.85%29.aspx

It's JS, which I know almost nothing about, but I'm wondering if it could be used in conjunction with CSS to accomplish the task at hand. It almost seems like I need to have two "commands": One for back to top in the div, and one for back to top for the page.

Don't know if any of this helps, but I figured I'd throw it your way... :)

Sam

coloeagle
10-09-2009, 03:30 AM
Don't need JS :mrgreen:

You need to change the "Top" reference location. As you have it now when you click on the "Back to Top" link you have it taking you to the ul id="top" location and not to the top of the page.
<a href="#top">Back to Top</a>

Change the reference location to the container id;
<a href="#container">Back to Top</a>

Interstellar Icon
10-09-2009, 03:51 AM
Don't need JS :mrgreen:

You need to change the "Top" reference location. As you have it now when you click on the "Back to Top" link you have it taking you to the ul id="top" location and not to the top of the page.
<a href="#top">Back to Top</a>Change the reference location to the container id;
<a href="#container">Back to Top</a>

Thanks coloeagle. Unfortunately, that takes me back to where I started: The page goes back to the top, but the main content div doesn't. I need to somehow set it up so that both go to the top. Please let me know if you have any other ideas... :-D

Thanks,
Sam

domedia
10-09-2009, 12:11 PM
I honestly think this is a limitation of your design. If you had created a regular webpage without trying to make scrollbars inside the page, this would not have been an issue :-/