|
HTML - Gaps Between Images. Homework Related
Part of my Dida(double i.t) course i have to make a eportfolio. It needs to be handed in this week and i am having trouble with coding my layout. I cant code layoutswith css so all im doing is pyling tables top of each other . The problem is that there gaps between each <tr>(row). How could i get rid of these gaps? The screen shot of my code and layout is attached
thanks Similar TutorialsHey, I would like some help please. I need to add links to an image. The image is the highlighted silver bar in the screenshot. Everytime I make navigations i always put the text on template in photoshop but for this one i decided to put text over the top of the background image. How would i do this because everytime I set the <td> to have the background as the image so i can put text over the top, it just disapears. Also from previous experience html formats text so its single spaced, so how would i seperate the links out? I hope you undertstand me. The screemshot is attached below thanks. Quick Background: This site was made by a private contractor, using some format that only he uses which utilizes CSS and html. I'm now editing the site myself, and I don't really know CSS, so I'm trying to make things work primarily through use of html. So on this page, http://www.thechurchofsound.com/content/music I am trying to remove the gaps between the images so that they seamlessly connect. That is not a table, it is simply image, break, image, break, image. Can it be done with simple html? I tried changing vspace and border in the img tag. Hi, I use following html to display pictures, why there are vertical gaps between pictures? any wayt to remove it? Thanks. Ac <div id="home-newmember"> <img height="250" src="/map_dir/tm_3336.jpg"> <img height="250" src="/map_dir/tm_3379.jpg"> <img height="250" src="/map_dir/tm_3158.jpg"> <img height="250" src="#"> <img height="250" src="/map_dir/tm_3116.jpg"> </div> Hi, I was wondering why I am getting a gap in firefox right below the flash header, along with by the "welcome to our company", "about our company", "company news", and "client login" images? This doesnt happen in IE, or other browsers. My website is www.niveosoft.com Hi all, I've been trying to fix this bug which won't go away. Yeah, it's basically images in tables, but before you cringe, I gotta declare that I'm using tables to display graphical data (that is, thumbnails in grids). I'm not using tables explicitly for layout. Visit the emulated-page at http://varlern.com/CrappyBug.html to see the problem. There's 4 cells. Notice that in every cell, there's some gaps at the right, top and bottom inside each cell (the left sides have no gaps). For a quick glance, below's the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tablestyle
{
table-layout:fixed;
width:740px;
border-collapse:separate;
border-spacing:3px;
}
.tablestyle tr td
{
border:1px solid black;
width:175px;
height:175px;
}
</style>
</head>
<body>
<table class="tablestyle">
<tr>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
</tr>
</table>
</body>
</html>
I've searched the forums and tried all kinds of tricks and fixes suggested for others who've encountered this before.... I've tried using "display:block" on the <img> tag, I've set the cellspacing, cellpadding, padding, margin, hspace, vspace, cols, rows, line-height, font-size and almost every dimension related tag in CSS / HTML to 0 .......but the darn thing just REFUSE to go away! I'm really angry, I tell you. Hopefully, someone can help! The problem occurs in both IE 6.0 and FF. Thanks! Xeon This has been an issue with me for a very long time and this is the first time I'm asking the help of others to help me cure the problem. Take a look at www.tenniselbowpros.com. There is an image of a girl at the top of the page. She is holding a tennis racket. The image displays in 4 individual rows within the table. The problem is, there is a gap between the 2nd and 3rd images, and 3rd and 4th, leaving white space between the images and not butting them against each other so that the image looks as though it is one. What am I doing wrong with the layout or configuration of the cells? How do I fix this problem? I created the graphic elements in photoshop, then exported the html and images from photoshop. Then opened those files in Dreamweaver. If all of the cells had remained exactly how I imported them into Dreamweaver, all images butt up against each other just fine and I have no problem. But, if I add more text which lengthens some of the cells, then the table starts to go haywire and my images start separating. Please help. thanks Look at this code: <b><br>ChildLink</br></b></address> <address>1443 Cortnic Drive</address> <address>Las Cruces NM 88001</address> <address>505-555-2371</address></h1> I am using this code, style="text-align:right"> but where do I place it because it is not working. I tried putting it before the <address> after what am i doing wrong? also the bold that i want the childlink to be is not working either please somebody help I have a quick question. I am taking a web programming class and I have my homework mostly done...EXCEPT...I can't get the labels on my checkboxes to show up...can anybody help me?? Here is the code I have written for the check boxes. Adoption:<input type="checkbox" name="Adoption" label="Required" value="Required"></input> <input type="checkbox" name="Adoption" label="Suggested"value="Suggested"></input> Any help?? Or can you at least point me in a direction so I can figure it out?? Thanks!! Mitch Hello, i am making a website for my computer class and i want some good nodpad table tags, file:///C:/Users/owner/Music/New%20Folder/page1.html Tell me if that site works if not then later today i will upload it here. I amlost done with the site. Ok, so I've been struggling trying to get this to validate successfully. Getting the following errors in this image - http://gyazo.com/54aa5ddb894be0204cc2b7a41c7d2176 Here is the code (linked to an external CSS): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Chapter 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--embedded styles-->
<style type="text/css">
h1{background-color:#eaeaea; color:#000033;}
</style>
<!--link style sheet-->
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<!--Alex Knipfer-->
<body>
<!--inline style-->
<p style="background-color:red; color:white">
This is the paragraph which the background is configured as red and the text is white. (Number 1 Page 107)
</p>
<h1>Number 2: (Embedded Style)</h1>
<p>This text if brown and Verdana Sans-Serif because of the external style sheet that this page is linked to.</p>
</body>
</html>
Thanks, help much appreciated. Hello all ! This worked fine on another design I did but now it doesn't seem to want to work today. Firefox http://img148.imageshack.us/img148/5349/screen1pe5.gif Internet Explorer http://img516.imageshack.us/img516/8704/screen2wl8.gif To the code: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Garcia's Blog</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id='navbar'>
<ul>
<li><a href='/index.html'><img src='images/navb1.gif' width='122' height='40' alt='' /></a></li>
<li><img src="images/navspacer.gif" height="42px" width="12px" alt="" /></li>
<li><a href='about.html'><img src='images/navb2.gif' width='122' height='40' alt='' /></a></li>
</ul>
<div id='navend'><img src="images/navend.gif" height="51px" width="10px" alt="" /></div>
</div>
<br/>
<div class="contentmargins">
<div id="leftcontent">
<div id="leftcontentbg">
<div id="leftconh"><h2>Welcome to my blog!</h2></div>
<br/><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus leo neque, facilisis at, nonummy eget, ultricies sed, mi. Nam ac justo id ligula elementum condimentum. Phasellus ante. Nulla justo felis, tincidunt non, dignissim at, tempor non, felis. Suspendisse tincidunt elementum sapien. Nulla in arcu. Vivamus fermentum, mauris cursus consectetuer molestie, nulla diam viverra eros, in commodo mauris sapien et erat. Donec vel leo. Quisque varius, metus ut venenatis convallis, eros lectus blandit nibh, eget viverra dolor metus nec diam. Mauris pellentesque. In hac habitasse platea dictumst. Phasellus sed ante. Fusce tempus. Quisque viverra sapien quis neque.</p>
</div>
<img src="images/leftend.gif" width="519px" height="3px" alt="" />
</div>
<div id="rightcontent">
<img src="images/navh.gif" width="241px" height="10px" alt="" />
<br/>
<div class="rightcategory"><h2>Pages</h2></div>
<p>We be doing it!</p><br/>
<div class="rightcategory"><h2>Categories</h2></div>
<p>We be doing it!</p><br/>
<div class="rightcategory"><h2>Blogroll</h2></div>
<p>We be doing it!</p><br/>
<div class="rightcategory"><h2>Meta</h2></div>
<p>We be doing it!</p><br/>
<img src="images/rightcone.gif" height="10px" width="241px" alt="" />
</div>
</div>
<div id="footer"><br/><p><a href="http://garciawebmedia.com"><img src="images/copyright.gif" width="249px" height="20px" alt="" /></a> Proudly Powered by Wordpress</p> </div>
</div>
</body>
</html>
Code: html, body {
background: #bfe9ff;
color: #57a3c2;
font: 12px verdana;
height: 100%;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
* {
margin: 0;
padding: 0;
}
div#container {
width: 800px;
background: #dff5fe;
border: 1px solid #46849e;
}
div#banner {
width: 741px;
height: 105px;
background-image: url('images/banner.gif');
}
#navbar {
height:51px;
background-image: url('images/navbg.gif');
width: 540px;
}
#navend {
height: 51px;
width: 10px;
float: right;
}
#navbar ul {
list-style:none;
}
#navbar ul li {
float:left;
margin: 4px 0 0 8px;
}
div#leftcontent {
float: left;
width: 516px;
}
div#leftcontentbg {
background-image: url('images/leftconbg.gif');
width: 516px;
}
div#leftconh {
width: 511px;
height: 37px;
background-image: url('images/leftconh.gif');
margin-left: 4px;
}
div#rightcontent {
background-image: url('images/rightconbg.gif');
width: 241px;
float: right;
}
div#rightconh {
width: 241px;
height: 10px;
background-image: url('images/navh.gif');
}
.rightcategory {
width: 227px;
height: 41px;
background-image: url('images/cate.gif');
margin-left: 10px;
}
div#footer {
display: block;
clear: both;
}
.contentmargins {
margin-left: 10px;
margin-right: 10px;
}
p {
margin-left: 10px;
margin-right: 10px;
}
h2 {
font: 18px verdana;
padding: 8px 0 0 10px;
margin-left: 8px;
margin-right: 8px;
}
Live preview: http://garciawebmedia.com/dev/blog/ Does anyone want to help me please ? If they could explain why Internet Explorer does this? I know my right content is structured differently from my left because I was trying to get the left side fixed first but it didn't work they way I wanted to. Thanks. Hi there can anyboy tell me why Firefox renders text in a table differently than IE. The table is being controlled via css and there is padding to set the text a llittle down and to the right. In IE the text renders as it should but Firefox leaves a large gap and I just cant get them to render the same. Any ideas of a working solution to this? It seems to me like it is mainly the top space which is way too much in FF. Thanks, Al. Hi all, im having a an extremely frustrating time trying to solve this. Basically, i have a series of divs stacked on top of each other, but both FF and IE render these with small one or 2 pixel gaps in between the divs. Ive included code for illustration: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Website</title> <link rel="stylesheet" type="text/css" href="styles/main.css"/> </head> <body> <div id="status"> Hello </div> <div id="container"> <div id="hp_large_splash"> <img src="img/oth.png" alt="splash"/> </div> <div id="upper_content"> sdfsdfsdfsdf </div> <div id="content_footer"> <img src="img/cont_footer.png" alt="footer"/> </div> <div id="lower_content"> </div> <div id="footer"> Hello </div> </div> <div id="disclaimer"> Disc </div> </body> </html> CSS: Code: html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
/*background: white;*/
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
html, body {
background-color:#505564;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
padding:0;
margin:0;
color:#fff;
font-family:Arial, sans-serif;
}
#status
{
width:100%;
background-color:#3b4152;
height:18px;
}
#container
{
width:900px;
margin-left:auto;
margin-right:auto;
color:#333;
}
#container div
{
margin:0;
padding:0;
}
#top
{
margin-top:50px;
width:900px;
}
#nav
{
margin-top:20px;
width:900px;
}
#nav_leftstop, #nav_rightstop
{
float:left;
}
#upper_content
{
background-color:#FFF;
}
#hp_large_splash
{
margin-top:20px;
}
#content_footer
{
height:10px;
}
#disclaimer
{
width:100%;
background-color:#3b4152;
height:60px;
}
/*Classes*/
.navitem
{
float:left;
width:880px;
background-color:#fff;
height:50px;
}
.cleardiv
{
clear:both;
}
Ive included an image he http://www.cumbriawebsolutions.co.uk/untitled2.png to demonstrate my problem a bit better. Any help would be appreciated. thanks When i look at the website on my computer, no gap, but when i upload it online i get a big gap between the menu bar and the content: http://boburob.50webs.com/test/index.html http://boburob.50webs.com/test/testcss.css Thank you for any help! PS ignore the content, i need to learn html and css and i suck at coming up with ideas lol Hi Anyone I'm a novice at HTML, just beginning and have built a template page for my son, but I have 'gaps' inbetween sections of my layout within the table and cannot work out why. Can anyone help? You can see this template at the following address: http://www.private-chef.co.uk/home4.html. Appreciate any guidance on how I fix this. THanks Hi, when I create a table and set images as the background in each cell, there is a gap between each cell so the images don't link up. I think this is where the border would be. Can anyone help me get rid of these gaps? thanks hi there, this is the link to a layout i;m going to use, but there is gaps between the navigation at the top, and also a gap between the top affiliates on the left column... can someone take a look please? http://www.anastaciadreams.com/NEWLA...nastaciadreams This web page has 3 things on it, when viewed: Choose A Transaction Transction Type and the button: Next And these things all have over an inch of space between them. Can you please help me close the gaps between the lines Choose A Transaction and Transaction Type. And can you please help me close the gap between Tansaction Type and "next" icon? Thank you. Code: <table width='770' border='0' cellpadding='0' cellspacing='0' id='maintable' align='center' valign='top' align='left' margin=0 padding=0 width='770' height='500' table style='background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:'770' height:'500'></td> <link href='custom.css' rel='stylesheet' type='text/css'> <td id='menu' align='left' valign='top' rowspan='500' width='164'> <br> <img src='images/bullet.gif' alt='' width='10' height='10'><a href='index.php'><font color='#DDCEA2'><font face='Arial' size='2'>Home</a></font><br></a> <form method="POST" action="index.php"> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='renew'> <input class='field' type='hidden' name='account_id' value='[account_id]'> <td colspan='2' class='pageTitle'><div class='hLine' display:inline;><font face="Arial" color="#EE7600" size="3"> Choose a Transaction</font></div></td> <tr><td class='fieldLabel' width="30%"><font face="Arial" color=#000000" size="3" Style="padding: 5px;"> <font face="Arial" color="#000000" size="3"> Transaction Type:</font><!--</td>--> <td align="left"><font face="Arial" color="#EE7600" size="2">[account_type_panel]</font></td> <tr><td align="center"></td> <td align="left"><input name="submit" type='submit' class='button' value='Next' /></td> </tr> </form> <tr height='30%' ><div class='hLine'display:inline;></div></td></tr> </table> Hey guys, im a noob at html, but im a graphic designer so decided to put my own site together. i used dreamweaver to make the code but have come across a problem. www.londonjam.co.uk in firefox, everything is ok, but in explorer there are gaps. just below the email address and at the bottom of the p on portfilio. Could someone please help me as i need to promote my site, but want it looking correct before i do Thanks Dan Theres a gap bewtween my flash movie in a td and the td below. Its works perfectly in firefox just not in ie. I hve attached a screen shot of the problem in ie, thanks Code: <html>
<head>
<style type="text/css">
img
{
border: none;
}
.content
{
padding: 30px 30px 20px;
}
.nav
{
padding: 10px 22px 6px;
font-size: 12px;
}
.mnav
{
border: none;
}
/* link styles.. */
a:link
{
color: #000000;
text-decoration: none;
}
a:visited
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #FFFFFF;
text-decoration: none;
}
</style>
<title> Index </title>
</head>
<body background="images/bg.jpg"><table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="652" height="69"><object width="652" height="69">
<param name="movie" value="images/banner.swf">
<embed src="images/banner.swf" width="652" height="69">
</embed>
</object></td>
</tr>
<tr>
<td class="mnav"><a href="Index.html"><img src="images/eportfolio-v1_04.gif"></a><a href="Publications.html"><img src="images/eportfolio-v1_05.gif"></a><img src="images/eportfolio-v1_06.gif"><a href="Evidence.html"><img src="images/eportfolio-v1_07.gif"></a><a href="Review.html"><img src="images/eportfolio-v1_08.gif"></a></td>
</tr>
<tr>
<td height="35" background="images/eportfolio-v1_09.gif" class="nav">
<!-- -->
</td>
</tr>
<tr> <td background="images/eportfolio-v1_10.gif" class="content" size=100% valign="top">
<p><font color="#FFFFFFF">Welcome to my Dance O' Clock Eportfolio! <br>
<br>
The Eportfolio is a showcase of all the work I have made throughout the Dance 'O Clock project. <br>
Evidence of the publications and a review of the whole project is also included in the eportfolio. <br>
<br>
The Eportfolio is best viewed in the Firefox browser with a resolution of 1440 * 900!</font></p>
<hr color="#969696" width="540"> <Br>
<p><font color="#FFFFFFF"><u>Required Information</u></font></p>
<font color="#FFFFFFF">Name: Richard Dyson</font> <Br>
<font color="#FFFFFF">Age: 14 </font> </br>
<font color="#FFFFFF">SPB title: Dance o'Clock Level 2 </font> <Br>
<font color="#FFFFFF">Registration number: 68751</font> <br>
<font color="#FFFFFF">Center name: Whitchurch High school</font> <br>
<font color="#FFFFFF">Center number: .....</font> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p></td>
</tr>
</table>
</body>
</html> |
|||||||