Epicfusion Posted October 27, 2009 Share Posted October 27, 2009 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 More sharing options...
ProblemHelpPlease Posted October 27, 2009 Share Posted October 27, 2009 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 Link to comment Share on other sites More sharing options...
Epicfusion Posted October 27, 2009 Author Share Posted October 27, 2009 Have a look at http://www.w3schools.com/css/css_background.asp for more info on backgrounds with cssThank 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 More sharing options...
ProblemHelpPlease Posted October 27, 2009 Share Posted October 27, 2009 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 More sharing options...
Epicfusion Posted October 27, 2009 Author Share Posted October 27, 2009 Ok i just added the code you gave me but the image is not showing up. do i need to addthe css info at the top of the page?like... <head><style type="text/css">body {background-image:url("images/bglogo.jpg")}</style></head> Link to comment Share on other sites More sharing options...
thescientist Posted October 27, 2009 Share Posted October 27, 2009 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. Link to comment Share on other sites More sharing options...
Epicfusion Posted October 27, 2009 Author Share Posted October 27, 2009 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 More sharing options...
thescientist Posted October 27, 2009 Share Posted October 27, 2009 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 More sharing options...
Epicfusion Posted October 27, 2009 Author Share Posted October 27, 2009 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 More sharing options...
thescientist Posted October 27, 2009 Share Posted October 27, 2009 i just noticed that the link to your image has a backwards slash instead of a forward slash. Link to comment Share on other sites More sharing options...
Epicfusion Posted October 31, 2009 Author Share Posted October 31, 2009 HAHAH thanks didnt even notice Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.