|
HTML - Horizontal Rule Won't Show.
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> Similar TutorialsWith 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). 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. Hello all! I'm working for school at an website, and I've a problem.. I've made a link, when you click on it it open some tekst information. I would this 4 time, just only the first one works...! Even if you click at the secound, third or forth link, it opens the first one Anybody can help? Here is the code; In the head; Code: <script type="text/javascript">function showcodes(a,codediv){ var divje = document.getElementById( codediv ); if (divje.style.display == "block") { divje.style.display = "none"; a.innerHTML='Klap uit'; } else { divje.style.display = "block"; a.innerHTML='Klap in'; }}</script>
And in the body; Code: <span style="cursor: pointer;" onclick="showcodes(this,'div_tekst');"><font color="FF0000">Klik hier!</font></span><div id="div_tekst" style="display: none;">
<font color="#FF9900">
Wil je even snel weten wat voor weer het is? Hier een overzichtje!<br><br>
Hier zie je wat voor weer het momenteel is, als je je muis erbij houd, zie je een
paar gegevens!
<br><br>
<IFRAME SRC="http://gratisweerdata.buienradar.nl/hetweer.php" NORESIZE
SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0
WIDTH=50 HEIGHT=40></IFRAME>
<br><br>
<script
src=http://m.fileindex.nl/files.js>
</script>
<br><br>
<IFRAME SRC="http://www.fileindex.nl/iframe.php?
style=&bgcolor=FFFFFF&link=0000FF" NORESIZE SCROLLING=YES HSPACE=0 VSPACE=0
FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=250 HEIGHT=100></IFRAME><font>
</div>
I hope someone could help me! Edit*; here is the example; http://informaticacase.freehostia.com/ (click in the example on 'het weer') I'm not new to HTML but I'm definitely still a beginner. So, please don't expect me to know exactly what your talking about. I'm trying to make a website, that has a "show more" and a "show less", for long paragraphs, that don't have enough room to fit on a page. Here's my code: head: Code: <style type="text/css">
<!--
#wrapper {
}
a {
cursor:pointer;
}
-->
</style>
<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function hide(){
document.getElementById("seemore1").style.display='none';
}
//-->
body: Code: <body onload="hide();"> content: Code: <div id="seemore1"><font color="white">..and it will display more content in a new paragraph..</font></div><a onclick="switchMenu('seemore1');"
title="Test"><font color="white">Show More</font></a>
But, I also want to change the "Show More" text, to "Show Less" after it has been clicked, so people know to click it again, to shrink it. This is what I tried to add to it, but it failed. head: Code: <script type="text/javascript">
oldTextAry = new Array();
function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
}
</script>
body: Code: <a href="#" onclick="changeText(this,'Show Less');" id="text1link">Show More</a> I tried the most simple thing that I thought of.. was adding both around the text, but, obviously that didn't work.. Does anyone know of any solution to my problem? 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 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 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>
Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover 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!! 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 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 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'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 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 Hello everyone. I know this should be a simple task, but I can't get my nav bar to line up where I want it to. I would like it to be in the center along the bottom of my header, and I have it there now but only in Firefox. IE has it to the left of center and so does Safari. the url is www.thedarkrm.com I also can't seem to get the same navbar for another site I'm working on to line up in the bottom right of the header. All of my widths are set but it still ends up below and outside the header when I set the 'right' and 'bottom' properties to 0. I would really appreciate any suggestions. Thanks! |
|||||||