JasperIk 0 Report post Posted December 7, 2006 (edited) So i usually work in notepad, or frontpage but i was using dreamweaver instead because i wanted to see the difference and i like it better than frontpage and all. But as usual i cant get anything to work. I wanted the table to be over the images [the second image was going to be a table under the first picture, but i couldnt allign it right and there kept being a gap] i took the table out . http://forums.xisto.com/no_longer_exists/ is the link to the page <!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> </head> <body> <style type="text/css"> body { background-color: #111840; } </style> <div align="center"><img src="zooey1.jpg" alt="zooey" /> alt="zooey1" width="630" height="563" align="absmiddle" /></div> <div align="center"><img src="thebody.jpg" alt="body" /> alt="thebody" width="630" height="802" align="absmiddle" /> <span class="style1"></span> </div> </body> </html> Oh and this is kind of how i want it to look : http://forums.xisto.com/no_longer_exists/404.png Edited November 16, 2016 by OpaQue (see edit history) Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted December 7, 2006 First thing to do is correct the closing of the image tag. Remove the characters "/>" in the middle of the image code, just before the alt=. <div align="center"><img src="zooey1.jpg" alt="zooey" alt="zooey1" width="630" height="563" align="absmiddle" /></div> <div align="center"><img src="thebody.jpg" alt="body" alt="thebody" width="630" height="802" align="absmiddle" /> And I am wondering if the table can be given a coloured background instead of the jpg? That would also make the page load quicker.I will try something and post back again, shortly.Here is some code using the colour background on a div. The Image could also be placed there.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd xmlns="http://www.w3.org/1999/xhtml<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css">body { background-color: #111840; }#main { background-color: #eeeeee; width: 621px; margin-left:auto; margin-right:auto; text-align:center;margin-top: 1em;/* remove this margin to erase the bue band between the div's */}td { width: 100px; }</style></head><body><div align="center"><img src="zooey_files/zooey1.jpg" alt="zooey1" width="630" height="563" align="absmiddle" /></div><div id="main"><table ><tr><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td></tr><tr><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td></tr><tr><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td></tr><tr><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td><td> 1 </td></tr></div></body></html> Admittedly, the table is a little weak, but it is ony a sample. Where did thebody.jpg go to??? Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted December 7, 2006 Here you go jasper it it more align with the css, the set up is easy to understand the only thing you need to remove once your all done is the border.The reason I put the border there is that then you know where to begin the text and the rest of the content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css">html, body{ background-color: #111840; margin:0; padding:0; text-align:center; } .wrapper{ position:relative; top: 20px; width:100%; text-align:left; margin-left:auto; margin-right:auto;} .div1 {background: url("zooey_files/zooey1.jpg"); background-repeat: no-repeat;position:relative; top: 20px; left: 200px; padding: 0px; margin: 0px 0 0px 0; width: 631px; height: 563px; border-bottom:solid 1px; }.div2 {background: url("zooey_files/thebody.jpg"); background-repeat: no-repeat; position:relative; top: 20px; left: 200px; padding: 0px; margin: 0px 0 0px 0; width: 631px; height: 802px; }.content { position:relative; top: -10px; left: 0px; text-align:left; margin-top: 0px; margin-left: 10px; color: #000000; width: 100%; height: 802px; } <!-- TABLE --> table.servicesT{ font-family: Verdana;font-weight: normal;font-size: 11px;color: #404040;width: 320px;background-color: #fafafa;border: 1px #6699CC solid;border-collapse: collapse;border-spacing: 0px;margin-top: 0px;}table.servicesT td.servHd{ border-bottom: 2px solid #6699CC;background-color: #BEC8D1;text-align: center;font-family: Verdana;font-weight: bold;font-size: 11px;color: #404040;}table.servicesT td{ border-bottom: 1px dotted #6699CC;font-family: Verdana, sans-serif, Arial;font-weight: normal;font-size: 11px;color: #404040;background-color: white;text-align: left;padding-left: 3px;}.servBodL { border-left: 1px dotted #CEDCEA; }<!-- END TABLE --></style></head><body><div class="wrapper"><div class="div1"></div><div class="div2"><div class="content"><table summary="Services, or Links box template" class="servicesT" cellspacing="0"><tr><td colspan="2" class="servHd">Services or Links box template</td></tr><tr> <td><a href="#">Onesey</a></td> <td class="servBodL"><a href="#">Twosesy</a></td></tr><tr> <td><a href="#">Scary FUD</a></td> <td class="servBodL"><a href="#">Navigate the Hierarchy of Fear</a></td></tr><tr> <td><a href="#">About Us</a></td> <td class="servBodL"><a href="#">World Class Talent</a></td></tr><tr> <td><a href="#">See it NOW!</a></td> <td class="servBodL">Staff Attrition <a href="#">Statistics</a>/<a href="#">Status</a></td></tr><br /></table></div></div></div></body></html> EDIT-I DID some more updates to it added a small table to show were you would want to start roughly in content but you can erase the the table and go from there.EDIT #2-Ok After realizing some alignment problems it's fix now so any browser set at 1024x768 will see it without scrolling left or right Share this post Link to post Share on other sites
JasperIk 0 Report post Posted December 7, 2006 (edited) After using SM's code (i couldn't figure out jhaslips... ) it looks like this: http://forums.xisto.com/no_longer_exists/ but i need help with getting rid of that little box at the bottom and/or moving it to my advantage. Edited December 7, 2006 by JasperIk (see edit history) Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted December 7, 2006 Finally figuring out what table you were talking about I adjusted the code as such. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css">html, body{ background-color: #111840; margin:0; padding:0; text-align:center; } .wrapper{ position:relative; top: 20px; width:100%; text-align:left; margin-left:auto; margin-right:auto;} .div1 {background: url("zooey_files/zooey1.jpg"); background-repeat: no-repeat;position:relative; top: 20px; left: 200px; padding: 0px; margin: 0px 0 0px 0; width: 631px; height: 563px; }.div2 {background: url("zooey_files/thebody.jpg"); background-repeat: no-repeat; position:relative; top: 20px; left: 200px; padding: 0px; margin: 0px 0 0px 0; width: 631px; height: 802px; }.content { position:relative; top: -10px; left: 0px; text-align:left; margin-top: 0px; margin-left: 10px; color: #000000; width: 100%; height: 802px; }#navcontainer { position:relative; top: 383px; left: -23px; margin: 0px 0 0 43px; padding: 0; height: 0px;}#navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center;}#navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0;}#navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #f5d7b4; border-left: 1px solid #f5d7b4; border-bottom: 1px solid #f5d7b4; border-right: none; padding: 0; margin: 0 0 10px 0; color: #f5d7b4; text-decoration: none; display: block; text-align: center; font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;}#navcontainer ul li a:hover { color: #930; background: #f5d7b4;}#navcontainer a:active { background: #c60; color: #fff;}#navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff;} .table { position:relative; top: -804px; left: 323px; background-color: #111840; text-align:left; margin-top: 0px; margin-left: 10px; color: #FFFFFF; width: 241px; height: 200px; }.table1 { position:relative; top: -794px; left: 323px; background-color: #111840; text-align:left; margin-top: 0px; margin-left: 10px; color: #FFFFFF; width: 241px; height: 200px; }.table2 { position:relative; top: -784px; left: 323px; background-color: #111840; text-align:left; margin-top: 0px; margin-left: 10px; color: #FFFFFF; width: 241px; height: 200px; }.table3 { position:relative; top: -774px; left: 323px; background-color: #111840; text-align:left; margin-top: 0px; margin-left: 10px; color: #FFFFFF; width: 241px; height: 165px; }</style></head><body><div class="wrapper"><div class="div1"> <div id="navcontainer"> <ul id="navlist"> <!-- CSS Tabs --><li id="active"><a id="current" href="Home.html">Home</a></li><li><a href="Products.html">Products</a></li><li><a href="Services.html">Services</a></li><li><a href="Support.html">Support</a></li><li><a href="Order.html">Order</a></li> </ul> </div></div><div class="div2"><div class="content"></div><div class="table">TEST</div><div class="table1">TEST</div><div class="table2">TEST</div><div class="table3">TEST</div></div></div></body></html> I added enough boxes to cover the length of the bottom image.Am I to assume you plan on having your content box expand as well?EDIT #1 I added in a mini nav can change the colors later, added in some test so you know where to put in. Share this post Link to post Share on other sites
