HTML - Horizontal Line ??
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 Similar TutorialsHi: I'm laying out a 7-col table with only vertical borders between the columns (i.e., rules="cols"). This shows correctly. However, after every 'n' rows or so, I wish to have a horizontal line across all seven columns of the table. Although I am a 'basic' CSS user (very basic), in this table I want to use 'plain vanilla' html or xhtml for this 'horizontal line' or border across the width of the table Thanks for any hints ! -Mel Smith -Mesa, Arizona I am trying to display a horizontal line using CSS and the results are fine when viewed with Mozilla Firefox 2.0, but not in IE6. I am not able to control the line height in IE6. In the test code below, I also included the deprecated properties code which works fine in both browsers. Any help to switching to CSS is greatly appreciated. ineuw <html> <head> <style type="text/css"> div.hr { background-color: #ff0080; border: 0px; clear: left; color: #ff0080; float: left; height: 5px; margin: 4px 0px 4px 0px; width: 100%; } </style> </head> <body> <br> <br> <!-- deprecated mode works fine in both Firefox and IE --> deprecated display <div><hr size="5" color="#ff0080" bgcolor="#ff0080" width="100%"></div> <br> <br> <!-- line-height of 5px in the css has no effect in IE --> css display <div class="hr"></div> </body> </html> Hello all, I am trying to replicate a style I have seen on the site listed below, where they appear to be using the CANVAS command to create a gradient top and bottom margin. I can seem to find anything online about how to do this but obviously they have figured it out. http://www.xtrememac.com/ Any ideas or pointing me in the right direction are greatly appreciated. Thanks! 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'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? 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 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. 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 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). 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 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 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 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!! 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 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 Hi, 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> Hi Everyone, I can't seem to figure out how to make my pages horizontaly align to the center of the screen. Seemed easy enough but can't seem to make it work. Here is one of those pages : http://www.ruze.ca/Kunstler/Homepage.html It would be amazing if one of you could tell me how to fix this. I'm by no means a web guy, I'm just trying to put up a temporary version of the site I'd like to have made by a real pro when I can afford it. Thanks! D. Hello, I have a demonstration site set up at: http://www.sikhfaith.com/demo The site works perfectly in Firefox 2.0. However, in Internet Explorer 7.0, there's a huge blank space on the right side of the page which causes IE to display a horizontal scrollbar. I haven't been able to pinpoint what is causing this. Any help would be appreciated. Thank you. |