Hey guys, I am having lots of trouble gettng this splash page coded and I was hoping you guys would be able to help me out a bit. Here is what I am trying to code: leanbulk.com/splash.gif Here is what I have so far: leanbulk.com/splash/index.html First of all, there is that white line at the bottom that I can't seem to get out, and second of all, I am not sure that this is the best way to go about coding this. It seems like a real pain in the ***. Here is my code so far: <html> <head> <title>Lean Bulk - Bodybuilding Forums</title> </head> <body background="bg.gif" bgcolor="#bf1d1d"> <table width="780" cellspacing="0" cellpadding="0" border="0" align="center"> <tr> <td><img src="top.gif"></td></tr></table> <table background="innerbg.gif" width="730" height="418" cellspacing="0" cellpadding="0" border="0" align="center"> <tr> <td align="left"><img src="leftinner.gif"></td> <td align="right"><img src="rightinner.gif"></td></tr></table> </body> </html> Code (markup): Thanks for the help guys! Any suggestions will be appreciated!
I just did a quick image map for you. <html> <head> <title>Untitled-1</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (Untitled-1) --> <img src="images/splash.gif" width="780" height="700" border="0" alt="" usemap="#splash_Map"> <map name="splash_Map"> <area shape="rect" alt="" coords="456,584,652,613" href="#"> <area shape="rect" alt="" coords="130,584,326,614" href="#"> </map> <!-- End ImageReady Slices --> </body> </html> HTML: You could try to adjust it a bit.
I can't see your mockup. What's the address? You are right in your guess that you might not be doing it the right way. You're not really supposed to use tables and instead use css, but if that's what you know, then I guess that's okay. I'll show you both ways to do it if I can see what you want.
sorry guys, I forgot the "l" in the word splash. Here is what I want: leanbulk.com/splash.gif Here is what I have so far: leanbulk.com/spash/index.html I could use image mapping, but can I do rollovers with image mapping? I plan on having those buttons be rollovers. Also, wouldn't the page times be pretty slow with this method? I would rather do it the right way if I could figure it out! Thanks!
The white underline is the background of your table showing through. Shorten your table height by 1px and it should disappear. You might have further trouble with this layout when you add content. The content will push the table out further and create the line again.
Let me start by saying that this intro page is horrible! It is a nightmare for a coder! First of all, you will not be able to avoid big loading time, as you will have to use a lot of images. There are so many shadows, buttons, gradients, lines, corners that makes my nose bleed! I recommend you adjusting the design a little bit, like remove the unnecessary "frames" for the text. But anyway, even though I code only via CSS, I wouldn't do this one, i would make it with tables. Of course I would try to explain the client first that the design sucks
Dan is correct. You really shouldn't have a height attribute for your table. Your content should decide the height. This leaves it flexible. If you remove the height attribute entirely, and let the tallest of the two side images set the height of the table by pushing the table out, you will no longer see the white line. However, as Dan said, once your content gets larger than the two side images, it will bump your table down longer than your side images. The solution to this is as follows. 1) dump the height attribute for your table. Rarely use height attributes or avoid if possible 2) redo your side images to make them tiled background images that are just as wide, but only about 1 or 2 pixels tall and let them tile all the way down the cell. Then, bottom align your cell, and add an image of just the tiny corner at the bottom. So now, you will cover the cell with a corner image at the bottom, and the background image filling everything else in, regardless of how tall or short it becomes. If some browsers don't respond to giving a background image to a cell, then you have to nest a table inside that cell, apply the background image to it, and apply the image to the bottom of the nested cell rather than the outer one. This is where tables get to be a pain in the ass as opposed to css. 3)You will notice, that since you now have no content to drive the height of the table, it will be very thin. But this is what you want, because it will expand as your content expands. If you need to, for ease of viewing while working on this, you can re add the height attribute to the table until you get your content, or you can now just add empty paragraphs to push the table down as far as you want and you can watch it respond to each paragraph you enter, getting an illustration of it's flexibility and seeing how the background image ties into it's flexibility.
I'd take it further than that on the images. I'd use the 'six corners under one roof' technique on the tiling, make sure there's a H1 that's the site title (probably hide it under the logo), make certain text content is actually text so people viewing the page with images off have something to actually look at... need to use really tall versions of those gradients since IE still has it's head wedged up it's backside about color matching... Clip, clip here, clip, clip there We give the roughest claws That certain air of savoir faire Ok, this is how I'd go about it: http://battletech.hopto.org/for_others/LeanBulk/template.html As with all my examples the directory: http://battletech.hopto.org/for_others/LeanBulk is unlocked so you can get at the files with ease. Validates XHTML 1.0 strict, only uses one 'real' hack (fixing double-margin bug) and a few minor 'safe' hacks... Works in IE 6 & 7, Opera, Safari and Firefox flawless, renders with a minor box-size issue in IE 5.x (usable, just doesn't look right - close enough... you could probably play with overflow and some IE specific hacks if IE5.x matters to you). Turn images off, the page is still usable... Turn CSS off, page is still usable. It's semi dynamic and resizes well in IE and Opera, and after a fashion in FF and Safari. (being FF still resizes text like Netscape 3's epileptic crack addict cousin, this is no shocker). I found it was easiest to em to do the body text to get that effect while keeping the links inside the same container as their related text. Uses a whopping 13k of images, 10k of that being the logo. I could probably get that smaller chopping it up even more, but it's really just not worth the effort. It relies entirely on flow and margins with no absolute positioning tricks, and doesn't use tables either. I'm of the opinion that if you resort to a table to enclose a single area, you are probably doing something wrong. Hope this helps - any questions fire away.
Almost forgot (I'm under ten posts so I can't edit or post live links yet - that sucks - so.. new post) Still ends up with a lot of empty containers, but that's the cost of going fully dynamic - at least, without resorting to uber-wide images ala the sliding door technique. (and the corresponding uber-large images) Putting as many edges/corners into a single file as possible (usually you can do 6 out of 9) with border-boxes means less requests to the server - and therin faster page loads. Oh, I gave it a mouse-over effect on the links too... The two links and their mouseovers are implemented via a single file. Took about fifteen minutes alltogether.
Deathshadow, would give you more rep points for this post, but it says that I cannot give you rep points again so quickly. Your posts are to the point and accurate. Great resource links. LeanBulk, try not to take the negative comments on this board to heart. Everyone goes through a learning process, and I have seen far worse for layout and design. Deathshadows hints are bang-on but they might be hard for a beginner to grasp at first. Basically you want to give the center of your layout the ability to grow without affecting the edge of your box. A great way to test this is to increase the size of your fonts drastically and see if it breaks your layout. In tables, you can create a row across the bottom for your border, and put background images that repeat in cels along the sides. That way, as the center grows, the border stays intact. (That may prove to be unpopular in this board. Tables for layout are on the way out)
WOW man, this is very much apprecaited and saves a big headache for me. Thank you very much for your help! I'm going to take a look at that code and hopefully I can learn quite a bit from it as well. Thanks again Jordan
What's that? Anyway, that was a great answer if this guy wants to turn around and learn all about CSS. I didn't think he had time for that, so I showed him the simplest fix.
I think he already did the bottom part and I already told him to tile his side images as background images.
"Six corners under one roof" is a technique to do styled borders around a container using only two images, utilizing a 'trick' about background-position. It is a cousin to 'sliding doors' and 'eight corners' - the latter only working on fixed-width and/or fixed-height boxes. (for the Coordinator!!!) You put the top-left, top-right, bottom-left and bottom-right corner images in your main image in their appropriate corners - you can then place them as the appropriate background-position. You then put in the middle of your image the tiles for top and bottom - since those only repeat on the x axis you can position them using px to the top. http://battletech.hopto.org/html_tutorials/fourcorners/template.html Is an example of that in action... and taken a bit further since in two images it has six corner images and three repeat-x tiles...