Remove space between 2 tables HTML CSS and image removes background image -
new here, creating website , there seems problem table made hold image , table made hold content. content on left image on right. when float image table right content table moves underneath it. when float left there space in between 2. code in question table , table 3. want display image block next link buttons , context block underneath buttons next image block.
the second problem logo heading image removing background image.
html code
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <link href="articlepage.css" rel="stylesheet" type="text/css"> <title>beadles beading</title> </head> <body id="wrap"> <h1><img src="logo.jpg" alt="logo"></h1> <a class="mouseover" href="home page.html"><img src="buttons/new button home unpressed.jpg" alt="home"></a> <a class="mouseover1" href="article page.html"><img src="buttons/new button pressed.jpg" alt="about_us"></a> <a class="mouseover2" href="section page.html"><img src="buttons/new button products unpressed.jpg" alt="products"></a> <a class="mouseover3" href="contact us.html"><img src="buttons/new button contact unpressed.jpg" alt="contact_us"></a> <a class="mouseover4" href="url"><img src="buttons/new button home unpressed.jpg" alt="home"></a> <table3>ad space(image)</table3> <table> <tr> <td> <b>image/content</b> <b>image/content</b> <b>image/content</b><br> <b>image/content</b> <b>image/content</b> <b>image/content</b> <br><br><br><br><br><br><br><br><br><br><br> </td> </tr> </table> <table2> <tr> <td> footer </td> <tr> </table2> </body> </html> css code
div{ text-align:left; position:relative; font-size:2.5em; font-weight:bold; } div1{ text-align:left; position:relative; font-size:1.5em; text-shadow: 2px 2px black; font-family:georgia, times, serif; text-shadow: -1px -1px black, 1px 1px; } h1{ text-align:left; font-family:arial,helvetica,sans-serif; text-shadow: 0.1em 0.1em 0.2em black; font-size:2.0em; font-style:italic; float:inline; border:3px solid black; width:800px; height:196px; padding:0; } h2{ text-align:left; position:relative; font-size:1.5em; font-family:verdana,helvetica,sans-serif; text-shadow: -1px -1px black, 1px 1px; } p{ position:relative; text-align:left; font-size:1em; font-family:georgia, times, serif; text-shadow: -1px -1px black, 1px 1px; } li { position:relative; font-size:1em; } a{ padding:0; float:left; } b{ border:3px solid black; width:180px; height:10.5em; padding:10px; float:left; } b1{ border:3px solid black; position:absolute; width:40px; height:23em; padding:10px; float:right; position: relative; } b2{ border:3px solid black; position:absolute; width:40px; height:23em; padding:10px; position: relative; } body{ background-image:url('background.jpg'); background-size: 100%; margin:20px; width:800px; padding:30px; position: relative; } .centeredimage { text-align:center; margin-top:0px; margin-bottom:0px; } table{ display:inline-block; width:640px; margin-left: auto; margin-right: auto; border-style:solid; border-width:5px; text-align:center; height:400px; padding:0; } table2{ display:inline-block; width:625px; margin-left: auto; margin-right: auto; border-style:solid; border-width:5px; text-align:center; height:50px; } td{ text-shadow: 0.1em 0.1em 0.2em black; font-family:"times new roman", times, serif; } table3{ float:right; width:150px; border-style:solid; border-width:5px; text-align:right; height:490px; padding:0; } p2{ border:10px solid black; float:rights; } select{ width:200px } #wrap{ width: 900px; margin: 0 auto; } image link. sure of should like. plus white background should have lilac image placed body background.
i think 2 main problems are:
- you using tags don't exist and
- you aren't considering width of borders when setting sizes
you set width of body 800px, first table 640px, , table3 150px. borders on both 5px wide. 640 + 10 (left , right border of first table) +10 (left , right border of second table) + 150 = 810. if tags correct they're wide go next each other.
change
<table3>ad space</table3> and
<b>image/content</b> <b>image/content</b> <b>image/content</b><br> <b>image/content</b> <b>image/content</b> <b>image/content</b> to
<div id="adcol">ad space</div> and
<div id="#imgdiv"> <img /> <img /> <img /><br /> <img /> <img /> <img /> </div> in css change "b" "#imgdiv img", "table" "#imgdiv", , "table3" "#adcol". either reduce width of borders or make 1 of them @ least 10px smaller in width.
don't forget remove table2 tag , change whatever you've called b1 , b2 use real html tags , change b1 , b2 in css class names or ids.
also, consider not setting width of body. don't need that.
Comments
Post a Comment