|
HTML - Spacing In 'jigsaw' Image
Hi everyone,
I'm very new to html and I'm trying to create a landing page for my website. I've cut an image into 5 peices and converted it to html through photoshop. The only problem is that there are unwanted spaces between in ever row of the picture. The link is: http://thomasfoolery.com.au/landing-page/ At the top you will find the raw code spat out by hotoshop. Under it is the cleaned up version with the proper links added to the images. You will see that there are spaces in between the rows. I would REALLY appreciate anyones help!!! Thanks Similar Tutorialsi want to move and image up at least -2px is that possible in html or css? thanx in advance... Im trying to create a simple thing for my business. What im trying to do is have the image of each of my employees and under it have their name and other info. I want the images side by side with some space and able to put their info under it. Can someone help me with a html code? thanks! ok, the website is http://brett.unixpod.com (its my personal website) i want the top banner to contact with the navigation bar. the problem is when i remove the padding the text goes out of line, but then the menu contacts with the picture. The css stylesheet is he brett.unixpod.com/css/home.css if you dont understand what i mean by anything, ill try to explain, for heaven sakes, im only 14 years old, im still afraid of the boogie monster!!! Hi, i've been trying to solve a problem for the last couple of hours and it is driving me mad, I can't find any help anywhere on the web so thought I would give this a whirl! After placing an image map on my page, I added another image below it, but there is a tiny black vertical gap (black being the bg color) between them. I have tried changing the location of the <br> tag in the script, have tried aligning and pretty much everything else obvious and I have no idea how to make them touch each other. Any help would be appreciated. The page can be seen at: http://jask.freehostingcloud.com/contactjask.html the annoying gap is between the navigation bar and the largest image. This appears to only be a problem in IE (i'm running version 8 on Vista) my code (which you can ofcourse view for your selves but i'll save you the time) is - <body vlink="#ff0000" alink="#ff0000" link="#ff0000" bgcolor="black"> <CENTER> <br> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90¤cy_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" target="-blank"> <img src="http://jask.freehostingcloud.com/jaskgif.gif" width="907" border="0"></a><br> <img src="http://jask.freehostingcloud.com/gobar.JPG" height="55" border="0" useMap=#purple border=0><MAP name=purple border="0"> <area shape="rect" coords="86,7,210,43" href="http://www.jaskgames.com" alt="Jask!" title="Jask!"/> <area shape="rect" coords="257,8,381,44" href="http://jask.freehostingcloud.com/aboutjask.html" alt="All about Jask!" title="All about Jask!" /> <area shape="rect" coords="427,9,586,45" href="http://jask.freehostingcloud.com/contactjask.html" alt="Contact us about Jask!" title="Contact us about Jask!" /> <area shape="rect" coords="631,8,806,44" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90¤cy_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" alt="Buy your own game!" title="Buy your own game!"/><br> <TABLE background="http://jask.freehostingcloud.com/mainybar.jpg" valign="top" width="907" height="445" cellpadding="0" cellspacing="0"> <TR><td width="320" valign="top"></td> <TD valign="top"><br><br> <font face="arial" color="white"><center> <form method="post" action="http://www.emailmeform.com/fid.php?formid=706822" enctype="multipart/form-data" accept-charset="UTF-8"><b><font face="arial" color=black></font> <div style="" id="mainmsg"> </div><br><font face="arial" color=black>Your Name: </font><input type="text" name="FieldData0" size="20"><br><br><font face="arial" color=black><b>Your Email Address: </font><input type="text" name="FieldData1" size="20"><br><br></font><textarea name="FieldData2" cols="44" rows="6"></textarea><br><br><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"><br></form> <b><font face="arial" color=black><b>Thankyou for getting in touch, We will respond to you<br> shortly. Alternatively, contact us directly by email:<br> <a href="mailto:info@jaskgames.com">info@jaskgames.com</a> </b> </TD></tr> </TABLE align="left"></map> </body></html> Many thanks in advance for any help, i'm totally stuck Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
Hello Everyone: I am a novice HTML user - I use it to create a Help file (for an MS/Access database), using HTML Help Workshop. My question concerns line spacing, using the following code: <b><u>Server:</u></b> <ul> <li>First List item...</li> </ul> Using this code, there will be a blank line between "Server" and "First List item...". Is it possible to eliminate this line and have the list start in the next line after "Server"? Thanks. . . Tony N. Ok so I'm learning along the way by playing around with what my web designer started. I'm having trouble working out what part of the html does the spacing between my text and the input box. Here's what I'm stuck at: You can see how where it says 'click for more fonts' the box isn't in line with the others. Any help would be much appreciated.... I'm starting to go cross-eyed lol. Alright i'm having a little trouble. When I add stuff to the side boxes, they are farther down then i want them to be, here is a pic: I'm wanting to move it up some, but I don't know how, I have been trying for a long time though. Here is the HTML Code: Code: <div class="box2 margin1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <h3><span><span>Partners</span></span></h3> <div class="indent2"> <center><a href="http://www.elitepvpers.de"><img src="http://img230.imageshack.us/img230/2364/31421454.png" border="0"></a></center> <center><a href="http://www.4botters.com"><img src="http://img814.imageshack.us/img814/2599/88029646.png" border="0"></a></center> <div id="vent"><div style="font-weight: bold; font-size: 12px; text-align: center;"><a href="ventrilo://94.75.238.76:4696/servername=EQGVent" style="text-decoration: none;"></a></div></div> </div> </div> </div> </div> </div> </div> </div> </div> Here is the CSS: Code: .box2 {background:#bec2c5 url(images/box2-bottom-tail.gif) bottom repeat-x;}
.box2 .tail-right {background:url(images/box2-right-tail.gif) right repeat-y;}
.box2 .corner-right-bottom {background:url(images/box2-corner-right-bottom.gif) right bottom no-repeat;}
.box2 .corner-left-bottom {background:url(images/box2-corner-left-bottom.gif) left bottom no-repeat;}
.box2 .corner-right-top {background:url(images/box2-corner-right-top.gif) right top no-repeat;}
.box2 .corner-left-top {background:url(images/box2-corner-left-top.gif) left top no-repeat; width:100%;}
.box2 .indent {padding:4px 6px 6px 4px;}
.box2 .indent2 {padding:15px 12px 0px 6px;}
Any help will be greatly appreciated. Thank you. Hey folks... I've searched and searched for an answer for this, but with no luck. Probably because I don't know how to exactly describe my problem. Anyway, the issue is my page is displaying differently in IE and Firefox (surprise!). The spacing between the top image and the body divs are different. I'm not sure if it's an HTML issue or a CSS one. The page in question is: http://www.project-43.com/ The CSS file is he http://project-43.com/images/style.css It displays the way I want it too in Firefox. If you look at it in IE, you'll see the top image looks short, but that is because the spacing between the left menu area and the body on the right is too big. I appreciate any pointers that you might be able to offer. Thanks! I am having 2 issues with html coding, First off here ****HIT MUTE OR TURN VOLUME DOWN BEFORE CLICKING**** MY tables are too close together and i can not figure out how to space them out. Secondly on the first table (the hockey playoff bracket) I want to center the text but when i try to use the only align=center(or something like that i have it used in the table below) it clears out the next cell, removing the bracket. Can you help me fix these 2 issues please. Thank You tech-chef In static FBML (which takes HTML) how do you decrease the spacing after the </p> tag? I have a heading and a subheading that and am separating the two via </p> but the spacing is too much. I can increase, but can't decrease it. I've got a scanned in document that has been processed by OCR - Omnipage - and saved as html. The paragraphs often list five or six items. Most of the paragraphs are single space but some are double spaced. In the original all are single spaced. I would like them all to be single spaced. The code seems very complicated with 'spans' and 'divs' and 'box' and 'style' and long lists of parameters repeated frequently. Too frequently I imagine, machine generated stuff, but I'm not an html coder. The point is I couldn't figure out for the life of me what it was that caused one para to be double spaced and another to be single spaced. Here's a sample of the code that causes double spacing (hope its okay to put snippets of code in these posts, moderator? ) <p><span style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">* To be informed of, and involved in, Centre Management and practices;</span></p> <p><span style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">* To have accessibility to information about the Centre through written policies and programs; and </span></p> <p><span style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">* To be provided with support and assistance in the parenting role. </span></p> <p style="margin: 4.8px 0px 9.6px 9.6px; background-color: rgb(255, 255, 255); text-align: left; text-indent: 0px; line-height: normal;"> </p> </div> <div class="Box" style="border: 0pt none rgb(255, 255, 255); background-color: rgb(255, 255, 255); width: 549.65pt; left: 99.15pt; top: 1107px; height: 192px;"> <p What I'm planning to do now is copy the whole section and paste to notepad to get rid of all html and then pick it up again and put it back into html. I've tried NVU, Frontpage and Dreamweaver and I can't find a way in any of them to simply strip out all the crap and - obviously - I can't find a way to strip out this double spacing thing. regards, ab http://www.mattburnsey.com/test.htm I'm having trouble getting the tv and the mirror to stay connected. I should have room to widen the tv iframe a little more and I've tried cellspacing and cellpadding. What am I not trying that I should be? Thanks. Alright, so am finally trying to learn PHP...but I am using <?php include('header.html'); ?> For the header/footer...and it seems as if the problem is via html instead of the php...so I hope this posted in the right area... The code for the header is this (as you can see I sliced in Imageready): Code: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (mkdc4header.psd) -->
<table id="HeaderTable" width="920" height="84" border="0" cellpadding="0" cellspacing="0" style="padding-left:3px; padding-bottom:0px">
<tr>
<td rowspan="4">
<img src="http://www.webmaster-talk.com/images/header_01.gif" width="70" height="84" alt=""></td>
<td rowspan="2">
<img src="http://www.webmaster-talk.com/images/header_02.gif" width="135" height="43" alt=""></td>
<td colspan="7">
<img src="http://www.webmaster-talk.com/images/header_03.gif" width="639" height="32" alt=""></td>
<td rowspan="4">
<img src="http://www.webmaster-talk.com/images/header_04.gif" width="76" height="84" alt=""></td>
</tr>
<tr>
<td>
<a href="/index.php"><img src="http://www.webmaster-talk.com/images/header_05.gif" alt="" width="87" height="11" border="0"></a></td>
<td>
<a href="#"><img src="http://www.webmaster-talk.com/images/header_06.gif" alt="" width="74" height="11" border="0"></a></td>
<td>
<a href="http://www.moizkhan.com/blog"><img src="http://www.webmaster-talk.com/images/header_07.gif" alt="" width="80" height="11" border="0"></a></td>
<td>
<img src="http://www.webmaster-talk.com/images/header_08.gif" alt="" width="121" height="11" border="0"></td>
<td>
<a href="#"><img src="http://www.webmaster-talk.com/images/header_09.gif" alt="" width="87" height="11" border="0"></a></td>
<td>
<a href="#"><img src="http://www.webmaster-talk.com/images/header_10.gif" alt="" width="85" height="11" border="0"></a></td>
<td>
<img src="http://www.webmaster-talk.com/images/header_11.gif" width="105" height="11" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="http://www.webmaster-talk.com/images/header_12.gif" width="774" height="25" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="http://www.webmaster-talk.com/images/header_13.gif" width="774" height="16" alt=""></td>
</tr>
</table>
The problem only exists in IE7 (haven't checked IE6...but I have checked in Firefox and Opera and they seem fine...so any ideas? Live Demo: http://www.moizkhan.com/mkdc4php/ I've goggled around already and implemented a few solutions, but I can't find anything that will solve it. The page I'm having problems with is he http://www.team1225.com/bio.php Towards the bottom there's a member generated bios section. Each of those green boxes should be touching like the two orange boxes are touching. That's what I'm having problems with. Firefox renders the page correctly but Internet Explorer struggles to. I've spent a couple of hours narrowing down the problem. Sorry if the html output is hard to read, its php generated. Code: <h3 class="bio" id="1bio"><p class="biot">Brian <img class="rank" src="img/prog.png"/></p></h3>
<div id="biobr" class="content">
<table border='0' cellspacing='0' cellpadding='0' width='100%'>
<tr>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
</tr>
<tr>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
</tr>
<tr>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
</tr>
</table>
<hr align='center' style='height: 1px; overflow: hidden; line-height:1px; border-bottom: 0px; width: 80%; color: #808080;'/>
<p align='center' style='color: #808080;'><i>Comment:</i></p>
<p style='color: black; margin: 1em; border: 1px solid #808080;'>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</p>
</div>
</div>
The css for div.content is: Code: div.content {
margin: 0px auto;
background-color: white;
color: black;
width: 80%;
}
The <div id="biobr" class="content"> part is the div field that opens and closes that holds the bio for the user. This javascript action is not related my problem. If I take out all the p, div, and hr tags in that <div id="biobr" class="content"> tag it works and all the green boxes are touching under Internet Explorer. Firefox keeps working like it always does. I've seen problems discussed like this so I think there's a fix. Thanks for any help, Alex I want to remove the space between the top frame and the main frame, but the div on the main frame doesn't start on the top of the frame... http://black1c3.awardspace.com how can i do it?? Hello all, I have recently swapped from IE to Firefox, and realised in the process that my navigation bars have excessive spacing when displayed through firefox. The site is http://www.aboutfarthings.co.uk I have had a try but keep messing up the formatting. The site was created/is edited using Namo Web Editor 6.0 , and the nav bars are Namo standard bars. Any help/advice appreciated. Colin G. I am a flash developer and our client wants this site to be built using mainly html, I am pretty good with html but not even close to an expert. I have built a site with Flash vertical and horizontal nav bars above and beside my html content. In Firefox and Safari the site looks perfect, however in IE6 & IE7 there is about a 5 pixel gap between my vertical menu bar and the rest of my content. I have tried everything I know to correct this problem... Any Ideas? They would be greatly appreciated.... Site Link http://www.sacreative.com/education I've set up a <ul> with some breaks between each <li>. The spacing differs between FF and IE. It seems that the first <br> is ignored by IE, but not FF. Anyone know why, or a workaround? Thanks. Hi all, I'm having a problem with trying to get a table to have a tidy border. I want the border around one td cell to join the image in the cell above it, but because there is a border around the cell the border in the cell below isn't joining with the one above, there is a white gap between the two. This is the relevant code in the html file: <table class="core"> <tbody> <!-- menu --> <tr> <td width="200px"> <table class="menu"> <tbody> <tr> <td><img src="images\menuheading.jpg" alt="Mojo Menu" border="0"></td> </tr> <tr> <td class="menumain"> Link1<br> Link2<br> Link3<br> </td> </tr> </tbody> </table> </td> <!-- main body --> <td valign="top">Test Main</td> </tr> </tbody> </table> This is the code in the css file body { vertical-align: top; font-weight: normal; font-size: 12px; color: #000000; font-style: normal; font-family: Verdana; text-align: left; margin: 0; } table.headerfooter { background-color: #000066; vertical-align: top; text-align: left; border: #000066 0px solid; width: 100%; color: #FFFFFF; font-size: 10px; text-align: center; padding: 10px; } table.core { vertical-align: top; text-align: left; border: #000000 0px solid; background-color: #FFFFFF; width: 100%; padding: 10px; font-size: 12px; } table.menu { vertical-align: top; text-align: left; background-color: #FFFFFF; width: 100%; margin: 0px; padding: 0px; } td.menumain{ border-left: #000066 1px solid; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; border-right: #000066 1px solid; border-bottom: #000066 1px solid; margin: 0px; padding-top: 0px; } td.headerfooter-left { text-align: left; } td.headerfooter-right { font-size: 10px; text-align: right; } p.menubody{ color: #FFFFFF; padding: 4px; border-left: #000066 1px solid; border-right: #000066 1px solid; } Any help would be appreciated as I'm stumped! |
|||||||