SeanUK

Well, I don't think spaces are the problem. Have tried closing all the gaps, deleting unnecessary spaces and the problem persists. Any other ideas? *scratches head*

Hey Cinna, Thanks for the hint, but it hasn't fixed the problem Quick Edit: - Hi Guezala, I tried your suggestions also and still seem to be having the same problems. Not entirely sure what to do with that last bit of code: { margin: 0; padding: 0; } Tried throwing it at the top of the doc, as well as under a #body tag. No luck though! I think I avoided margin, and padding values for each element, because they change the way the images tile on the screen. I was following, this tutorial: http://sampsonvideos.com/video.php?video=14 Pretty sure he said avoid that, but he wasn't using images for his backgrounds, so I tinkered with what he had shown anyway.

Hey guys, Sorry, this is another silly question. Think I'm picking most things up pretty quickly but every now and again I keep hitting a wall that stumps me. So, here I am again. I've coded up a nice, basic template for my design now. I've got the bare-bones out of the way, almost. The header, footer, and basic content box are what I am trying to tidy up at the moment. Here's a screen-cap: http://mynetimages.com/viewimage/99ff683f Now, as you can see there is a visible gap between the pnlheader.jpg and the #container for #pnlmiddle. I can't tell what's causing the gap. All of my image sizes, seem to match up with the images in the image folder. As well as the height,width sizes specified in the #content tags. -- What am I missing? I've used an identical set-up for the footer image, and it matches up perfectly. When the three images are stacked they equal to 700pixels in height. This is how the items are stacking (I think) <img src=pnlHeader.jpg> [217 pixels high] #container body [367 pixels high] <img src="pnlFooter.jpg> [116 pixels high] Add those up, and you hit the perfect 700 pixels height. So I just don't get what's going wrong. Here's the HTML Extract: <div id="pnlHeader"> <img src="images/pnlHeader.jpg" alt="Panel Header"/> </div> Here's the accompanying CSS Extract: } #container #pnlHeader { width:800 height:217 margin:auto; } #container #pnlLeft { width:158px; height:367px; background-image: url(images/pnlLeft.jpg); float:left; } If you would like to view more of the source, or css you can download them here: http://rapidshare.com/files/221337247/NewCodeLayout.zip.html --- The other thing I was having trouble with is setting the background. I have tried <body bgcolor="2e2e2e"</> in the HTML file itself... As well as #body { background-image: url(bgtilejpg); background-repeat: repeat; } } As well as a few other combination I could think of, still the background stays WHITE. At the moment, the index.html, and index.css files have no background tags because they were not working! Could somebody take a look, and tell me what's wrong with it? Thanks again for the help, sorry for being such a Dunce!

Hey Guys, Thanks for the replies. I couldn't get my head around it earlier, so I just restarted and rewrote everything. Fixed my problem Looking at the code, I'm guessing Tom has found the problem, seems likeI forgot to # the id, and I was using an old style link from a previous tutorial! Thanks for looking guys, cheers for the assist!

Hey guys, I've written a very basic html, and css file to get to grips with HTML. I'm having trouble finding the problem with my code, as far as I can tell my text should be WHITE. Instead, it's sticking to the default black. I can't see where the problem is. I'd be thankful if you could have a quick scan, and show me what I've done wrong. So here goes: (HTML File) <div id="content"> <p> TEST OF SECOND DIV </p> <p>- CONTENT - </p> </div> (CSS File) content { color; white; } As a work-around, I've written a color tag into my html document instead: <font color="#ffffff"> works fine. From what I understand though, the css should define/set the colour and format of my text within the specified element. I thought at first, the css and html may not be linked properly. I double-checked the tutorial I was watching, and everything seems to be okay. <link rel="stylesheet" href="style.css" media> "screen" /> Where have I made my stupid mistake?

Well, I went ahead and tried it that way. Didn't work. The images just 'stack' on top of one and other, so we see our Logo, Header, LEFTBAR. The leftbar, appears underneath the Header/Logo, and not 'beside' it. Was worth a shot, hopefully the second/third video will sort this issue out. Anybody know why it's happening? --- I've tried to write this up a few different ways now. I tried to manipulate the css sheet, and supply width/height parameters for each <div> For example my .html would read: <div id ="toplogo"> <img src="images/toplogo.jpg" alt="Page Header"/> </div> and my css would be: #toplogo { width:800 height:130 } I hoped that the CSS sheet, set at the same size as my image file would hopefully snap everything together. Again, didn't work. I looked at how photoshop exports the images, and writes it's HTML to line them up. It uses a TABLE system, that looks something like this: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (CircleRadio.psd) --> <table id="Table_01" width="800" height="700" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <img src="images/CircleRadio_01.jpg" width="800" height="130" alt=""></td> </tr> Is a table system the way to tackle my layout? Here's where I'm at: I understand that I need to <div> my layout into different 'elements'. I am stuck trying to get them to line up, and sit properly on the page. If I try and use the method shown in the tutorial at css-tricks I get gaps in my page. If I try to use photoshops table system, but incorporate the code from css-tricks, I get gaps in my page... -- I've tried all sorts of ****, six or seven different methods and I'm just hitting a wall. Including Floats! Any help is appreciated, thanks guys.

