bmroyer Posted February 27, 2008 Share Posted February 27, 2008 I made a website in paint.net and cut all the parts of the site into separate images. I'm having a problem getting the top images which is above the banner to go the whole way to the top of the page. There is like a half inch gap between the top of the page and the image. This is the first time doing this with images. And how do u put text over top the images, like on the links and content section. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><head><title>Your Title Goes Here</title><link rel=stylesheet type="text/css" href="style.css"></head><body><table width="1000" height="31" cellpadding="0" cellspacing="0" border="0"> <tr valign="top"><td width="100%"><!-- logo image --><img src="images/top.jpg" width="1000" height="31" border="0" alt=""><!-- end logo image --></td></table><table width="1000" height="150" cellpadding="0" cellspacing="0" border="0"> <tr valign="top"><td width="248"><!-- logo image --><img src="images/banner.jpg" width="1000" height="150" border="0" alt=""><!-- end logo image --></td></table><img src="images/separator.jpg" width="121" height="10" border="0" alt=""><table width="121" height="34" cellpadding="0" cellspacing="0" border="0"> <tr valign="top"><td width="248"><!-- logo image --><img src="images/contentstext.jpg" width="121" height="34" border="0" alt=""><!-- end contents text image --></td></table><table width="121" height="167" cellpadding="0" cellspacing="0" border="0"> <tr valign="top"><td width="248"><!-- logo image --><img src="images/contentsbox.jpg" width="121" height="167" border="0" alt=""><!-- end logo image --></td></table></body></html> Link to comment Share on other sites More sharing options...
Xune Posted February 27, 2008 Share Posted February 27, 2008 one thing you could do is in your CSS fileput body {padding: 0px; margin: 0px;} Link to comment Share on other sites More sharing options...
bmroyer Posted February 27, 2008 Author Share Posted February 27, 2008 that worked, but I added my content box where you put lots of text, and I loaded it. The content box is now to the way left, and underneath the link box when it should be beside it. Link to comment Share on other sites More sharing options...
Xune Posted February 27, 2008 Share Posted February 27, 2008 alright, then change your CSS from body {padding: 0px; margin: 0px;} to body {padding-top: 0px; margin-top: 0px;} Link to comment Share on other sites More sharing options...
bmroyer Posted February 27, 2008 Author Share Posted February 27, 2008 did work. Here is what I mean.border ------------------------------------------------------Banner ------------------------------------------------------Link Panel --- --- ---Content ----------------------------------------------------------- ------------------------------------------------------------ -------------------------------------------------------------Here is what I want ------------------------------------------------------Banner ------------------------------------------------------Link Panel --- ----------------------------------------------------------- --- ------------------------------------------------------------ Content --- ------------------------------------------------------------- --- Link to comment Share on other sites More sharing options...
jeffman Posted February 27, 2008 Share Posted February 27, 2008 Okay, you asked for advice, and you're going to get some!First, read about divs and positioning. AND THEN DUMP THAT TABLE. It's a totally 90s way of laying out your design, which in digital time is the equivalent of 500 million years ago. Break that habit now. We'll help you. I also have some legacy tables lurking about, but none of my current work uses them.A div is a very simple yet powerful design element. Kind of like a table element (without the table and all that nasty table code) that you can position anywhere you want. You even can give it a background image, which is the kind you can put text and even other images on top of. And that was a big part of your question, so you see I really am answering you.OLD WAY:<table><tr><td>content</td></tr></table>BETTER WAY:<div>content</div>All your dimensions and positioning and even your background image go in the CSS declaration of the div. Looks like you're already using CSS, so this will not be a big jump. It's painful at first, but when you get it, you'll wonder why you haven't been doing it this way for years. Link to comment Share on other sites More sharing options...
bmroyer Posted February 27, 2008 Author Share Posted February 27, 2008 Link to comment Share on other sites More sharing options...
jlhaslip Posted February 27, 2008 Share Posted February 27, 2008 Standard two column layout.Use floats, margins and padding for positioning. Hang-on , I think I have a Template kicking around.Here, check this out. the menu is floated left, the main content area has a margin-left equal or greater than the menu.http://jlhaslip.trap17.com/samples/templat...left/index.htmland it validates at the w3c... Link to comment Share on other sites More sharing options...
Synook Posted February 27, 2008 Share Posted February 27, 2008 I have a zero-table layout similar to Jhaslip's, but it has equal column height no matter which side is longer and can handle image backgrounds. It validates too. http://www.roundeddesign.com/rdtech/Feel free to use the code. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 27, 2008 Share Posted February 27, 2008 very nice, synook... Link to comment Share on other sites More sharing options...
bmroyer Posted February 28, 2008 Author Share Posted February 28, 2008 alright, im using div now thanks. I got it all to work out, except the content area is to the right of the page, like its suppost to be, but its not close enough to the banner, its still below the links. Here is my CSS. body {padding-top: 0px; margin-top: 0px;}#top {align:top;}#banner {align:top;}#contenttext {align:left;}#contentbox {align:left;}#content {float:right;}#footer{align:bottom;}form{ margin:0px;}a { font-family:Arial; font-size:13px; text-decoration: none; font-weight: bold; color:#002449;}A:Hover { color : #002449; text-decoration : underline;}H1 { color: #002449; font-weight: bold; font-size : 16px;} Link to comment Share on other sites More sharing options...
Synook Posted February 28, 2008 Share Posted February 28, 2008 What does your HTML look like? Link to comment Share on other sites More sharing options...
bmroyer Posted February 28, 2008 Author Share Posted February 28, 2008 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><head><title>Your Title Goes Here</title><link rel=stylesheet type="text/css" href="style.css"></head><body><div id="top"><img src="images/top.jpg" alt="" title="" /><div id="banner"><img src="images/banner.jpg" alt="" title="" /></div><div id="contentstext"><img src="images/contentstext.jpg" alt="" title="" /></div><div id="contentbox"><img src="images/contentsbox.jpg" alt="" title="" /></div><div id="content"><img src="images/content.jpg" alt="" title="" /></div><div id="footer"><img src="images/footer.jpg" alt="" title="" /></div></body></html> Link to comment Share on other sites More sharing options...
bmroyer Posted February 29, 2008 Author Share Posted February 29, 2008 any help? Link to comment Share on other sites More sharing options...
Xune Posted February 29, 2008 Share Posted February 29, 2008 well, could you put up some sort of version on the web somewhere so I could look at it and SEE what you mean? Link to comment Share on other sites More sharing options...
bmroyer Posted February 29, 2008 Author Share Posted February 29, 2008 http://www.brandonroyer.com/template1/ Link to comment Share on other sites More sharing options...
jlhaslip Posted February 29, 2008 Share Posted February 29, 2008 CSS: html, body { margin: 0; padding: 0;}body { width: 995px; margin: 0 auto; text-align: center; }#wrapper { width: 995px; margin: 0; text-align: left; }#top {width: 100%;}#banner { }#inner { }#leftbox { float: right; } #contentstext { }#contentsbox { }#content { float: right; }#footer { clear: both; }a { font-family:Arial; font-size:13px; text-decoration: none; font-weight: bold; color:#002449;}a:hover { color : #002449; text-decoration : underline;}h1 { color: #002449; font-weight: bold; font-size : 24px;} html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Template1.html</title><link rel="stylesheet" type="text/css" href="Template1_files/style.css"></head><body><div id="wrapper"><div id="top"> <img src="Template1_files/top.jpg" alt="" title=""> <div id="banner"> <img src="Template1_files/banner.jpg" alt="" title=""> </div><!-- # banner --></div><!-- # top --><div id="inner"> <div id="content"> <img src="Template1_files/content.jpg" alt="" title="" /> </div> <div id="leftbox"> <div id="contentstext"> <img src="Template1_files/contentstext.jpg" alt="" title="" /> </div><!-- # contentstext --> <div id="contentsbox"> <img src="Template1_files/contentsbox.jpg" alt="" title="" /> </div><!-- # contentsbox --> </div><!-- # leftbox --></div><!-- # inner --><div id="footer"><img src="Template1_files/footer.jpg" alt="" title=""></div></div></body></html> I'm thinking that you might want to use an image as a background some place in there, but there you go. Link to comment Share on other sites More sharing options...
bmroyer Posted March 1, 2008 Author Share Posted March 1, 2008 that code doesn't seem to work, now the content is taking up the whole page, and the links section is on the bottom in both FF2 and IE7. I see what you did though, you added the images via html instead of CSS. Whats the "wrapper" for? Oh, and how do you get this to work. Its not the final graphics or anything, I'm just trying to learn how to set up a simple page, and its not working! Link to comment Share on other sites More sharing options...
roundcorners Posted March 1, 2008 Share Posted March 1, 2008 I think you should try going back to the previous code, before this last post and fix the widths of the content and side nav, so they fit into your wrapper width. At the moment you're trying to float two divs beside each other and their total width is wider than their containing div, it looks like you could take 50px off your main content div and it would pop into it's desired place. Floating a div doesn't position it absolutely, you have to allow it the space it needs. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 1, 2008 Share Posted March 1, 2008 How (exactly) is it "not working" ??? Link to comment Share on other sites More sharing options...
bmroyer Posted March 2, 2008 Author Share Posted March 2, 2008 does it work for you? it didn't work for me. actually it looks worse. all I did to your code is change the image paths. All the images are showing, but the content image takes up the whole center of the page, and the navigation image is between the content and the footer. Link to comment Share on other sites More sharing options...
Xune Posted March 2, 2008 Share Posted March 2, 2008 Ok, I believe I have solved your problem here, I just changed around things in the CSS file and got rid of the <img src="..... in your coding and now it should work, please tell me if this is what you want, and if it is, I will Zip it all up and send it to you tommorrow...[LINK] Link to comment Share on other sites More sharing options...
bmroyer Posted March 2, 2008 Author Share Posted March 2, 2008 that looks good. Thanks. But when you send it, could you explain in the CSS and HTML what everything does so I can get a general idea on how to base this on other designs? I'm not using that template for anything, I just made it in Paint.net to try and learn how to make templates. Link to comment Share on other sites More sharing options...
Xune Posted March 2, 2008 Share Posted March 2, 2008 Ok, I put comments at the bottom of the CSS and at the bottom of the HTMLhere is the download bmroyer.zip Link to comment Share on other sites More sharing options...
bmroyer Posted March 3, 2008 Author Share Posted March 3, 2008 thanks, I'll take a look at it tomorrow. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.