DH Templates - CSS? Help with adding pictures? Thanks for the help?

CSS? Help with adding pictures? Thanks for the help?

So I'm currently working on CSS coding on textpad and I'm trying to have a image gallery ( like in this link: http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements) in the center content (where the example text are at) Can someone tell me where to put the code at? Thats the code im trying to put in: .thumbnail { float:left; width:110px; height:90px; margin:5px; } </style> </head> <body> <h3>Image Gallery</h3> <p>Try resizing the window to see what happens when the images does not have enough room.</p> <img class="thumbnail" src="http://i872.photobucket.com/albums/ab282/Doodlerx3/fjth.jpg" width="107" height="90"> <img class="thumbnail" src="http://i872.photobucket.com/albums/ab282/Doodlerx3/fjth.jpg" width="107" height="80"> This is the code I have right now: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <title>Dramas(:</title> <style type="text/css"> /*Container Settings*/ div.container { font-family:"arial",veranda; position:absolute; top:1.5em; left:13em; width:50em; height:55em; margin:0px; border:1px solid #000000; line-height:100%; font-size: 1em; } /*h settings*/ h1 {color:#000000; font-size: 200%} h2 {color:#ff0000; font-size: 150%} h3 {color:orange; font-size: 125%} h4 {color:#ff0000; font-size: 100%} /*p settings*/ p { color:orange; font-size: 100%; } p.leftsidebar { color:#FF8C00; font-size: 80%; } p.centercontent { color:orange; font-size: 80%; line-height:125%; } p.rightsidebar { color:#ff0000; font-size: 80%; } /*list*/ ul.square {padding-left:1em; list-style-type:square; font-size: 80%;} /*links */ a:link {text-decoration:none; color:white} a:visited {text-decoration:none; color:#484848} a:hover {text-decoration:none; color:#ff0000} a:active {text-decoration:none; color:#484848} /*div settings*/ div.header { width:50em; height:5em; background-color: #FF8C00; padding:0em; color:white; } h1.header { text-align:center; padding:1em; margin:0em; font-size: 200%; color: white; } /*Left Sidebar*/ div.leftsidebar { position:absolute; top:5em; left:0em; background-color: #70B8FF; width:10em; height:50em; margin:0em; padding-top:0em; padding-bottom:.0em; padding-right:.5em; padding-left:.5em; line-height:125%; z-index:1; } /*Right Sidebar*/ div.rightsidebar { position:absolute; top:5em; right:0em; background-color:#C2A3FF; width:10em; height:50em; margin:0em; padding-top:0em; padding-bottom:0.0em; padding-right:0.5em; padding-left:0.5em; line-height:125%; z-index:1; } /*Center Content*/ div.centercontent { position:absolute; top:5em; left:10.93em; right: 10.93em; height:47.75em; border:1px; padding-top:0em; padding-bottom:0.0em; padding-right:0.5em; padding-left:0.5em; line-height:125%; z-index:3; } /*p Footer*/ div.footer { position:absolute; bottom:.0em; left:0em; right:0em; height:1.5em; padding:0.5em; font-size: 75%; border:0px solid; color:white; background-color:black; z-index:2; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">Something</h1></div> <div class="leftsidebar"><p class="leftsidebar"> <ul class="circle"> <li><a href="about.template.html">About</a></li> <li><a href="contact.template.html">Contact</a></li> <li><a href="page1.template.html">Page 1</a></li> <li><a href="page2.template.html">Page 2</a></li> </p></div> <div class="centercontent"> <h3>Home</h3> <p class="centercontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor quam, dictum in fermentum sit amet, elementum sed purus. Sed sed dapibus nisi. Nulla facilisi. In imperdiet enim at metus posuere sit amet blandit felis facilisis. Sed a arcu in elit tincidunt adipiscing ut nec metus.</p> </div> <div class="rightsidebar"><p class="rightsidebar">Text goes here</p></div> <div class="footer">Blank </div> </div> </body> </html>

Public Comments

Why should we tell YOU where to put the images? YOU are the one making it after all. The Most I can give you is inside the <body> tags (for the images) and just include the CSS in the <style ...> tag in the <head> section. If you want the images to appear udner "home", then place it inside the <p> tag under it. The entire site corresponds to the HTML. If you do not understand the HTML for your site, you are going to have a difficult time designing it. I'm not going to bother telling you tutorials since you are already well aware of one (w3schools), which is a very good tutorial. Ultimately, it is up to you where you would like to place the gallery on your site. Good Luck! If you need further assistance/advice, feel free to contact me.