HTML - Having A Box To The Left Of The List
Hi ,
I have an odd HTML question. In my company we make procedures (stuff that we think we need written down in case we need to repeat it), which we update on a regular basis. Whenever we go to do an install, update, fix, etc. and we need a procedure, we print it out and then head off with it (we make red lines as necessary.) All of these are in HTML and stored in CVS. One of the engineers (she is not terribly familiar with HTML and turned to me) asked me if I could make a little "box" to the left of a list. The steps of the procedure are a bunch of <li> tags, having a nice box to the left to check it off as you go through them would be great. This stumped me. The best that I could do was make a one-celled table inside the <li> tags (the HTML for which I've posted) in order to get the impression of a "box" where you can check off a step that you just completed. Is there any way to put that box on the left? If you look at the end of this post I made a simple ASCII representation of what I would like to accomplish. Code: <html> <head> <title> Example </title> </head> <body> <ol> <li> <table border="1"> <tr> <td> </td> </tr> </table> Do stuff... </li> <li> <table border="1"> <tr> <td> </td> </tr> </table> Do stuff... <ol type="a"> <li> <table border="1"> <tr> <td> </td> </tr> </table> Do sub-step... </li> <li> <table border="1"> <tr> <td> </td> </tr> </table> Do sub-step... </li> <li> <table border="1"> <tr> <td> </td> </tr> </table> Do sub-step... </li> </ol> </li> <li> <table border="1"> <tr> <td> </td> </tr> </table> Do stuff... </li> </ol> </body> </html> Code: +---+ | | 1) Do stuff... +---+ +---+ | | 2) Do stuff... +---+ +---+ | | a) Sub-step... +---+ +---+ | | b) Sub-step... +---+ +---+ | | c) Sub-setp... +---+ +---+ | | 3) Do stuff... +---+ Similar TutorialsI have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); } Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote I want to add a left vertical sub navigation... but i want it to look similar to this one! RamVideos I dont know where to start... Thanks In Advance! In html left to right <marquie behaviour but i want right to left the text comes from right to left and left standard positin whch command do i need to use? please provide thanks for helping Good day , I want to create a menu in my div block but the menu will be like this Categorie <-- this is the title Plastic <-- this is 3 categorie hard <-- type of plastic soft wood metal my problem is that I would like that when you click on a categorie the type would appear and the other categories would go down to give some room for the type. I tryed to use a menu builder from coffecup but it wont put under like I would like. Can someone help me please . thanks in Advance Marc people are telling me that have to horizon scroll (left to right) to see this page: http://www.girlsincsoaz.org I tried it on different machines, including a laptop and I don't have to, what can be the problem? TIA Hi all, Im afraid im getting a little frustrated. My fault.. Im new here but need your help. I run a forum, phpbb3 based but the style im currently using is very much HTML based. I am looking to have a left hand column within my forum but really dont know how to do it, well to add to what i already have. I think for you to know what style docs i have you would have to have a look yourself or look at my existing source code.. http://www.pricelessparrots.com/phpbb3/ Ok i have the new style ' VistaX '. This link will take you to the original download: It can be found he It seems this style is mostly created using HTML. Could someone please tell me how to add a left hand column to the page. I would like it to be on the left hand side all the way down after the header. I thought i would have a go at it but becoming increasingly frustrated with it. such a simple thing but i cannot get it. Do i float it, using css or what? I thought about using a seperate page to create the table and then include it into the doc but this doesnt work either. Plz help.. Paul hello the original website is 'http://www.buddysauctions.com/ and when u scroll down you can see that the "Member Login" box is on the left. I wanna move it to the right like me photoshop print screen i know that i have to cut the php code from my php file and create a new php file and put it in but i dont know how to put it exactly where my printscreen shows. thanks a lot for your interest i hope you can help me ) thanks again edit: i also would like to have some empty boxed under the member login so i can put adverts in them edit2: my member login box as you can see in the printscreen PHP Code: <tr> <td><FORM name=loginForm action="login.php" method=post> <div align="center"></div> <table width="262" border=0 align=center cellpadding=5 cellspacing=0> <tbody> <tr valign=center> <?php if(!isset($_SESSION["userid"])) { ?> <td colspan="2" background="http://www.overclock.net/images/bgyell2.gif" class="sideheadingtd" ><strong><img src="http://www.overclock.net/images/squareswhite.gif" width="10" height="12" align="absmiddle"> <font size="2" face="Arial, Helvetica, sans-serif" font color="#ffffff">Member Login</font></strong></td> </tr> <tr valign=center> <td bgcolor="#f5f5f5"> <div align=right><font color="#000000" size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Username</font></strong></font></div></td> <td width="97" bgcolor="#f5f5f5"><font color="#000000"> <input name=UserName class="box1" size="13"> </font></td> </tr> <tr valign=center> <td bgcolor="#f5f5f5"> <div align=right><font color="#000000" size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Password</font></strong></font></div></td> <td bgcolor="#f5f5f5"><font color="#000000"> <input name=Password type=password class="box1" size="13"> </font></td> </tr> <tr align=right> <td colspan=2 bgcolor="#f5f5f5"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="67%"><p class="style2"><a class="insidelink" href="signup.php">:: Signup Now::</a><br> <a class="insidelink" href="lostpassword.php">:: Lost Password ::</a></p></td> <td width="33%"> <div align="left"> <font color="#000000"> <input type="submit" name="Submit" value="Sign In" class="btn"> </font></div></td> </tr> </table></td> <?php }?> </tr> <tr align=right> <td colspan=2> </td> </tr> </tbody> </table> <div align="center"></div> </FORM></td> </tr> Please help anyone... even though they appear normally aligned and centered from inside DW all my table are aligned left when previewed in a Firefox. It's all good in IE. Have spent half of a day trying to figure it out <table width="527" height="2180" border="1" align="center"> <tr> <td><span class="style23">xxxxx</span></td> </tr> </table> I doubt that this means much but here is one of the tables. If it means something, this started to happen when I had to put a whole book online for one of my customers that had problems downloading it. So, in the process I copy/pasted from Word to DW. I had to do it. I know that these kind of things can sc... everything up so I made sure that I first cleared all the formatting from Word. So, I'm in a pickle now... I'm wondering how I would fill in the left and right side of the body. Right now it's centered at 800px so I have the left and right side just white. *--><body> <div id="page" align="center"> <div id="content" style="width:800px"> I'm not sure what else you'd need to see, so please let me know. For example this news site: www.kstp.com I'm wondering how I would get the blue sides like this site has. Thanks in advance My webmaster is on vacation and I am trying to post a News Release on our website. This is a very basis question: The copy on this page is centered, and I want to align it left. Here's the page: http://www.247-direct-mail-services.com/news/ Seems to me, this is the style sheet html for this page: <p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-align:left; color:#ffffff;"> But it's not showing this font nor aligning left. I don't know how to fix this. Hoping to get input. Thx. Hi all, I want to have a banner image in the top-left corner basically reading "50% OFF ALL PRICES". I want it to overlap the other images/table/text as not to move it about. Just wondering if anybody can point me in the right direction to do this in HTML? Thanks Hi. i Nead help here i try get adsence on left side of the site. i have try driffent codes but it wont change from right side to left. Code: <div style="text-align:left"><script type="text/javascript"><!-- google_ad_client = "pub-6922170130422170"; /* 300x250, skapad 2011-02-07 */ google_ad_slot = "0334614029"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>';} Any one can tell me what am doing wroung and how i get it on left side? Hello. I have text at the top right, "A Site for All Nations to Share their Knowledge!" and I need to move it to the left a bit so its not overlapping the sun image. I appreciate You! Not sure if this is strictly a HTML problem or not >.< this is my site http://www.melbourneparkour.com.au/ as you can see the hyperlinks in the news and announcements section all align to the left and mess up the formatting of the site, the sentences just don't make sense. OTHER INFO. i use a wordpress blog to actually write the posts http://www.backend.melbourneparkour.com.au/ then i use a bit of php to call that info into the website <?php require_once('../brisbaneparkour_sub/backend/wp-blog-header.php'); query_posts('&showposts= 15&order=DESC'); while (have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <p><?php the_content(); ?></p> <?php endwhile; ?> not sure if that effects it. The confusing bit is that i do exactly the same here www.brisbaneparkour.com.au and there are no problems. same code, css, html, php etc, but different results. apologies if this is in the wrong place, im not sure exactly what is causing it. Hello! How can I center the divs and keep this arrangement? I have the bg centered and would like the divs to be also, without using the margin-left tag since it will only look centered on some screens. Thank you very much for your assistance! www.rkgrant.co.cc Hi, I want to put images on the top left and topright corners of my website, but I want the images to rotate (they'd change when the page reloads).. How would I do that? Reference: http://test6.waltonstreetwebdesign.com/ So right there on the home page, "A Warm Welcome" is in an h1 tag, most of the regular text is inside <p> tags except for the test text. Why in the world is the right align of the <p> tags a little to the left of the text not inside the <p> tag and the <h1> tag? I'm building my website and I've just noticed that the left bar has suddenly shifted away from the left edge of the screen. I have no idea what I did to cause this and can't seem to fix it. In an attempt to figure out which bit is wrong I have cut back all the rubbish until I'm just left with a basic left aligned table - Code: <html> <body> <table width="90%" border="1" align="left"> <tr> <td> XXX </td> </tr> </table> </body> </html> Now that's pretty simple. can't get much more cut down than that - a left aligned table. The left alignment is working such that the table is to left of centre, but the problem is that (on my system at least) the left edge isn't butted up against the left edge of the browser. So what the heck is the problem? The layout of my page, like that of many pages, consists of a bunch of divs inside divs. Whenever I specify the width or height of a div, there appears a space to its left, three pixels wide. This gap also appears when I substitute a standard image (img) for a div. Some of these divs are floated left; others are not. In the latter case, floating left actually gets rid of the space, but causes other problems as I don't really want those ones floated left. Setting the borders, margins, or padding to zero (or a negative number) does not affect the 3px gap. I am using IE7. |