Hello, I am having trouble with the code on this site. The element "#arrival" is not displaying the proper height unless I literally type code in to fill it up the full 400px. I haven't implemented any paragraph styles, I just want to get the basic elements done for this landing page. Here is the actual test site where you can see this Here is what it should look like: How would I go about fixing this? Also, do I have to "float" the "#arrival" element? I would like to have the dog house overlap the first div element of the dog jumping (#dog) like in the jpg. Any help would be greatly appreciated. Thanks in advance, Amanda p.s. here is the code directly from the source: <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="html://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The Dachsund Rescue of Houston</title> <style type="text/css"> body{ background: url(images/background.jpg) no-repeat top center;} #contain{ width: 800px; height: auto; margin-left: auto; margin-right: auto; } #menu{ width: 466px; height: 98px; float: right; margin-top: 15px; } #dog{ width: 491px; heigth: 257px; margin-top: 19px; margin-left: 22px; float: left; } /* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding" */ #community{ float: right; background: url(images/community_spot.jpg) no- repeat; width: 231px; height: 259px; margin-top: 19px; margin-right: 22px; } #arrival{ clear: right; background: url(images/arrivals.png) no-repeat; width: 800 px; height: 400 px; } p{ font-family: helvetica; font-size: 12pt; color: #000000; padding-left: 10px; margin-right: 10px; } </style> </head> <body> <div id="contain"> <div id="menu"> <a href="about.html"><img src="images/about_btn.png" alt="About button" title="About" border="0"/></a> <a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button" title="Adopt" border="0"/></a> <a href="help.html"><img src="images/help_btn.png" alt="Help button" title="Help DROH" border="0"/></a> <a href="resources.html"><img src="images/resources_btn.png" alt="Resources button" title="Resources" border="0"/></a> <a href="contact.html"><img src="images/contact_btn.png" alt="Contact button" title="Contact" border="0"/></a> </div> <div id="dog"> <img src="images/jumping.jpg" border="0"/> </div> <div id="community"> </div> <div id="arrival"> lll </div></div> </body> </html>
<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
I don't quite understand...Are you saying make the div element a photo? How come it works with the top two div elements?
Because div does not have height that is why #arrival height == height content. BTW I will make this block something as following: <div id="arrival"> <img src =../img/dog-home.jpg alt="" class="dog-home" /> <div class="header-arrival"> Your header </div> <div class="content-arrival-left"> <div class="content-arrival-right"> <div class="content-arrival"> </div> </div> </div> </div> Code (markup): <style type="text/css"> #arrival { clear:both; position:relative; } img.dog-home { position:absolute; top:10px; left:50px; } div.header-arrival { background:#58585A; } div.content-arrival-left { background:url('../img/content-arrival-left.gif') repeat-y top left; } div.content-arrival-right { background:url('../img/content-arrival-right.gif') repeat-y top right; } div.content-arrival { margin:0px 10px; } </style> Code (markup): I hope It will help you
Thanks!! I'll give this a try. Will I also be able to use the paragraph element to place text "into" the #arrival ? I have code from that someone helped me with yesterday; but I wondered if this was possible still.
I do not see any problem with it. The paragraph element has the same property as block element. tag p == tag div.