Heyas, here's an update: I've just sat through the first of a three-part tutorial, on the css-tricks.com website. (Link was a great help, thanks Neil) My HTML Document looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <title>CircleRadio</title> </head> <body> <center> <div id ="toplogo"> <img src="images/toplogo.jpg" alt="Page Header"/> </div> <div id="header"> <img src="images/headertop.jpg" alt="Page Logo"/> </div> <div id="page-wrap"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">DJ Profiles</a></li> <li><a href="#">Schedule</a></li> </ul> </center> </div> <div id="NEWSBox> </div> <div id="SCHEDULEBox> </div> <div id="sidebar"> </div> <div id="footer"> </div> </body> </html> and my CSS Document looks like this: /* RESETS & BASIC PAGE SETUP */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% "Lucida Grande", sans-serif; background: url(images/body-bg.jpg) top left repeat; } ul { list-style: none inside; } p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; } p.metadata { background: #fff9a7; padding: 3px;} a { outline: none; } a img { border: none; } /* END RESET */ /* TOOLBOX */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } /* END TOOLBOX */ /* STRUCTURE AND STUFF */ #page-wrap { width: 400px; height: 600px; margin: 0 auto; background: url(images/content-bg.jpg) repeat-y; } } /* END STRUCTURE */ You can see what I have so far, here: http://206.51.225.62/~jerzyrad/ Now, I'm just about to go through the second part of the tutorial. I've picked up quite a lot already, think I'm getting the hang of the smaller bits and bobs now, thankfully. One question I have, before I dive straight into the next section is how do I address the 'seams' issue? I want my <toplogo> div, to sit firmly atop my <header> div, without a break in the page. The images should sit flush. How do I go about this? Also, before I start on the next sections I wanted to know a few things. My site so far looks like this <toplogo> <header> <pagewrap> What I am interested in, is where/how I would place my 'side' images. I'm thinking along the lines of something like this <toplogo> <header> <leftbar> <pagewrap> <rightbar> <footer> Would that be a good way to go about it?

Heyas, Thanks for the links Neil, I'm sure what I'm asking is really rather stupid (and probably a bit frustrating)but I'm still trying to get my head around the whole process. I'm sure you can appreciate how overwhelming it can be for a complete beginner! I can't ask the right questions yet, as I don't really understand everything. I'm off to jump onto the page you provided, and I'll check back in once I've had a good poke around. Thanks for the help - Sean

Hey Guys, Thanks for the fast replies. @ Neilp - I was a bit hesitant about using Dreamweaver, I know it's a bit clumsy and adds all sorts of nonsensical code. I'm pursuing this design as a favour for a friend, I've always been interested in learning. If Dreamweaver really is a big no, no then I'm prepared to drop it and try doing things from scratch. Regarding the PhotoShop side of things, I've got experience with PhotoShop. I've been using it on and off for posters,etc for a few years. I understand the concept of layers, masking, etc. I've just never tackled anything web-based with it. I've sat through a few tutorials for Photoshop and Web-Design already. The problem I have is that they are very specific to the style/layout of the design that is being constructed. I've already tried to slice my design, and know how to save it, etc. I'm just not sure I have sliced it in the right way, or how I actually turn my sliced images into a working web-page. CSS, and HTML seems to be the key to the 'construction' of the whole thing. I've already started reading some basic tutorials on HTML, that cover the principals. Still seems very daunting at the moment! Here's how I sliced my image: http://mynetimages.com/ce54c8e6_md.jpg @styledwebdesign - I'm doing this as a favour for a friend, so although learning the basics are something that appeal to me it's not my primary reason behind taking the plunge. If you have the time, and capability to code it.. I'd very much appreciate it. Thank you both for having a look, much appreciated.

Hey Everybody, I'm having some trouble with my layout. I know very little about HTML and CSS so I tried to emulate the style of a FreeWebTemplate, to avoid any nasty coding. This has worked for me in the past, on simpler layouts. (Not that I've made many) I'm using Photoshop and DreamWeaver, and I'm trying to turn this image into a simple, and fully-functional web-page. http://mynetimages.com/91693528_md.jpg Problem is, I'm not really sure how to go about it. At first, I tried to just import the old templates Index file, and delete/re-arrange the redundancies. However, this just seems to 'break' the layout. (somewhat unsurprisingly) I end up with big gaps, and something that looks like this: http://mynetimages.com/94569846_md.jpg I'm not really sure how to approach this. I want three 'content' boxes, which I'm sure you can see. Top Left Box – A News box, basically just have 'headlines' there. Bottom Left Box – This box will have my 'radio schedule' in, or at least a 'Now/Next' feature. Right Box – This box will have my 'feature adverts', etc. Basically, it's a strip for promoting flyers, etc. How would I tackle this? What's the process I have to go through? Thanks for any tips, and advice you can offer. The original template can be found here: http://www.freetemplatesonline.com/templat...mplates-40.html (PSD,Indexfiles,images, etc included) Here's a snapshot: http://mynetimages.com/afd81814_md.jpg I'm aware that this question is problem very annoying for those with experience, but I could really do with a few pointers. Thanks for taking the time to have a look. - Sean