Hi everyone, I would like to code one of my layouts for the first time and I need some help. I understand basics of html and css, for you guys this will be easy, for me I kind of need a step by step assistance So this is my simple layout: As you can see the background as 3 things, it has the main bg pattern, it has a bg stretch on top of the document and it has a little rounded glare on top of the document. For now, How do I begin coding the background so it has all the 3 things just like on the preview? Thanks P.S. With anyone who helps me out throughout coding this layout I can hook it up with some hosting
I'm not at a desk so I'll make this brief in terms of details, i.e. I won't bother checking exact widths etc... but here's a little to get you started. Some of my coding is via trial and error so if I mess up just give me a shout and I'll try again properly (actually coding it) if I have time. I'm sure it'll be bugged so yeah, bear with me Thoughts Pre-coding =============== You can go about coding a website in loads of different ways. Here's some thoughts on your design: The Background - This can be done in one of two ways. One way would be to create a very large image that is wide enough to accommodate for different screen resolutions. If it's not wide enough then you run the risk of the "spotlight" repeating itself on the screen which is not what you want. The height of the image will also need to be enough to make sure you cover the full length of any page. The other option here would be to use one image for the gradient and one for the spotlight. The gradient will be repeated horizontally whereas the spotlight is centralized. In both cases though, the image can be significantly reduced in height if the background didn't have a gritty texture. If you remove the grittiness then you could make the background image repeat horizontally, but specify the background the image doesn't cover with CSS. In this example I'll use the 2 image method. The Menu - You can either code the menu as an image or text with an image background. For SEO, text menu is always preferred over image so I recommend going for text with image background. The Horizontal Line - For this example I'm just going to use a solid line, not a graphic like in your template. You can just add it in later. Anyway with that out of the way let's get down to the coding. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Mockup HTML</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- META info here --> </head> <body> <div class = "wrapper> <div class = "headerWrapper"> <div class = "logo"> <img src = "images/logo.jpg" width = "xxx" height = "xxx" alt = "xxx" title = "xxx"> </div> <div class = "menu"> <span class = "menuItem"> <a href = "index.php" title = "Home">home</a> </span> <span class = "menuItem"> <a href = "contact.php" title = "Contact">contact</a> </span> </div> </div> <div class = "content"> <!-- Content Goes Here --> </div> <div class = "footer"> © 2004 - 2009 gamerthemes - all rights reserved </div> </div> </body> </html> HTML: And the CSS: body{ background : #c0c0c0 url("images/yourGradientImage.jpg") top repeat-x; font-family : Tahoma, Arial, San-Serif; font-size : 12px; color : #fff; text-align : center; } .wrapper{ background : transparent url("images/yourSpotlightImage.jpg") top center no-repeat; width : 960px; margin-left : auto; margin-right : auto; text-align : left; } .headerWrapper{ width : 100%; float : left; border-bottom : 1px solid #505050; margin-bottom : 15px; /* To create distance between border & logo/menu */ } .logo{ width : 50%; float : left; } .menu{ width : 50%; float : left; text-align : right; } .menuItem{ background transparent url("images/menuItemBackgroundImage.jpg") center no-repeat; width: 150px; /* or whatever the image width is */ height : 40px; /* again just for image */ text-align : center; } .menuItem a{ color : #c0c0c0; text-decoration : none; /* to get rid of the underline */ font-weight : bold; line-height : 24px; /* I personally use this to make the text vertically centered. You could also use vertical-align or relative positioning. */ } .menuItem a:hover{ color : #b0b0b0; /* To darken text when hover over (just as an additional example) */ } .content { width : 100%; float : left; } .footer { width : 100% float : left; border-top : 1px solid #505050; margin-top : 15px; font-size : 11px; color : #b0b0b0; } Code (markup): As I said before I'm more of a "make a change, upload, see if it's ok" type coder so there maybe some issues with the code above. Just give it a go and give me a shout if something goes wrong! I have a few projects right now but will be more than happy to give you more help if you need it. Kind regards, Hodge
I'm currently in the process of coding a website for a client so am a bit busy. If you still need my help once I'm done in a couple of days then I'll send you my MSN via pm. I'm still happy to check here every now and again if you post me your questions etc...
@Darkhodge - mein gott, I'd sooner put a bullet in my head than use that markup. Semantics, you might want to look into it. Menu is a list of choices, that should be a UL. Not every ejaculation deserves a name, uhm, I mean not every element needs a DIV or SPAN with a class around it, especially when you already have perfectly good elements to hook onto like the anchors. What was that I said a couple years ago about people who made endless pointless nested tables today just make endless nested pointless DIV's? @mad-d702 - My approach is to first mark up what elements are on the page without thinking about appearance apart from perhaps some standard image replacement hooks. The markup would therin look something like this: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> GamerThemes </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! --> <div id="topBorder"></div> <div id="pageWrapper"> <h1> gamerthemes <span></span> </h1> <hr /> <!-- for non-CSS users --> <ul id="mainMenu"> <li><a href="home">Home</a></li> <li><a href="contact">Contact</a></li> </ul> <hr /> <!-- for non-CSS users --> <div id="content"> Page Content Here <!-- #content --></div> <hr /> <!-- for non-CSS users --> <div id="footer"> © 2004-2009 gamerthemes - All Rights Reserved <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Everything else goes in the CSS, the trick being how you slice up the image. I have a copy with working CSS live here: http://www.cutcodedown.com/for_others/mad-d702/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/mad-d702 ... is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, Valid CSS2, tested working in IE 5.5, 6, 7 & 8, FF 2 and 3.5, Opera 9.64 and 10, and the latest flavors of Safari and Chrome. To break down how it works - first you need your overall background tile - some people will say just slice from the top and put that on BODY, others will tell you to dual layer the top gradient over body with the HTML element. On the former, if the page gets too tall it breaks and the filesizes are prohibative, on the latter styling HTML cross-browser is unreliable and I advise against it... So, we take a sample 128x128 patch off the center as our overall body tiled background, then I took a 128x256 slice off the top corner to tile at the top. To apply this we have the TopBorder div which we set to 256px tall, then use a negative margin to ride up our content. #pagewrapper we set the 700px width, and the 'center' tiled image can go right on that. I tried to clean out the button images, kind of sloppy but it makes it more palette friendly. You'll see some horizontal rules which are in there to divide up the sections when CSS is disabled, but are removed in our CSS. H1 is the topmost heading on the page, all lower order headings should be subsections, so usually this is the best content to apply H1 to. I use gilder-levin image replacement to hide the text - this gives people browsing with images off styled content they can actually navigate the page with, as well as a heading for when CSS is disabled. Instead of dicking with trying to float the menu next to the h1, I just float it right then use a negative margin to ride it up. This cures a lot of spacing/formatting woes. A little padding to match your image and we're good. You'll notice I added hover states, if you look at mainMenu.png you can see we use only one image for both states. Some people call it sprites, others call it sliding backgrounds - same thing. You'll also notice I use the text in the markup instead of trying to do uniques for each image. Just looks better IMHO and means images off the user still gets navigation. Since our dividing line is ingrained into our pageWrapperTop.png we don't need to worry about that, so a little padding on content to make it pretty/spaced away is all we need, while the divider above the footer we just add as a background image aligned center top. Add the same padding to the footer as we did content and it's done. Pretty simple. Best features of this approach is the page is that images off it's still useful, and you get decent formatting when CSS is disabled (like on many handhelds) - which also means it gives screen readers and search engines something to look at. It even formats well on small screen like Opera Mini/Mobile (or opera desktop's "small screen" version)
Wow you are the man!!! Thanks man, Ill look in your code and try to figure out how you did this exactly Could I have your MSN? Thanks man!