• I want to thank all the members that have upgraded your accounts. I truly appreciate your support of the site monetarily. Supporting the site keeps this site up and running as a lot of work daily goes on behind the scenes. Click to Support Signs101 ...

Your input on my new site layout

choucove

choucove

New Member
I am currently taking a website design course and part of my class project is to develop a website from the ground up. I'm trying to get two tasks done at once by using this opportunity to rebuild the website for my own computer business, Cumulus Computers. My new page layout can be viewed at this place. While I don't have any real content put on the pages yet, and only have a single static image placeholder right now for the page content as well, what I'm really hoping to get some feedback on is the general layout and design. I'm using some div tags and tables to accomplish all of this, so I know it will look a little different from browser to browser.

Thank you in advance for all of your input and your help!
 
S

stephenj148

New Member
not a huge deal, but it is not centered in my browser (google chrome) I understand the reasoning behind the clouds, but I'm not sure how I like the background image of the clouds.

Nothing really shows me that this is a computer website either. I think it would help if maybe you had some sort of computer images or digital looking designs on there.

Sorry if that was too harsh...just my honest opinion.
 
G-Artist

G-Artist

New Member
That's almost like using frames. I understand there is a new circle in hell for Website builders who use frames.
 
Fred Weiss

Fred Weiss

Merchant Member
You have some differences between IE8 and FireFox that you should run down. In FireFox, Cumulus Computers with its background extends several pixels above the page and fits correctly in IE8. The links and copyright notice in IE8 run off the bottom of the page, yet are well placed in FireFox.

The page placement could be better IMO. Try centering it and get rid of the background space above it. Set an image, a pattern or at least a pleasant color for the background. The gray is way too boring and gloomy.

Some attention should be given to the size of the text window. In both my browsers it is displaying a horizontal scroll bar. You should adjust your table or div size so that this disappears. Vertical scroll bars are acceptable ... horizontal ones are not.
 
signmeup

signmeup

New Member
Your logo needs to be brighter. I don't like the fushia coloured links at the bottom.... looks cheap. Fred's right on about the background colour.
 
choucove

choucove

New Member
Thank you everyone for your gracious input, it is exactly what I am needing from your expertise!

A couple questions for you, then, to fix some of the issues you have described.

1) Image placement of the top logo and bottom copyright not displaying properly between browsers:
I've noticed this myself as well, but I'm not sure how to fix it. Again, I'm just starting in Dreamweaver and know some HTML, but for some reason I can't tell how to get it to display properly for both IE8 AND Firefox in both locations properly. Am I pretty much stuck in creating divs for all of these elements instead of placing them into a static-sized table?

2) Page not centered in window:
This was a sacrifice again I had to make due to my limited experience with coding in Dreamweaver currently. The center scrolling area for content is currently my only div. However, it is a static-position div. which means, of course, I had to pick a specific location in pixels for it to be placed on the screen. If I just told the base table (that holds the entire background cloud image and page contents) to be centered, then the div would show up all over the page depending upon the viewer's resolution and many other things, correct? Or how can I go about fixing this, either in Dreamweaver or in code? Yes, ideally I want to have everything centered no matter the viewer's resolution.

3) Background image of the clouds:
I'm very open to suggestions here as well. I'm trying to incorporate the "cumulus" theme here, and found that background attractive as it left the upper part (for the nav bar and logo) without a broad range of colors to deal with to make readability in this region very simple.

4) No computer images:
The majority of computer images and computer-related information would be placed within the page content, which I have yet to really set up. However, I had initially played with the idea of having a small sort of film strip running vertically along the right side of the content page with various computer images.

5) Scrolling bar on the bottom of the text field:
Another item that again I wish I could remove as well, but I'm just not quite sure how. This region was created using a div in Dreamweaver and I'm just not sure how to set the properties to show only one of the scrolling bars, as both will always display for me. Any ideas?

6) Link bar at the bottom of the page:
Currently these links are only displayed for testing purposes, but I had thought of putting in just small black font links when the page is complete at the bottom. These links shouldn't be displaying as fushia, though, my apologies.

7) Background color needs changing:
This actually wasn't something I was too aware of causing a problem, but I am glad you pointed it out to me then. What might be some of your suggestions for this? Would I be better off finding a light blue gradient or pattern for the background? I'm trying to just avoid the pattern-y box look of a graphic is all.

Again thank you all so much for your help!
 
signmeup

signmeup

New Member
Go with a white background. It's clean and corporate. Doesn't your software have a WYSIWYG mode to get the thing quickly fleshed out? Then switch to "Pro Designer" HTML mode for final tweaking?
 
A

artist4christ

New Member
Personally for the layout that exist currently I would remove the gray box and take your cloud background and position it at the bottom of the browser and set it to remain there even if there is scrolling. That way your backgroun never changes but you can scroll the content. Then repeat your background vertically to compensate for screen resolution size.

When centering your content use this type of centering.
position:absolute;
left:50%;
margin-left:-300px; (or whatever half of the size of your content wrapper is)

This will make the centering cross broswer compatible.

