|
HTML - Spacing Beside Images
Hello
I have an image in my html page, 'aigned left', and the text is pressed right againt the edge, almost no space at all. Now I have a border on the image, so if I play with "H space" it spaces with the border too, which is a pain. how can I put a space so the text isn't right against the border? If you say CSS, I know very little about css, so would need some guidance. Thank you. Similar TutorialsI have a problem with my banner. the images have gaps between them, so it looks tacky. Here is the Site: http://www.freewebs.com/jaceyanimation/sitetemplate.htm (I don't have any problems with the sidebar) Here is the code i made for it: HTML Code: <a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%201.PNG" border="0" alt="Jacey"></a> <img src="http://www.freewebs.com/jaceyanimation/Part%202.PNG" border="0" alt=""><br> <a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%203.PNG" border="0" alt="Home"></a> <a href="http://www.freewebs.com/jaceyanimation/about.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%204.PNG" border="0" alt="About"></a> <a href="http://www.freewebs.com/jaceyanimation/product.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%205.PNG" border="0" alt="Products"></a> <a href="http://www.freewebs.com/jaceyanimation/game.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%206.PNG" border="0" alt="Game"></a> <a href="http://www.freewebs.com/jaceyanimation/animation.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%207.PNG" border="0" alt="Animation"></a><br> <img src="http://www.freewebs.com/jaceyanimation/Part%208.PNG" border="0" alt=""> Can anyone suggest what i could do, or even better, fix the code? Hey guys. I am in the middle of making a new Mod for vbulletin and I ran into a bit of a snag. If you go to www.chosen-wow.com/forumlist.php, you will see at the top that there is a "Raid Progression" table. In that table, you will see quite a few pictures with spaces between all of them. How do I make the space between each image in a row go away? In other words, what code am I missing from the table code below? Code: <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="2">Chosen Raid Progression</td>
</tr>
</thead>
<tbody>
<tr>
<td class="alt1" width="50%">
<center><div class="progress_title">Karazhan</div>
<img src="progression_mod/kz_1_dead.jpg" width="53" height="71">
<img src="progression_mod/kz_2_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_3_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_4_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_5_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_6_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_7_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_8_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_9_dead.jpg" width="62" height="71">
<div class="progress_title">Serpentshrine Cavern</div>
<img src="progression_mod/ssc_1_alive.jpg" width="53" height="71">
<img src="progression_mod/ssc_2_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_3_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_4_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_5_alive.jpg" width="47" height="71">
<img src="progression_mod/ssc_6_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/ssc_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/ssc_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Mount Hyjal</div>
<img src="progression_mod/mh_1_alive.jpg" width="53" height="71">
<img src="progression_mod/mh_2_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_3_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_4_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_5_alive.jpg" width="47" height="71">
<img src="progression_mod/mh_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/mh_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/mh_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/mh_9_bkg.jpg" width="62" height="71">
</center>
<td class="alt1" width="50%">
<center><div class="progress_title">Outdoor & World</div>
<img src="progression_mod/wld_1_dead.jpg" width="53" height="71" border="0">
<img src="progression_mod/wld_2_dead.jpg" width="48" height="71" border="0">
<img src="progression_mod/wld_3_alive.jpg" width="48" height="71">
<img src="progression_mod/wld_4_alive.jpg" width="48" height="71">
<img src="progression_mod/wld_5_alive.jpg" width="47" height="71">
<img src="progression_mod/wld_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/wld_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/wld_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/wld_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Tempest Keep</div>
<img src="progression_mod/tk_1_dead.jpg" width="53" height="71">
<img src="progression_mod/tk_2_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_3_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_4_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_5_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/tk_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Black Temple</div>
<img src="progression_mod/bt_1_alive.jpg" width="53" height="71">
<img src="progression_mod/bt_2_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_3_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_4_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_5_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_6_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_7_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_8_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_9_alive.jpg" width="62" height="71">
</center>
</td>
</tr>
</tbody>
</table>
Thanks in advance. I've been working on a new project and I'm using tables to create a layout, I know it's not a good idea but I don't know CSS enough to use DIV's. But I have the table set up into 3 columns, and 2 rows. Top right row has images layered on top of each other for navigation... Everything works fine but the problem is there is spacing in between each of the images. They have no code in between or spacing, it is just messed up. If anyone has any idea help would be greatly appreciated. I'm sorry I can't provide a url because I'm not online yet, but here is my problem. I am trying to post a series of images with text descriptions of each image, but I can't seem to align the images so they are spaced evenly. (Basically like tabs in between the photos) I have tried the following things: <img src="party23.jpg" width="150" height="150" hspace=50>Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> what I got was the pictures separated from the text - and the next picture's placement spaced from the end of the 1st picture's text, instead of from the first picture. I have also tried this: <img src="party23.jpg" width="150" height="150">Blowing out candles <center><img src="party24.jpg" width="150" height="150">The cake</center><br> what I got was the first picture & text was fine but the 2nd was centered on a new line instead of to the right of the first picture. Then I tried: <img src="party23.jpg" width="150" height="150">Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> I might be able to get this to work...but I would have to count the spaces from the end of each text until the space where the photo needs to go so I know how many  's to insert.. and since all the text captions are different, that would be really time-consuming since there are alot of photos. Anyone able to help me find an easier way?? Any help greatly appreciated!! I've tried and tried and can't figure this one out, probably VERY easy for others. I've got a table with images and I can't figure out how to remove the spacing betwen the table rows. Here is a link http://www.4wheelcustoms.com/new%20template/index.html Notice both sides of the navagation images have horizontal spacing around them. Any help is appreciated. Hello everyone. I have been given to task to create a signature template. I am pretty new to html. I am trying to remove the vertical spacing in between the website link/phone number and job title. I have sat here playing around with it for about an hour without much luck. What can I do? --------------------------------- here is the code i am using --------------------------------- <p> <strong><font color="blue">_______________________________________________</font></strong> </p> <p style="MARGIN-RIGHT: 0px" dir="ltr"> <font color="gray" size="4" face="Arial Narrow"><font color="gray"><strong>Debra Scott</strong></font>   ; <strong><font size="2">Newmarket Chamber of Commerce</font></strong> <br /> <font size="2"><strong><em>President & Ceo & nbsp;   ; <font size="1">"Leading Businesses. Leading Communities"</font></em></strong></font><font size="4"> </font></font> </p> <font color="#808080" size="4" face="Arial Narrow"></font><font color="gray" size="4" face="Arial Narrow"> <font color="#000000" face="Times New Roman"></font><font color="#000000" face="Times New Roman"><a href="http://www.newmarketchamber.ca" target="_blank"><font color="gray" size="1" face="Arial Narrow"><strong><img class="floatLeft" style="WIDTH: 20px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=296" width="36" height="34" />Newmarket Chamber Website</strong></font></a><font size="3"><font color="gray" size="1" face="Arial Narrow"><strong> <img class="floatLeft" style="WIDTH: 24px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=299" width="36" height="34" />905 898-5900 ex. 223</strong></font></font></font> <br /> <font color="#d5d500" size="3" face="Times New Roman">_______________________________________________</font></font> </p> Hi, I am designing my first website by teaching myself HTML using google, etc, so I am very new to designing from scratch (without using Dreamweaver, etc). My webpage is not online yet, so I can't post a link - sorry! First, I am using .png image files which look great in Google Chrome, but when I check my page in IE, the images look horrible - very pixelated. Why is that, and is there a way to fix them? My only thought would be to use a "smoothed out" image such as a .jpg, however that might make the problem even worse. Second, I am using frames and in my main frame I'm using a table with text on the left column and an image on the right column. Again, in Google Chrome it looks great with the text at the very top of the frame/table, but in Firefox, there is tons of space at the top of the table which makes the text too "tall" for the window, and a scroll bar is necessary. I hope I've explained this properly and would greatly appreciate your help - I have many more questions as well! Thanks so much, Kristen 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. 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. 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! 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. i want to move and image up at least -2px is that possible in html or css? thanx in advance... hey...hope i can sort this out quickly its only a small problem.. but if you look here ... http://anastaciadreams.com/layouttest/test.html youll notice on Internet explorer theres a space in the 2 parts of the banner area, how do i remove this? Alright, I have a DIV with this as the background image: I put two textboxes over them, the first one is aligned ok but the second one is too high. How do I space them out? When I try br it goes down way too far. Here is what it looks like right now: Should I use a table? more DIVs? Or, is there a css code I could use to bring it down? So, I am working on a website for the final project for one of my classes, and while it looks fine in Firefox and Safari, there is some funky spacing in my divs/table set up with my inline frame in IE: (I have IE 7, but I would like this to work in all versions as I'm not sure what browser my professor has) http://grandmas.host-ed.net/ in IE, you will see there is a space below the top banner and another one between the footer and the border... how can I get rid of these? Here is my code (image map removed b/c it's long and unneeded for my question) Code: <html> <head> <title>Grandma Mae's Country Naturals</title> </head> <body background="bg.jpg" bgproperties="fixed"> <center> <table Cellpadding="0" Cellspacing="0" border="0"> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-top-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <img src="gcn_nav2.jpg" usemap="#mymap" border="0"> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <IFRAME name="inlineframe" src="home.html" width=854 height=350 frameborder="0"></IFRAME> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-bottom-width:3px; padding-left:0ex padding-right:0ex padding-bottom:0ex padding-top:0ex"> <img src="footer2.jpg"> </div> </td></tr></table> <font color="FFCC99" size="1" face="Georgia, Times New Roman, Times, serif"><b>This site is not affiliated with Grandma Mae's County Naturals</b></font> </center> </map> </body> </html> It's kind of improvised and I am no html expert so perhaps there is a better way to get the look I was going for? Also, I know there is some extra/unneeded code there, but it's all stuff I added when trying to fix the spacing (and it didn't work) and was too lazy to take away. haha Thanks a ton, Nathalie 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. I have a couple of really small spacing problems. my website is www.betdemon.com you will see from the pic that the spacing 1# on the left hand side is different to the spacing 2# on the right hand side and looks uneven. I want spacing 2# to be the same as 1# - how do i do this? Also you will see there is a gap between banners (3#) but this doesn't appear when viewing in Firefox - How can I make the gap appear? Thanks in advance Hello, I have a table text spacing problem. I'm trying to have two text elements (p's, spans's, whatever) stacked vertically or as close as possible underneath one of other. I cannot for the life of me remove the gap in between. I've tried margins, padding, cellpadding/cellspacing, border-collapse, and still, nothing works. I've attached an example using primitive HTML. Anyone have any ideas? The code: Code: <table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>TEXT</td>
</tr>
<tr>
<td>TEXT2</td>
</tr>
</table>
Thanks! Edit: Line-height did the trick. 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?? I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he HTML: Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact and Networking</a></li> </ul> </div> CSS: Quote: #nav { height: 37px; text-align: center; background-color: #858585; } #nav ul { margin: 0; } #nav li { display: inline; } #nav a { padding: 9px 12px 9px 12px; line-height: 38px; border-left: 1px solid black; } Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to... Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li> </ul> </div> ...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align). This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality? |
|||||||