Jump to content

Help With Table Image


Epicfusion
 Share

Recommended Posts

ok so i have an img in a table and i cant get it to stop wraping. anyone know what i need to do?

<!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>USCG Station Barnegat Light || Barnegat Light, NJ</title>    <link rel="stylesheet" href="http://www.uscg.mil/global/uscg.css" type="text/css" media="screen" />    <link rel="stylesheet" href="http://www.uscg.mil/global/print.css" type="text/css" media="print" />         <script src="/global/cgMenu.js" type="text/javascript"></script></head><body><div id="pagecontainer"><!--#include virtual="\global\header.asp" --><!-- START: Column A --><div id="column-a">      <ul id="MenuBar1" class="MenuBarVertical">        <li class="navfocus"><a href="blight.asp">Station Barnegat Light</a></li>        <li><a href="assets.asp">Assets</a></li>        <li><a href="contacts.asp">Contacts</a></li>        <li><a href="About.asp">About Us</a></li>        <li><a href="reporting.asp">Reporting Aboard</a></li>        <li><a href="surfman.asp">Surfman Info</a></li>        <li><a href="command.asp">Command Info</a></li>	<li><a href="mailto:myemail@uscg.mil">Contact Webmaster</a></li>      </ul><script type="text/javascript"><!--var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"/global/img/SpryMenuBarRightHover.gif"});//--></script><!--#include virtual="\global\levels.inc" --></div><!-- STOP: Column A --><!-- START: Column D --><div id="column-d"> <table border="0" width="100%" cellpadding="7" background="images\bglogo.jpg">  <tr>   <td width="100%" valign="top">	<h1>Welcome To Station Barnegat Light</h1>		   <p class="subtitle">Guardians of the Barnegat Shoals</p>   	     <h2>Brief History</h2>	        <p>Perhaps one of the most treacherous of New Jersey's barrier island inlets,		   this central coast area suffered nearly 200 shipwrecks within a ten year period during the 1840s.		</p>		<p>Today, the crew of Coast Guard Station, Barnegat Light provides assistance to boaters		   who have trouble navigating the strong waves and shifting sands of the inlet.		</p>	     <h3>Missions</h3>           <ul>	    <li>Search and Rescue</li>                    <li>Maritime Law Enforcement</li>                    <li>Recreational Boating Safety</li>	    <li>Pollution Response</li>	    <li>Short Range Aids to Navigation</li>         </ul>   </td>  </tr> </table></div> <!-- STOP: Column D --><!--#include virtual="\global\footer.asp" --></div> <!-- STOP: Pagecontainer --></body></html>

ok yeah that is the code sorry if the code is messy.NOTE: i can only change the code on the pages div id= column a, i cant change the virtual pages.

Link to comment
Share on other sites

Look at using css for formatting tables, it will give you much greater control over your design.

<table style="border:none; width:100%; padding:7px; background-image:url('images\bglogo.jpg'); background-repeat:no-repeat;">

Have a look at http://www.w3schools.com/css/css_background.asp for more info on backgrounds with css

Edited by ProblemHelpPlease
Link to comment
Share on other sites

Have a look at http://www.w3schools.com/css/css_background.asp for more info on backgrounds with css
Thank you for the code. i was not sure if you could use the css code in the table code, i couldnt find anything liek how you coded it.still learning css, and adv html.but anyway thank you very much.i also tryed to set it up with the
<div id="">

but the site manager has thier own css pages set up they way they want all the pages to be.

Link to comment
Share on other sites

Any "style" added to an element will overide any containg div or css file. It's best if you can add the code to an external css file as it makes things easier to manage and is the "correct" way to do it. You could an internal css section in the head of the page then use a class="blah" in the div. Have a look through the css guide on w3schools, once you get your head round it you will find it very easy to use and you will have much greater control over design and layout.

Link to comment
Share on other sites

an internal stylesheet will override and external stylesheet, and an inline style will override and internal stylesheet. http://www.w3schools.com/css/css_howto.aspyou could apply the background image directly to <body> tag itself, worst case scenario.

Edited by thescientist
Link to comment
Share on other sites

Ok...what i am trying to do is add the bg image to the table only.and with the code that problemhelpplease gave me, i am sure is saposed to work, but it did not on my page. i gave me an errer on page.i will post what i have for the code now again.also i want the table to be the size of the img without having to fill the table with breaks.

<!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>USCG Station Barnegat Light || Barnegat Light, NJ</title>    <link rel="stylesheet" href="http://www.uscg.mil/global/uscg.css" type="text/css" media="screen" />    <link rel="stylesheet" href="http://www.uscg.mil/global/print.css" type="text/css" media="print" />         <script src="/global/cgMenu.js" type="text/javascript"></script></head><body><div id="pagecontainer"><!--#include virtual="\global\header.asp" --><!-- START: Column A --><div id="column-a">      <ul id="MenuBar1" class="MenuBarVertical">        <li class="navfocus"><a href="blight.asp">Station Barnegat Light</a></li>        <li><a href="assets.asp">Assets</a></li>        <li><a href="contacts.asp">Contacts</a></li>        <li><a href="About.asp">About Us</a></li>        <li><a href="reporting.asp">Reporting Aboard</a></li>	<li><a href="surfman.asp">Surfman Info</a></li>	<li><a href="command.asp">Command Info</a></li>	<li><a href="mailto:XXXXXXXXXXXX@uscg.mil">Contact Webmaster</a></li>      </ul><script type="text/javascript"><!--var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"/global/img/SpryMenuBarRightHover.gif"});//--></script><!--#include virtual="\global\levels.inc" --></div><!-- STOP: Column A --><!-- START: Column D --><div id="column-d"><table style="border:none; width:100%; padding:7px; background-image:url('images\bglogo.jpg'); background-repeat:no-repeat;"><tr><td width="100%" valign="top">	<h1>Welcome To Station Barnegat Light</h1>		   <p class="subtitle">Guardians of the Barnegat Shoals</p>   	     <h2>Brief History</h2>	        <p>Perhaps one of the most treacherous of New Jersey's barrier island inlets,		   this central coast area suffered nearly 200 shipwrecks within a ten year period during the 1840s.		</p>		<p>Today, the crew of Coast Guard Station, Barnegat Light provides assistance to boaters		   who have trouble navigating the strong waves and shifting sands of the inlet.		</p>	     <h3>Missions</h3>           <ul>	    <li>Search and Rescue</li>            <li>Maritime Law Enforcement</li>            <li>Recreational Boating Safety</li>	    <li>Pollution Response</li>	    <li>Short Range Aids to Navigation</li>         </ul></td></tr></table></div> <!-- STOP: Column D --><!--#include virtual="\global\footer.asp" --></div> <!-- STOP: Pagecontainer --></body></html>

Link to comment
Share on other sites

have tried explicitly setting the width of the table in pixels? Width, in %'s, of a div is counter-intuitive if I'm correct, as div's will only expand to the size of their content. Try setting the table to be as wide as your image.

Link to comment
Share on other sites

have tried explicitly setting the width of the table in pixels? Width, in %'s, of a div is counter-intuitive if I'm correct, as div's will only expand to the size of their content. Try setting the table to be as wide as your image.
ok i will try that, but the image is still not shoing up anymore since i have changed it. \so i guess i am super lost any and all help would be spectacular.thank you so far guys you have been a great help.
Link to comment
Share on other sites

i just noticed that the link to your image has a backwards slash instead of a forward slash.

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...