HTML - Hidden Server-side Include
Hi there.
The pages in question a http://www.thepeopleupstairs.com/index.html and http://www.thepeopleupstairs.com/tour.html I'm attempting to use an include to display an "upcoming shows" list beneath the Flash music player in the right column and by itself on /tour.html. It's displaying fine in Dreamweaver, but is hidden when I view it in IE and Firefox. Here's the URL of the page I'm attempting to include: http://www.thepeopleupstairs.com/showsinclude.html Any help would be appreciated. It's driving me nuts. Thank you. Similar TutorialsHi all, brand new here. A little history. I am an employee of a very small company that had a website built for them. I was given the task of updating it on a regular basis (it is for a group of movie theatres, so it is updated constantly). Well it was build 4 years ago now and the person who built it used frames. We are wanting to bring it a little up to date so I'm redesigning one at the moment that was be much more simplified. What I'm trying to accomplish is this: I want to be able to have a page that has Form - List/Menu that has the days that each theatre has movies scheduled for. Then, when that date is selected, the showtimes part of the page changes to show that dates showtimes but the rest of the page stays the same. After doing some research I THINK what I need to be using is Server Side Includes...but I'm having trouble figuring out how to get this to work. If you want an example of what I'm after you can go to any major movie theatre chain's website (like movietickets.com) and they have what I'm trying to accomplish. ANY help would be appreciated. Thanks! hey everyone. i'm taking a course in website design this semester and we've gotten to SSI which I am a bit confused over. we're supposed to have built a page with header, menu, footer and then we will be using those three on another 4 pages. so he wants us to pull the header, menu, footer code out and use it with SSI. my question is, what do i need to pull out of this code to make a SSI file that i can then bring in on various pages so they look the same on each? the site is at: http://thing.cs.usm.maine.edu/~mckenney/demo/index.html force download via server side scripting e.g. php <------ DOES ANYONE KNOW HOW TO DO THIS??? I want to have downloads on my site, but dont want to use zip files or the "right click, save as" garbage.... Introduction: Seeing as this question is brought up very often, I hope this short guide will be a destination for users seeking information about the topic. Although this is a server-side issue, those who are not aware of this fact generally seek help in HTML/XHTML, so this is where the topic will remain Note: Read the answers to Frequently Asked Questions in the next post! Hasn't this been done before? Absolutely; this is meant as a straightforward stickied version that brings a few things together and references previous threads where you can find further details. If your question is somewhere in the realm of one of these, you're in the right place: How do large websites manage their content? How do I make the same content appear in multiple pages without copy/pasting? How do I automatically update parts of different pages, without editing every file? How do I avoid duplicating code in multiple files? Is there an alternative to IFrames? The answer is using PHP Includes, SSI (Server Side Includes), or ASP Includes. Each will be discussed below. Basic Concept: Let's assume we have a basic HTML page with a few links that represent a navigation menu (we're using HTML5 markup for simplicity): Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Main Page</title> </head> <body> <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> </body> </html> This HTML page is now our basic template for subsequent pages that we create, which traditionally meant that we copy and paste our menu into each one. However, what if we end up creating 50 pages and then find out we have to add another link to the menu? Our only solution would be to add the link to each page. In order to avoid this, we separate our menu from the rest of the page like so: Code: <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> Save it in a file, and then place an include on every page where we want to display the menu: Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Main Page</title> </head> <body> code for including menu would go here </body> </html> This setup lets us update our menu file, and have the changes be immediately reflected everywhere we placed our include. The concept is most often used with things like menus, headers, and footers, but it can be used with anything and we'll now discuss how it's done in practice. Note: The attached zip contains working examples of all three methods. PHP Includes: General Requirements: Your web-hosting provider must support PHP, which most of them do. If your host does not support PHP, I would suggest switching hosts. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to run PHP. The easiest way to do this at once is by installing XAMPP. Required Filetypes: By default, servers will only parse PHP code inside files with the .php extension. Therefore, you must change the extension of any files you want to use includes in to .php (e.g. index.html becomes index.php). Although your main file must have a .php extension, you can include files with extensions such as .html, .txt, .inc, other .php files, and more. Syntax Here are two ways to include a file in PHP: PHP Code: <?php include('file_to_include.html');?> or: PHP Code: <?php include 'file_to_include.html';?> Note that you can also include full URLs if URL file-access is enabled in your server's configuration: PHP Code: <?php include("http://www.google.com/");?> Code Example: (some_page.php) Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>PHP Include</title> </head> <body> <?php include("menu.html");?> </body> </html> Server Side Includes (SSI): General Requirements: Your web-hosting provider must support Server Side Includes, which most of them do. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support Server Side Includes. If you are using Apache, you can find information on enabling SSI here. If you are using IIS, you can install Server Side Includes inside Windows Features > World Wide Web Services > Application Development Features > Server Side Includes, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse Server Side Includes inside files with the .shtml, .shtm or .stm extensions. Therefore, you must change any files you want to use includes in to have one of these extensions (e.g. index.html becomes index.shtml). Although your main file must have one of the above extensions, you can include files with extensions such as .ssi, .html, .txt, .inc, and more. Syntax Here are two ways to include a file using SSI: Code: <!--#include file="menu.ssi" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.ssi are in the same directory. Code: <!--#include virtual="includes/menu.ssi" --> Is used to specify a path relative to the web root. The above assumes that menu.ssi is located inside webroot/includes Code Example: (some_page.shtml) Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>SSI Include</title> </head> <body> <!--#include file="menu.ssi" --> </body> </html> ASP Includes: General Requirements: Your web-hosting provider must support ASP. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support ASP. If you are using Apache, you can find information on enabling ASP here. If you are using IIS, you can install ASP inside Windows Features > World Wide Web Services > Application Development Features > ASP, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse ASP code inside files with the .asp extension. Therefore, you must change the extension of any files you want to use includes in to .asp (e.g. index.html becomes index.asp). Although your main file must have a .asp extension, you can include files with extensions such as, .html, .txt, .inc, other .asp files, and more. Syntax Here are two ways to include a file using ASP (The syntax is exactly the same as SSI): Code: <!--#include file="menu.html" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.html are in the same directory. Code: <!--#include virtual="includes/menu.html" --> Is used to specify a path relative to the web root. The above assumes that menu.html is located inside web root directory/includes Code Example: (some_page.asp) Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>ASP Include</title> </head> <body> <!--#include file="menu.html" --> </body> </html> I'm having some trouble trying to get the following page to show the three link columns centered, side by side: http://centralmusic.com.previewmysite.com/links.php EDIT: for reference, the title LINK is properly centered, and the ARTIST column should be directly below that, as is seen on the contact page I've tried every trick you can find on google, but nothing seems to work while the float tag is involved, and if I remove the tag then the divs arn't side by side. I've found that if I make a containing DIV with a FIXED witdth, it will center THAT div within it's parent using the margin: 0 trick. however, the 3 interior divs still float to the left of that container div. so if the containing div is wider then the total width of the interior divs, they do not appeared center (however on this page I COULD make use of equal column widths, but it doesn't end up being FF friendly). Alright so I actually tried a couple more things after typing that last paragraph. On this page: http://centralmusic.com.previewmysite.com/gallery.php I find that what i described so far is true, however on the first page i referenced, putting a containing div around the 3 columns made no apparent difference. I'm going to start double checking my code and comparing the two pages for differences to see what I'm doing wrong (on both pages though, the goal is to have a number of divs centered vertically, side by side). If anyone has any comments or hints to help me out that'd be great, but I'll definatley be posting back later with an update once I get a chance to try a few more things. Hello, I'm using the Lytebox image script and I would like for my images to appear side by side and not vertically. This is the code that I'm using but for some reason it came out kind of odd. Website:http://www.marinaelizabeth.com/2011/...book-1_30.html Quote: <center>Click on images to enlarge and view them as a gallery.</center> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-kIL2bYltvuY/Tv5ZYiwh_PI/AAAAAAAAAWM/rajrPOgV4ok/s1600/4e8159ba888c8.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://4.bp.blogspot.com/-kIL2bYltvuY/Tv5ZYiwh_PI/AAAAAAAAAWM/rajrPOgV4ok/s1600/4e8159ba888c8.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-rQua3zWNynw/Tv5HzbTLgxI/AAAAAAAAAUs/Uk6T6DfLBTw/s1600/301041_2223476301499_1085460275_32542139_1266806142_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://1.bp.blogspot.com/-rQua3zWNynw/Tv5HzbTLgxI/AAAAAAAAAUs/Uk6T6DfLBTw/s1600/301041_2223476301499_1085460275_32542139_1266806142_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-_So5oCwC_zY/Tv5HzNghb7I/AAAAAAAAAUc/4uVJ24oiO6A/s1600/300161_2223481061618_1085460275_32542158_923192763_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-_So5oCwC_zY/Tv5HzNghb7I/AAAAAAAAAUc/4uVJ24oiO6A/s1600/300161_2223481061618_1085460275_32542158_923192763_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-NzLeC4jz9vg/Tv5Hy3xv3cI/AAAAAAAAAUQ/3q-062i7e2g/s1600/300161_2223480941615_1085460275_32542155_373340707_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://3.bp.blogspot.com/-NzLeC4jz9vg/Tv5Hy3xv3cI/AAAAAAAAAUQ/3q-062i7e2g/s1600/300161_2223480941615_1085460275_32542155_373340707_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/--K5mxuMSNDA/Tv5HywJFhvI/AAAAAAAAAUI/D5PxnOVYqtc/s1600/300161_2223480901614_1085460275_32542154_1471612777_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://1.bp.blogspot.com/--K5mxuMSNDA/Tv5HywJFhvI/AAAAAAAAAUI/D5PxnOVYqtc/s1600/300161_2223480901614_1085460275_32542154_1471612777_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-AEljI6VqRXQ/Tv5OS3ta-PI/AAAAAAAAAVc/NOdLmyO4_E4/s1600/311979_2223482901664_1085460275_32542161_509691087_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-AEljI6VqRXQ/Tv5OS3ta-PI/AAAAAAAAAVc/NOdLmyO4_E4/s1600/311979_2223482901664_1085460275_32542161_509691087_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-R27iVxEfLbM/Tv5OSf6kt-I/AAAAAAAAAVU/YQmkZr04C6w/s1600/301041_2223476421502_1085460275_32542142_204426155_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-R27iVxEfLbM/Tv5OSf6kt-I/AAAAAAAAAVU/YQmkZr04C6w/s1600/301041_2223476421502_1085460275_32542142_204426155_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-qQSPdm60jgQ/Tv5ZY-pmGXI/AAAAAAAAAWU/3F9MxBXbV7M/s200/312657_2223450300849_1085460275_32542123_217211886_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-qQSPdm60jgQ/Tv5ZY-pmGXI/AAAAAAAAAWU/3F9MxBXbV7M/s200/312657_2223450300849_1085460275_32542123_217211886_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> Thanks in advance My code looks like this:
Code: <a id="commercialadvantages" href="/link1"><span> </span></a><a id="hearradio" href="/link2"><span> </span></a><a id="viewearnings" href="link3"><span> </span></a> When I go to the live view, they come out stacked like this: But I want them side by side, not stacked. Is it the <a> code that causes them to stack? What can I change in my code to make them side by side? Thx. I am trying to edit my image viewer on my site, but for some reason it works perfectly in chrome, safari and Firefox, but IE is giving me one issue. The images are being stacked vertically (one on to of the other) rather than show up all in one row horizontally. This is making my page longer in IE and just does not look the way I want it to..Any ideas at to what could cause this? here is a link to test the issue...I have tried everything that I know how to do, but have had no success..http://www.jewelryboxavenue.com/Ocea...-Box_p_58.html Hi, I'm new to HTML can anybody help me how to place to tables side by side Hi folks, I have a table and in one cell I have two images that normally appear side by side but when an a adjacent cell (or any cell in the same row) gets too large the images end up appearing on top of one another... is there some way to force them to stay side by side? I'd rather not have a table within the cell in question although i suppose i could if there's not some html or css way to make it work. Thanks in advance, Michael Hello i am having some trouble aligning some checkboxes. I am trying to get them to sit side by side horizontally but when i do this with absolute positioning i will click the first set and it will check the second so i have to go way to the left of the first set to check mark it. Sorry for the butchered script. Thanks <div> <tr> <td height="40"> <label for="budget" class="label">Budget: From</label> <input name="budget" type="text" id="budget"> <span class="from">To</span> <label for="to" class="from"></label> <input name="to" type="text" id="to"> </td> </tr> </div> <tr> <td> <input name="boxesh" type="checkbox" id="home" value="walkdis"> <label for="home" class="checkboxes">Home</label><br> <input name="boxesb" type="checkbox" id="BoatDock" value="walkdis"> <label for="BoatDock" class="checkboxes">Boat dock</label><br> <input name="boxesv" type="checkbox" id="viewofwater" value="walkdis" title="Check the ones you want"> <label for="viewofwater" class="checkboxes">View of Water</label><br> </td> <td> I'm a newbie and I need help with using the #include directive. below is a sample file usinging the #include directive: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <!-- #include file="test.html" --> </body> </html> Here is the contents of test.html: <h1>header</h1> When I display the test.html in my brower the text show up. When I run the main file above with the include statement the contents of the test file will not appear. I've tried using #include virtual and I get the same results. both files reside in the same directory. How can I get the above files to work. I'm working with windows XP on a home computer. This problem occured in my actual website files becasue I want to include a header and a footer. These files of course have table tags etc in them and I get the same results where the include files contents do appear. I need help asap if that is possible. I received a template where I have frames that I will insert pictures in, but I do not want them one on top of the other, but want them side by side, up to 3 on a line. This is the code for the frame: <!-- Images Begin--> <!--Replace the red words with your image URL (picture link), be careful to replace ONLY the red text! --> <!-- To add another image select the entire lines below from "Begin copy here" to "End copy here" and paste them below "Insert Copied Lines Here"--> <!--Begin Copy Here--> <table style="background-image: url(http://s100.photobucket.com/albums/m...y/border.gif); border: 3px #f4cc40 groove; background-color:#e4edd0;" cellspacing="12"> <tr> <td style="background-repeat:repeat; background-position: top center; border:#f4cc40 groove 3px; background-color:#e4edd0;"> <img src=" http://i100.photobucket.com/albums/m...magemarker.gif "/> </td> </tr> </table> <br /> If you need somethine else or more code, please let me know. Hello, I'm trying to position two divs side by side at the bottom of the page so they serve as Next/Previous links to navigate between pages. HTML (no wrappers): <div class="left"><a href="#">PREVIOUS</a></div> <div class="right"><a href="#">NEXT</a></div> CSS: .left { float: left; } .right {float: right; } However, the end results produced: PREVIOUS NEXT I need them to be on one line like so: PREVIOUS NEXT How do I achieve the desired effect? Thanks I have this table code, for two tables. It displays them one below the other. How can I change this so the two tables are side by side? Thanks. Code: <table width="100" border="1" cellspacing="0" cellpadding="12" bordercolor="#000000"> <tr> <td bgcolor="#FFFFFF" width="50%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">Type</font></font></b></font></p> <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p> </td> <td width="60%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Number</font></b></font></p> <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p> </td> </tr> <tr> <td width="50%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">A</font></b></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p> </td> <td bgcolor="#FFFFF" width="50%"> <p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>1</b></font></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p> </td> </tr> </table> <br> <table width="100" border="1" cellspacing="0" cellpadding="12" bordercolor="#000000"> <tr> <td bgcolor="#FFFFFF" width="50%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">Type</font></font></b></font></p> <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p> </td> <td width="60%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Number</font></b></font></p> <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p> </td> </tr> <tr> <td width="50%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">A</font></b></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p> </td> <td bgcolor="#FFFFF" width="50%"> <p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>1</b></font></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p> </td> </tr> <tr> <td bgcolor="#FFFFFF" width="50%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">B</font></font></b></font></p> <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p> </td> <td width="50%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">2</font></b></font></p> <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p> </td> </tr> <tr> <td width="50%"> <p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">C</font></b></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p> </td> <td bgcolor="#FFFFF" width="50%"> <p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>3</b></font></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p> </td> </tr> </table> I am the creator of the young website, FyerEgg's Game Collection (FEGC). I had a question about my front page, I have a table on the front page, and I wanted to add another table to the exact right of it, but whenever I try, the second table ends up below the first table. To correct this problem, I have used <br clear="all"> but sadly it still doesn't work. If you want to see my code, please visit; www.fyeregg.com/htmlcode.htm If you want to see my website, visit; www.FyerEgg.com To contact me, please Email me at fyeregg@gmail.com or reply back here Your help is greatly appreciated. Regards, Creator of the FyerEgg Game Collection (FEGC) I am trying to create a website. I have a picture in the middle of the page. I want to put a comment box on the right side of it, but centered with the picture. I have it on my page now and the comment box is on the right, but it is higher on the page than the picture. Here is the code I am using.... <div align="center"><span style="font-family: Arial; font-size: 12pt;"><img alt="Pasquale Di Scipio / Filomena Priore" src="/patsy_and_filomena.jpg" width="423" align="middle" height="290"></center><align="right"><!-- BEGIN MyShoutbox.com CODE --> <iframe src="http://612085.myshoutbox.com/" width="205" height="400" frameborder="1" allowTransparency="true"></iframe> <!-- END MyShoutbox.com CODE--></span> What am I doing wrong? Here is my site address so you can see what I am talking about. Maria's Family Thank you Hello everyone. I want to display two lists side by side. When i float:left the first one, the second list collapses; that is, the nested and enclosing lists are actually aligned. How do I fix that? Thanks jenia <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><style type="text/css"> li.fullBullet{list-style-type: disc;} li.hollowBullet{list-style-type: circle;} li.fullSquare{list-style-type:square;} li.letter{list-style-type:lower-alpha;} li.decimal{list-style-type:decimal;} li.roman{list-style-type: lower-roman;} #firstList{float:left; width: 100px; margin-right: 255px;} #secondlist{ } </style> <title>Insert title here</title> </head> <body> <ul id="firstList"> <li class="fullBullet">Outer-1</li> <li class="fullBullet">Outer-2 <ul> <li class="hollowBullet">Inner-1</li> <li class="hollowBullet">Inner-2</li> <li class="hollowBullet">Inner-3 <ul> <li class="fullSquare">Deep-1</li> </ul> </li> <li class="hollowBullet">Inner-4 <ul> <li class="fullSquare">Deep-2</li> </ul> </li> </ul> </li> <li class="fullBullet">Outer-3</li> </ul> <ol id="secondlist"> <li class="decimal">Outer-1</li> <li class="decimal">Outer-2 <ol> <li class="letter">Innter-1</li> <li class="letter">Innter-2 <ol> <li class="roman">Deep-1</li> <li class="roman">Deep-2</li> </ol> </li> </ol> </li> <li class="decimal">Outer3 <ol> <li>inner-3</li> </ol> </li> </ol> </body> </html> |