I'm working on my web-based game, UGLYSOB.com, and wondering what layout should I use. I'm wondering how I should organize the page. Where should I put the logo, where should I put the menu, where should I put the login form. I'd like to get some feed back on what I should put and where.
Just a minor thing, but you have in your second paragraph, "..if you already have an account you can login on the right" however your login section is on the LEFT side of the page, directly under the logo. Some other edits I think your website needs are; you should center the footer text and make the padding under-neath a lot less (appears to be 40px whitespace under the bottom text) and you should raise your login up closer to the bottom of your logo. After you do these three things I would suggest you add some content, even if it is just a news feed on the main page, but at bare minimum you need to have a valid description of the game because I have no idea what it is apart from something to do with an UGLY - SOB. I would also suggest to change your title from "UGLYSOB.COM" to "UGLY SOB" or "Ugly SOB" because having a ".COM" in your title usually looks unprofessional. Thoughts of, Kelly2.
The easiest way to work out your layout is to Google pages and website that are in the same catagory as your website and see what others are doing for inspiration. You don't have to copy but you may think thats a nice menu and thats a nice header plus I like the main content area etc. Anyway web designer and coder will search the web and see what others are doing for that catagory of website. Once you have determined what you want you should do a quick scetch up on paper of your design and only then start creating your template in your photo editing software. All the web designers I know do it this way and it does work. If you jump right in you may end up getting the same old designers block so I would suggest doing the above.
While browsing through your code I found an error, Line 91 you have "size8" instead of what I can only assume should be "font-size:8px"
I tried that and didn't find anything. Even went to coolhomepages.com, I didn't find any I liked. What do you think of the over all layout? I'd like to create something unique, so fresh ideas are what I'm after ;-)
Right I will create a mock up of a homepage and see what you think OK. Give me 10 minutes and I will add a layout for you. Would you like "Fixed Width" or "Fluid Width" or "Fixed Width with Fluid Header and Footer"..? Also you can have a "Fixed Width and Fluid Header/Menu and Footer. I will create one if you want that is XHTML 1.0 Transitional or Strict which ever you want.
Here is a simple webpage mock up that I have just created for you to see if this is the kind of layout that you would be interested in. XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Webpage Mockup</title> </head> <body> <div id="header"><h3>Header Area</h3></div> <div id="nav"><h3>Menu/Navigation Area</h3></div> <div id="wrapper"> <div id="main"><h3>Main Content Area</h3></div> <div id="right"><h3>Links & Brief Description Area</h3></div> </div> <!--End Wrapper--> <div id="footer"><h3>Footer Area</h3></div> </body> </html> Code (markup): CSS 2.1 StyleSheet <style type="text/css"> <!-- * { margin: 0 auto; padding: 0 auto; } body { font-family: Verdana, Geneva, sans-serif; text-align: center; } #header { margin: 0 auto; width: 1024px; height: 150px; background-color: #0F3; padding-top: 20px; } #nav { margin: 0 auto; width: 1024px; height: 40px; background-color: #F33; padding-top: 20px; } #wrapper { margin: 0 auto; width: 1024px; height: 700px; background-color: #96F; } #main { float: left; width: 784px; height: 680px; padding: 10px; background-color: #F90; } #right { float: left; width: 220px; height: 680px; background-color: #CC3; padding-top: 20px; } #footer { margin: 0 auto; width: 1024px; height: 40px; background-color: #03F; padding-top: 20px; } --> </style> Code (markup): Attached is the template image. I have coloured the page just so you get an idea of what the layout is like so take no notice of the nasty colours. You can also make the header/menu & footer all fluid width by adding in the CSS where it says width: 960px; change this to width: 100%; and that will give you the fuild areas that you require. Any problems just ask. You can download the HTML and CSS by simply clicking on the index.html attached to this post. If you require a 2 or 3 column layout just ask ok.
Wow, that's a lot more than I expected... THANKS!!!! What do think about the use of the logo? It's TALL, where should I put it?
Just go into the CSS and where it says #header adjust the hight to whatever is needed and the header area will become taller. And your welcome, if you need anything else just ask OK.
I think their are may CSS tutorials available online you can read and make your own custom layout...... which is the easy way to do this /..........
Easy doesn't always mean best. I'm here to get fresh ideas and feedback cause I already have a layout I created on my site.
This is easy, if your using the layout I gave you then add your logo and then use a colour picking tool to get the edge colour of the logo once you get the "Hex" number ie: #FFFFFF << White or whatever colour your logo is then simply put this into the header section of the CSS: #header { background-color: #F5F5F5; } This will change your headers background to your desired colour. If you go to http://supervalueweb.com where it says SUPERVALUEWEB in the header that is a logo of about 300x80px logo then I added a background colour so it looks like a consistent image. Or instead of making your header higher you can simply resize the image by 20 - 50 px on each side which will help keep the constraints just right. To be honest theres many ways you can do this but you need to decide what it is you really want. You must have some general idea or you will forever be unhappy with your website.
I don't think you get what I'm saying, I didn't ask about the color -lol. Your layout with my logo gives a lot of unused space in the header. It works with a wide logo, but not tall. I do not want to resize it either, I want the logo big. Now that I think about it, a header isn't needed at all. I did take your layout and made some modifications. With no header, the menu goes to the top of the page. I also fixed it's position so it will still appear when you scroll. It's on the site now.
Right I get you. However, before you do anything else add your DOCTYPE to the layout. There was a DOCTYPE there and now your website doesn't have one. This is bad. Your websites pages should always have a DOCTYPE in them, if not your website will place seach engines into "Quirks Mode" which is bad for you site. I would receommend you add one ASAP then re-upload to your server.
I feel not comfortable with your menu. You can change CSS menu into realtive or absolute, not in Fixed mode.