And just a side note, table based layout is depricated and not a good practice. We have all done it so I can't say I haven't, but once you learn tableless layout it is worth the time. That way if a browser has CSS turned off, and yes I do know people that browes that way, then the information is still easily read.


if you could pm me the just the cloud background I can show you want I mean.
 
choucove

choucove

New Member
So by the general sound of things, I should try to move away from using a table as the base of my website layout? Currently, the main page is really a table with a column for the top where the logo is located, a column beneath that where the rollover nav bar is located, a third column below where the content div is located, and the final column is where the testing link nav bar and copyright is located.

Should I instead replace all of these with div elements? I figured that this wouldn't be a good idea because I wasn't sure how to use absolute position div tags that would vary depending upon the resolution of the viewer's screen, since all I know is based on absolute pixel location so far.

I had been very careful about using div tags so far as our class assignment projects using them never displayed properly either in IE8 or Firefox as it was displayed in Dreamweaver.
 
A

artist4christ

New Member
The positions can use percentaged as shown above, for the main container your CSS would look

#main_conatiner
{
position:absolute;
left:50%;
margin-left:-500px;
width:1000px;
height:670px;
}

That will center the site's main container at for any browser at any resolution, then build all of your content inside of there.

you can use relative positioning within the container to position the rest of your elements.

relative positioning positions the next div based on the previous div's bottom left corner.
if you float a div this will change how the relative positioning works so keep that in mind.

as for cross browser compatability research box models. IE and firefox use a different box model.

the basic are pretty easy, if you want to use padding, padding is the space on the inside of the box before the next element appears.

so if you have a 50x50 div with a padding of 5px, you need to adjust the box size to compensate;

i.e.
#box
{
width:40px;
height:40px;
padding:5px;
}

that will give you a total width of 50px;

margins work on the outside spacing

ie.
#box
{
width:40px;
height:40px;
margin:5px;
}

both have a total size of 50px, the padding version will pad the inside content by 5px on each side, the margin example will put the content in the content in the 0,0 position of the box, but put a 5px margin on the outside.

so the code above will give you the exact same look for both boxes, just depends on what you are utilizing the boxes for to determin which to use.

attached in an example of a box model that will generally work in all browsers.
 
A

artist4christ

New Member
Here you go
 

Attachments

  • boxmodel.png
    boxmodel.png
    7.6 KB · Views: 121
choucove

choucove

New Member
I have done some work on the items as you all have described that need to be altered. Instead of tables I have built div containers for the parts of the page, to the best of my current understanding of skill with them. See the updated site here. A couple things that I still have not quite fixed yet however:

1) I am still unable to remove the bottom scroll bar from the main content div, but I know there must be some CSS property someplace that will allow me to change this, correct?

2) The company logo is still the same blue on blue right now, but that will be reworked soon enough. Right now it's just to get the positioning and general layout down.

3) The top link buttons do not link to anything and are just text right now. They will be replaced with actual rollover images, which also need redesigned from my initial test page. Same goes for the bottom testing links which will probably be removed in the final pages.

Is this closer to what you all were suggesting?
 
choucove

choucove

New Member
signmeup said:
That's a big improvement. Why do you need the text to scroll? Why not just let the whole site scroll.
Click to expand...

With this design I was just looking at the effect of the background image with the clouds to begin with. If the background image scrolled then the image would look very patterned and repeated which would not look proper. From there, I thought it would be nice if the menu buttons and logo were always visible at the top of the page window. Without using frames, the way that I could think to accomplish this is to make just the content scroll.

To me it also just has a feeling of floating out there with the clouds which is what I am trying to go for as a theme. It should be simple and compact, I don't have a whole bunch of pictures and content that I will be posting on there, so it doesn't need a whole lot of display room.

I'd still like to do more with the main content holder to make it seem to pop out better. If there was a way of me slightly fading it to still somewhat see the cloud background I wouldn't mind, or a way of making a drop shadow from that div to make it stand up. I would also like to do more with the horizontal dividers on the top and bottom, though still remaining simple. Perhaps instead of just a straight bar doing a small graphical design that ties in with the link buttons on top.
 
choucove

choucove

New Member
I do want the image to repeat horizontally, but not vertically. That way the image of the clouds is always at the bottom of the window no matter what resolution, and even if you scrolled the entire page contents on top of it would always remain at the bottom. This is currently how the background is set up on the newer version of the website page.
 
choucove

choucove

New Member
Again I have made some new changes and uploaded the new site online. The link is here. I changed the way the content was laid out on the page slightly to incorporate images a little better to tie in the computer theme. The top rollover buttons I prefer much better than the static images I had created before. Right now there are two content panes, the one on the far right displaying updates and news, or perhaps current promotions.

All of the pages have the same content on them currently, as I will be working later to get all of that input, but this should give you a better idea what I am looking to doing. The company logo as well will be revised for up on the page. Overall, I am pleased with some of the changes made. As you all have suggested everything is done with divs, and I've learned much more about their proper usage! Thank you again everyone for you incredibly helpful feedback, and let me know what you think of this (hopefully final) revision to the layout!
 
You must log in or register to reply here.
Top