HTML - Horizontal Rule
With the "horizontal rule", is it possible to write over it? The reason I am asking is because I saw an example of a horizontal rule, and it reminded me of a footer. Are they used for footers if some cases?
Cheers guys (and I apoligize for all the questions). Similar TutorialsHi, hope someone can help. For some reason I can't seem to get a horizontal rule to show in my website and I can't for the life of me understand why ! Could someone advise me please. My code is below. I'm not sure if it's something to do with css. PHP Code: <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Back Garden Moths</title> <meta name="keywords" content="moths,garden,uk,british,British,large,butterflies,recording,light,sugar,moth group,back garden,wildlife,traps,actinic,uk moths,moth species,macro moths"/> <meta name="description" content="Few people realise the wide spectrum of moth species which often rival the beauty of butterflies. Some even consider the moth to be the pinnacle of the insect world. This site includes information on the techniques involved in moth recording and aims to encourage others to discover the diversity of the moth world hidden in their own back garden."/> <link href="default5.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="logo"> <h2><a href="http://www.back-garden-moths.co.uk/"></a></h2> </div> <div id="page"> <ul id="tabmenu"> <li><a class="active" href="index.php">Home</a></li> <li><a href="Databaseintro.php">Species search</a></li> <li><a href="recordsmain.php">Members records</a></li> <li><a href="forum/gallery/menu.php">Gallery</a></li> <li><a href="tab3.html">Thumbnail index</a></li> <li><a href="monthid.php?flightID=<?php echo date( 'F', time() ); ?>">What's flying this month?</a></li> <li><a href="Sightings.php">Sightings</a></li> <li><a href="Links.htm">Useful Links</a></li> </ul> <div id="navbar"> <li><a href="tab2.html">Forum Index</a></li> <hr/> <br /> </div> <img src="Images/Lob.jpg" alt="Zeiraphera isertana" width="400" class="left" /> <h2 class="title">Back Garden Moths - the community moth site...</h2> <p>For many people, encounters with moths revolve around unwanted intrusions into their homes. </p> <p> Few people realise the wide spectrum of moth species which often rival the beauty of butterflies. Some even consider the moth to be the pinnacle of the insect world. This site includes information on the techniques involved in moth recording and aims to encourage others to discover the diversity of the moth world hidden in their own back garden. </p> <h3>Come and take part</h3> <p>There are a number of ways in which you can contribute to the site and extend your own knowledge in this area. A comprehensive <a href="forum/index.php">forum</a> is available if you have any questions, comments or would like to chat to other wildlife enthusiasts. So come along and join. The <a href="Sightings.php">sightings</a> section enables you to post sightings of any interesting moths or butterflies you have seen in and around your garden. And finally there's the <a href="recordsmain.php">members records</a> section which allows you to post all your records in your own personal database. Your records can be searched to keep a track on the number and variety of species recorded, plus a variety of other statistics are available. Data entered is also combined to give a running commentary on the types of moths flying across the UK.</p> <p> </p> </div> <!-- end page --> <div id="footer"> <p id="legal">© Simon Wantling 2008 </p> <p id="links"><a href="http://www.statcounter.com/" target="_blank"><img class="statcounter" src="http://c2.statcounter.com/335444/0//0/" alt="website stats" ></a></p> </div> <!-- Start of StatCounter Code --> <script type="text/javascript"> var sc_project=335444; var sc_invisible=0; var sc_partition=1; var sc_security=""; </script> </body> </html> Is there a way in plain old HTML (not CSS) to place a margin around a <hr>? I'm somewhat new to HTML, and have searched all over, and can't find how to do this Hi guys, got a question about a html issue. ill explain the situation, 2 persons publish htm files, this is automated, each html files is unique, so lets say person one creates indexa.htm and person two creates indexb.htm I need a general index who refer to either indexa or indexb, with the rule that it should pick the latest one changed or the newest one. Is this possible in pure html ?? Thanks in advance, Nim. Greetings Folks! So I put this site together based on a website's site layout and well, let's just say is not as nice. I did, tho, do the best I could without using jquery scrollpane which the original site looks like they used. Here's the site I did http://www.universalpartnership.org I'd like to be able to make the page jumps smoother and have the particular sections come to the center rather than somewhere on the page. I'd really, really like to make the vertical scrolling on the whole page go away, it's seriously annoying. And is there a way to change the scroll bar to be smaller? Also, (hehehe) I had to add a table with nothing in it to get the width to be nice and big. I couldnt figure out how to increase the width POST starting the page and all. It'd be nice to dump that and do it the right way. I would have kept the table but I could get it to be flush against the top and the left. I guess the major issues I have is being able to add code post building the page in design view. I just dunno where things go and I've been reading article after article and it's been a lost cause so far. So, if you are kind and so inclined to offer some support by way of help, indicating where code goes would be awesome and a great learning curve for me! I've added the page as an attachment in case any whizzes can hook it up! thanks much in advance! peace rooster I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he HTML: Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact and Networking</a></li> </ul> </div> CSS: Quote: #nav { height: 37px; text-align: center; background-color: #858585; } #nav ul { margin: 0; } #nav li { display: inline; } #nav a { padding: 9px 12px 9px 12px; line-height: 38px; border-left: 1px solid black; } Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to... Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li> </ul> </div> ...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align). This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality? Hi: I'm a newbie and am designing my 1st screen using Transistional HTML. Without using CSS, is there a simple way to draw a horizontal line across the screen ? TIA -Mel Smith Im working in a HTML page using also JSP (Java). In the HTML code I have a large string of information (horizontal string) that does not fit in the screen. I also would like to have this info aligned in colums. I am using <TABLE>. The problem with <TABLE> is that it put all the information in one screen, breaking the string in two parts, instead of having an horizontal scroll bar and using this scroll bar to see al the info. Thanks, John Morales I want to create a website that both Firefox and IE will recognize my code where there is no vertical scroll. The page only scrolls horizontally. The site I am creating is for a portfolio and horizontal scroll is best for vieiwing such. Do I need to use CSS to make this work or how can I acheive this? Thank you Chaser Hi. I'm making a page for a company. And I'm having trouble regarding an iframe, ONLY comes to place when viewed in Explorer. I'm so tired of finding problems ONLY because of IE. This is the second time so far, spent an entire week just because of some minor code problems showing up ONLY when viewed in IE. Anyway, my trouble is an irritating horizontal scroll showing up at the bottom of the one iframe. The URL is http://www.risington.no/dynamikk I have checked that the contents of the page linked to the iframe ain't wider than the iframe itself. Actually, I've tried to even set half of the size it is now, and still I'm getting the scrollbar at the bottom. I'm running out of posibilities here, necer experienced such big a problem on behalf of this. I had thos problem a couple of times before, but allways solved by subtract about 15 px width off the content page shown in the iframe because of the VERTICAL scrollbar showing up, which actually is quite important that it does. But not this time, no! Here's a cut-out of how my iframe tag looks like: Code: <iframe src="news.html" width="677" height="478" align="middle" frameborder="0" marginheight="0" marginwidth="0" name="mainframe" scrolling="auto" title="Dynamikk"></iframe> It's inside a <td colspan="2"></td> with no static width or height. Any help = Grateful Hi everyone, http://www.eveningtweed.com/laura At the above site, I've got a div called 'work' which needs to contain a long line of images which I want users to horizontally scroll through using the DIV scrollbar. I've looked through countless forum posts and solutions on Google but nothing works. Can anyone tell me why this won't scroll horizontally and how to achieve it? Current CSS for the DIV: Code: .work { border:0px; height:350px; overflow-x:scroll; overflow-y:hidden; width:100%; } Thanks in advance, Jez. I dont know how to explain it better but how do i do this http://www.target.com/Movies-MMB/b/r...ode=1259488011 so at the bottom of my page i can add 4 to 5 different products and allow for those left and right buttons show more... any direction would help thanks How do I make two links next to each other? Here's the site: http://celticsinsider.webs.com Where it says "Submit An Article", I would like a couple links next to it. Here's my html code and css code: Code: *{ margin:0px; padding:0px; } img{border:0px;} html{ width:100%; height:100%; background-color:#030303; } body{ width:869px; padding:0 65px; margin:0 auto; height:100%; position:relative; } html > body{ height:auto; min-height:100%; } #top{ width:869px; height:70px; background-image:url(images/menu_bg2.gif); background-position:top left; background-repeat:repeat-x; } #menu{ width:869px; height:70px; background-image:url(images/top_bg.gif); background-position:bottom left; background-repeat:no-repeat; } #menu ul{ background-image:url(images/menu_bg.gif); background-position:bottom left; background-repeat:no-repeat; height:42px; width:768px; margin:0 auto; } #menu li{ height:34px; float:left; list-style-type:none; padding:8px 9px 0 13px; } #menu li a{ display:block; height:34px; float:left; } .but1{ background-position:top left; background-repeat:no-repeat; background-image:url(images/but1.jpg); } .but2{ background-position:top left; background-repeat:no-repeat; background-image:url(images/but2.jpg); } .but3{ background-position:top left; background-repeat:no-repeat; background-image:url(images/but3.jpg); } .but4{ background-position:top left; background-repeat:no-repeat; background-image:url(images/but4.jpg); } .but5{ background-position:top left; background-repeat:no-repeat; background-image:url(images/but5.jpg); } .but6{ background-position:top left; background-repeat:no-repeat; background-image:url(images/but6.jpg); } .but7{ background-position:top left; background-repeat:no-repeat; background-image:url(images/but7.jpg); } .but1:hover,.but2:hover,.but3:hover,.but2:hover,.but4:hover,.but5:hover,.but6:hover,.but7:hover{background-position:bottom left} #active{ background-position:bottom left } #header{ width:869px; background-image:url(images/photo.jpg); background-position:top left; background-repeat:no-repeat; } .home{ padding:240px 0 0 0 } .gallery{ width:852px; background-image:url(images/footer_bg.gif); background-position:top left; background-repeat:no-repeat; padding:13px 0 8px 17px; background-color:#0F0F0F; overflow:hidden } .gallery div{ float:left; margin:0 5px 0 0; } .gallery div p{ display:block; background-color:#1F1F1F; border-bottom:1px solid #383838; line-height:16px; text-align:center; width:65px; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#5E5E5E } #wrapper{ width:869px; padding:6px 0 90px 0; background-image:url(images/footer_bg.gif); background-position:top left; background-repeat:no-repeat; overflow:hidden; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#9A9A9A; } .style1{ margin:8px 0 0 0; } #content{ width:869px; background-color:#090909; overflow:hidden; padding:0 0 28px 0; background-image:url(images/wrapper_bg.gif); background-position:bottom left; background-repeat:no-repeat } .title{ padding:11px 0 0 0; height:26px; margin:0 0 8px 0; background-image:url(images/title_bg.gif); background-position:top left; background-repeat:no-repeat; } #left{ width:442px; float:left; padding:0 24px 0 17px } #left div{ padding:15px 0 0 0; width:221px; float:left; } #left p{ width:192px; padding:13px 0 0 0 } .more{ display:block; color:#AE2A00; text-decoration:underline; margin:2px 0 0 0 } .mo visited{text-decoration:underline} .mo hover{text-decoration:none} .block{ width:368px; padding:12px 0 10px 1px; overflow:hidden } .block img{ float:left; border:1px solid #383838; margin:0 11px 0 0 } .block span{ background-color:#000000; line-height:14px; color:#29705B; padding:0 15px 0 5px; margin:2px 0 8px 0; display:block; float:left; } .block p{ float:left; width:200px; } #footer{ width:869px; position:absolute; bottom:0px; height:77px; background-color:#0F0F0F; background-image:url(images/footer_bg.gif); background-position:top left; background-repeat:no-repeat; font-family:Tahoma, sans-serif; color:#9A9A9A; font-size:10px; } #footer ul{ width:768px; height:13px; background-image:url(images/bot_bg.gif); background-position:top left; background-repeat:no-repeat; width:768px; height:13px; margin:20px auto 15px auto; text-align:center } #footer ul li{ display:inline; } #footer ul li a{ color:#9A9A9A; text-decoration:none; margin:0 9px; } #footer ul li a:visited{text-decoration:none} #footer ul li a:hover{text-decoration:underline} #footer p{ width:869px; text-align:center; font-size:11px; } #footer p a{ color:#CE3200; text-decoration:none } #footer p a:visited{text-decoration:none} #footer p a:hover{text-decoration:underline} #about{ width:412px; float:left; padding:0 21px 0 17px; } .pic{ margin:17px 15px 18px 15px; border:1px solid #383838 } #about p{ width:375px; margin:0 0 15px 15px } #history{ width:404px; float:left } #history p{ width:375px; padding:18px 0 0 0 } #nav { font-family: Verdana, Arial, sans-serif; font-size: small;; padding:5px; margin:0px; background-color:#090909; color:#fff; border-bottom: 1px solid #090909; } #nav a { color:#fff; text-decoration:none; } #nav a:hover { text-decoration:underline; } Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover Can't tell you how many hours I've spent trying to do this, but it's a lot! An example page with the issue can be found here.. http://www.funkimunkibadges.co.uk/geekybadges-c-79.html I'm basically trying to change it to be a horizontal scroll instead of vertical. Top image here is what happens when I expand the data in the central box. The lower image is when is as it is now.. http://www.flickr.com/photos/creepyd/5710648997/ I'm not really sure where the problem lies, my guess is the html. The piece of CSS which creates the vertical scrollbar is here.. Code: #indexProductList.centerColumn { width: 630px ; height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/ overflow:auto; padding:0px; If I change the 'auto' above to 'hidden', the scrollbar goes away, so it's definitely that controlling it. The php which creates the 5 columns is here.. If I change it to + 0.5, the last one will wrap to the next line, and not create a horizontal scrollbar. However if I change it so each column is more than 100%, I get a horizontal scrollbar?! Code: $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5; Thanks so much for any help. Here's the html for the central table with the normal vertical scrollbar in place.. HTML Code: <td valign="top"> <!-- bof breadcrumb --> <div id="navBreadCrumb"> <a href="http://www.funkimunkibadges.co.uk/">Home</a> :: Careers & Hobbies </div> <!-- eof breadcrumb --> <!-- bof upload alerts --> <!-- eof upload alerts --> <div class="centerColumn" id="indexProductList"> <h1 id="productListHeading">Careers & Hobbies</h1> <div id="indexProductListCatDescription" class="content"> </div> <form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()"> <option value="0">Items starting with ...</option> <option value="65">A</option> <option value="66">B</option> <option value="67">C</option> <option value="68">D</option> <option value="69">E</option> <option value="70">F</option> <option value="71">G</option> <option value="72">H</option> <option value="73">I</option> <option value="74">J</option> </select> </form> <br class="clearBoth" /> <div id="productListing"> <div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div> <div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> </div> <br class="clearBoth" /> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"></a><br /><br /></div> <br class="clearBoth" /> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"></a><br /><br /></div> <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"></a><br /><br /></div> <br class="clearBoth" /> <div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div> <div id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> </div> <br class="clearBoth" /> </div> </div> </td> I am wanting to do a horizontal scrollbar like this http://felicefawn.com/fashion.htm with pictures inside. The pictures won't stay side by side, they go underneath therefore creating a vertical scrollbar. Anyone know how to do this? Help much appreciated!! hi all, im having a bit of a problem displaying a list horizontally, and its really getting a bit frustrating. as far as i can see, it should be a case of using display:inline on the li tags, but so far no luck. ive included my css below: Code: #navigation ul { list-style-type:none; padding:0px; margin:0px; } #navigation ul li { display:inline; } #navigation ul li a { display:block; width:90px; height:30px; color:#fff; text-align:center; text-decoration:none; } #navigation ul li a:hover { background-color:#EF4252; } and my html: Code: <td id="navigation"> <ul > <li> <a href="contact.html" >Contact Us</a> </li> <li> <a href="wwd.html" >What We Do</a> </li> </ul> </td> any help would be appreciated. thanks I thought for sure that after all the helped I've received so far (many thanks, btw) that I'd be able to setup a horizontal menu using UL/LIs with some CSS. I've studied many other sites that use horizontal menues this way and have tried to figure 'em out but no luck so far Here's my attempted code so far: CSS Code: #headerNavMenuContainer { background: url('images/main_nav_bar2.gif'); float: left; border: 1px solid #000; height: 42px; width: 100%; } #headerNavMenu ul { font-weight: 800; text-align: center; } #headerNavMenu ul a { border-right: 1px solid #dadada; color: #000; text-decoration: none; } HTML Code: <div id="headerNavMenuContainer"> <div id="headerNavMenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Encyclopedia</a></li> <li><a href="#">Forum</a></li> <li><a href="#">The Truth</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Publications</a></li> </ul> </div> </div> http://knexinnovation.net/store/ I thought that if your background is wider than the window, it won't create a scrollbar to show the full image. Or is this not the case? Currently it has a horizontal scroll bar for 1024px users. The footer image is actually the body { } background, aligned to the bottom center. hi ! I'm using a frameset and in the main frame I need the vertical scroller visible all the time, even when not needed, but when I set it ... HTML Code: scrolling="yes" but with this the horizontal scroll is also visible, what I don't want Is there a way to enable just the Vertical one?? |