holmedwa04 Posted May 30, 2010 Share Posted May 30, 2010 Dear AllI am trying to make a horizontal menu and am struggling greatly. I cant work out why the first div with a class of nav wont stretch to fit all of the navigation? And I have to put the next paragraphs inside another div with block:both set when in theory I should only need to use that on the first div.navAlso I would like to know how to centre the menu items... so that they look like centered text and when you resize the page they realign onto more than one line like they are doing but just centered instead.Also is it possible to maybe put little pipes (|) inbetween the links to make it look like they are separated?This is the code that I have made so far using the online try it editor: <html><head><style type="text/css">ul {float:left;width:100%;padding:0;margin:0;list-style-type:none}a {float:left;text-decoration:none;text-align: center;color:black;margin:5;padding:10}div.nav {padding: 5px;clear: both;background: #990033;border: 2px inset #ffffcc;font-family: calibri, arial, sans-serif;font-size: 13px;color: #ffffcc;line-height: 120%;width: 80%;text-align: center;margin: 0px auto}div {clear:both;font-family: calibri, arial, sans-serif;font-size: 16px;color: #000000;line-height: 120%}a:hover {background-color:#ffffcc;color:black}a:active {background-color:#990033;color:black}li {display:inline}</style></head><body><div class="nav"><ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three is very long</a></li><li><a href="#">Link four</a></li><li><a href="#">Link five</a></li><li><a href="#">Link six</a></li><li><a href="#">Link seven is very long</a></li><li><a href="#">Link eight</a></li></ul></div><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum neque a orci lacinia tempor venenatis turpis dignissim. Phasellus eget quam purus, pharetra fermentum magna. Nunc at condimentum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempor euismod lorem nec consectetur. Vivamus sodales.</p><p>Integer ac lacinia augue. Sed faucibus tortor at odio eleifend gravida. Nulla non justo ut magna semper venenatis a eu ligula. Nunc fringilla, felis sit amet congue dignissim, ligula metus sodales lorem, nec.</p></div></body></html> Any help would be greatly appreciated Link to comment Share on other sites More sharing options...
dsonesuk Posted May 30, 2010 Share Posted May 30, 2010 like this?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style type="text/css">.nav ul {float:left;width:100%;padding:0;margin:0;list-style-type:none}.nav ul li a {float:left;text-decoration:none;text-align: center;color:black;/*margin:5px;padding:10px;*/display:inline-block;}div.nav {padding: 5px;clear: both;background: #990033;border: 2px inset #ffffcc;font-family: calibri, arial, sans-serif;font-size: 13px;color: #ffffcc;line-height: 120%;width: 80%;text-align: center;margin: 0px auto;overflow:hidden;}div {clear:both;font-family: calibri, arial, sans-serif;font-size: 16px;color: #000000;line-height: 120%}a:hover {background-color:#ffffcc;color:black}a:active {background-color:#990033;color:black}li {display:inline}.nav ul li span{display:block;border-right:1px solid #000;padding:0 10px;}#wrapper{width:100%;}#content {width:80%; margin:0 auto;}</style></head><body><div id="wrapper"><div class="nav"><ul><li><a href="#"><span>Link one</span></a></li><li><a href="#"><span>Link two</a></span></li><li><a href="#"><span>Link three is very long</a></li><li><a href="#"><span>Link four</a></span></li><li><a href="#"><span>Link five</a></span></li><li><a href="#"><span>Link six</a></span></li><li><a href="#"><span>Link seven is very long</a></li><li><a href="#"><span>Link eight</a></span></li></ul></div><div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum neque a orci lacinia tempor venenatis turpis dignissim. Phasellus eget quam purus, pharetra fermentum magna. Nunc at condimentum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempor euismod lorem nec consectetur. Vivamus sodales.</p><p>Integer ac lacinia augue. Sed faucibus tortor at odio eleifend gravida. Nulla non justo ut magna semper venenatis a eu ligula. Nunc fringilla, felis sit amet congue dignissim, ligula metus sodales lorem, nec.</p></div></div></body></html> Link to comment Share on other sites More sharing options...
holmedwa04 Posted May 30, 2010 Author Share Posted May 30, 2010 Thats kind of what I mean but I don't know it doesn't look like I was hoping it too. I mean the problem with the first div not stretching isn't too great really... the main bit is centering the links if possible?Sorry to be a pain Link to comment Share on other sites More sharing options...
dsonesuk Posted May 30, 2010 Share Posted May 30, 2010 what like this?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style type="text/css">.nav ul {float:left;/*width:100%;*/padding:0;margin:0 auto;list-style-type:none;overflow:hidden;display:inline-block;}.nav ul li a {float:left;text-decoration:none;text-align: center;color:black;/*margin:5px;padding:10px;*/display:block;}div.nav {padding: 5px;clear: both;background: #990033;border: 2px inset #ffffcc;font-family: calibri, arial, sans-serif;font-size: 13px;color: #ffffcc;line-height: 120%;width: 80%;text-align: center;margin: 0px auto;}div {clear:both;font-family: calibri, arial, sans-serif;font-size: 16px;color: #000000;/*line-height: 120%;*/}a:hover {background-color:#ffffcc;color:black}a:active {background-color:#990033;color:black}li {display:inline}.nav ul li span{display:block;border-right:1px solid #000;padding:0 10px;}#wrapper{width:100%;}#content {width:80%; margin:0 auto;}</style></head><body><div id="wrapper"><div class="nav"><div style="margin:0 auto;width:80%;overflow:hidden;"><ul><li><a href="#"><span>Link one</span></a></li><li><a href="#"><span>Link two</a></span></li><li><a href="#"><span>Link three is very long</a></li><li><a href="#"><span>Link four</a></span></li><li><a href="#"><span>Link five</a></span></li><li><a href="#"><span>Link six</a></span></li><li><a href="#"><span>Link seven is very long</a></li><li><a href="#"><span>Link eight</a></span></li></ul></div></div><div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum neque a orci lacinia tempor venenatis turpis dignissim. Phasellus eget quam purus, pharetra fermentum magna. Nunc at condimentum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempor euismod lorem nec consectetur. Vivamus sodales.</p><p>Integer ac lacinia augue. Sed faucibus tortor at odio eleifend gravida. Nulla non justo ut magna semper venenatis a eu ligula. Nunc fringilla, felis sit amet congue dignissim, ligula metus sodales lorem, nec.</p></div></div></body></html> Link to comment Share on other sites More sharing options...
holmedwa04 Posted May 30, 2010 Author Share Posted May 30, 2010 That doesn't appear to have centered the links. I mean like this: Link 1 | Link 2 | Link 3 Link 4 Kind of thing? So the line underneath the first if indeed the link stretch to more than one line goes in the center like if you were using the <center> tags. Link to comment Share on other sites More sharing options...
Rufus Posted May 31, 2010 Share Posted May 31, 2010 The thing you want to use here is: display: inline-block Use that on your link tags. It will force the one that wraps to just go to the next line instead.Try this out: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">.nav ul {padding:0;margin:0 auto;list-style-type:none;overflow:hidden;display:inline-block;}div.nav {padding: 5px;clear: both;background: #990033;border: 2px inset #ffffcc;font-family: Calibri, arial, sans-serif;font-size: 20px;color: #ffffcc;line-height: 120%;width: 80%;text-align: center;margin: 0px auto;}div {clear:both;font-family: calibri, arial, sans-serif;font-size: 16px;color: #000000;}/* Here's the new code */a {display: inline-block;color: #1CCEFF;}#content {width:80%; margin:0 auto;}</style></head><body><div id="wrapper"><div class="nav"><a href="#">Link one</a> | <a href="#">Link two</a> |<a href="#">Link three is very long</a> |<a href="#">Link four</a> |<a href="#">Link five</a> |<a href="#">Link six</a> |<a href="#">Link seven is very long</a> |<a href="#">Link eight</a></ul></div></div><div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum neque a orci lacinia tempor venenatis turpis dignissim. Phasellus eget quam purus, pharetra fermentum magna. Nunc at condimentum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempor euismod lorem nec consectetur. Vivamus sodales.</p><p>Integer ac lacinia augue. Sed faucibus tortor at odio eleifend gravida. Nulla non justo ut magna semper venenatis a eu ligula. Nunc fringilla, felis sit amet congue dignissim, ligula metus sodales lorem, nec.</p></div></div></body></html> Also, I was able to get rid of some of your spans that way, and it's not a list anymore.Cheers Link to comment Share on other sites More sharing options...
holmedwa04 Posted May 31, 2010 Author Share Posted May 31, 2010 Thanks... im unable to change the padding of the links though :S I would preferably like to be able to have the background to be slightly bigger than the text to make it look like a button. I will be using it when its complete where it is probably only the one that you have selected which shows up making it highlight the page that you are on.Scratch that last one... must have been doing something silly that was making it go funny. It seems to be working fine now... not even sure why I even thought I needed to use a list... a long line of line that automatically wraps onto the next line is much easier!Im just playing around with the formatting of it now Link to comment Share on other sites More sharing options...
holmedwa04 Posted May 31, 2010 Author Share Posted May 31, 2010 Just thought I would post the code for you to see: <html><head><style type="text/css">body {background-color: #ffffcc;color: black;font-size: 12px;font-family: calibri, arial, sans-serif;line-height: 150%}div.gal {clear: both;border-style: solid;font-family: Calibri, arial, sans-serif;font-size: 13px;color: #000000;line-height: 120%;width: 70%;text-align: center;padding: 5px;margin: 0px auto}a.gal:link {display: inline-block;color: #990033;font-weight: bolder;padding: 5px;text-decoration: none}a.gal:visited {display: inline-block;color: #990033;font-weight: bolder;padding: 5px;text-decoration: none}a.gal:hover {display: inline-block;color: #339900;font-weight: bolder;padding: 5px;text-decoration: underline overline}a.gal:active {display: inline-block;color: #ffffcc;font-weight: bolder;padding: 5px;text-decoration: none;background-color: #990033}</style></head><body><div class="gal"><a class="gal" id="buildingbaseboardn" href="#">Building Baseboard</a> | <a class="gal" id="electronicsn" href="#">Electronics</a> |<a class="gal" id="fittingpointsmotorsn" href="#">Fitting Points Motors</a> |<a class="gal" id="generaln" href="#">General</a> |<a class="gal" id="lightingeurostarn" href="#">Lighting Eurostar</a> |<a class="gal" id="makingtrackplann" href="#">Making Trackplan</a> |<a class="gal" id="nighttimen" href="#">Night Time</a> |<a class="gal" id="preparingloftn" href="#">Preparing Loft</a> |<a class="gal" id="sceneryn" href="#">Scenery</a> |<a class="gal" id="trackcleaningn" href="#">Track Cleaning</a></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum neque a orci lacinia tempor venenatis turpis dignissim. Phasellus eget quam purus, pharetra fermentum magna. Nunc at condimentum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempor euismod lorem nec consectetur. Vivamus sodales.</p><p>Integer ac lacinia augue. Sed faucibus tortor at odio eleifend gravida. Nulla non justo ut magna semper venenatis a eu ligula. Nunc fringilla, felis sit amet congue dignissim, ligula metus sodales lorem, nec.</p></body></html> The simple HTML page layout is just for test purposes to make it work in an online viewer. The a.gal:active is just to show what the links will look like when you are on that page. Link to comment Share on other sites More sharing options...
holmedwa04 Posted June 1, 2010 Author Share Posted June 1, 2010 Right, ive finally tried to implement it and it doesn't work and I can't for the life of me work out why? Here is the CSS code: #cse-search-results iframe {width: 99%;}a.nav:link {color: #ffffcc;font-size: 13px;font-weight: bolder;text-decoration: none;}a.nav:visited {color: #ffffcc;font-size: 13px;font-weight: bolder;text-decoration: none;}a.nav:hover {color: #ffffcc;font-size: 13px;font-weight: bolder;text-decoration: underline overline;}a.bot:link {color: #ffffcc;font-size: 11px;font-weight: bolder;text-decoration: none;}a.bot:visited {color: #ffffcc;font-size: 11px;font-weight: bolder;text-decoration: none;}a.bot:hover {color: #ffffcc;font-size: 11px;font-weight: bolder;text-decoration: underline overline;}a.gal:link {display: inline-block;color: #990033;font-weight: bolder;padding: 5px;text-decoration: none}a.gal:visited {display: inline-block;color: #990033;font-weight: bolder;padding: 5px;text-decoration: none}a.gal:hover {display: inline-block;color: #339900;font-weight: bolder;padding: 5px;text-decoration: underline overline}a:link {color: #000000;font-size: 12px;font-weight: bolder;text-decoration: none;}a:visited {color: #000000;font-size: 12px;font-weight: bolder;text-decoration: none;}a:hover {color: #339900;font-size: 12px;font-weight: bolder;text-decoration: underline overline;}#menu {list-style-type: none;margin: 0px;padding: 0px;}#index #indexn, #lights #lightsn, #archive #archiven, #about #aboutn, #layout #layoutn, #news #newsn {background-color: #ffaaaa;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc;}#index #indexn a.nav, #lights #lightsn a.nav, #archive #archiven a.nav, #about #aboutn a.nav, #layout #layoutn a.nav, #news #newsn a.nav {color: #990033;font-size: 13px;font-weight: 900;text-decoration: none;}#buildingbaseboard #buildingbaseboardn a.gal, #electronics #electronicsn a.gal, #fittingpointsmotors #fittingpointsmotorsn a.gal, #general #generaln a.gal, #lightingeurostar #lightingeurostarn a.gal, #makingtrackplan #makingtrackplann a.gal, #nighttime #nighttimen a.gal, #preparingloft #preparingloftn a.gal, #scenery #sceneryn a.gal, #trackcleaning #trackcleaningn a.gal {display: inline-block;color: #ffffcc;font-weight: bolder;padding: 5px;text-decoration: none;background-color: #990033;}#menu li {background-color: #990033;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc;}#nav {list-style-type: none;margin: 0px;padding: 0px;}#nav li {margin-left: 10px;padding: 10px;color: #000000;font-size: 16px;font-weight: bold;text-decoration: none;}#connect {list-style-type: none;margin-top: 1em;padding: 0px;}#connect li {margin-left: 10px;text-align: center;color: #000000;font-size: 16px;font-weight: bold;text-decoration: none;}#connect li img {display: inline;padding: 5px;vertical-align: middle;}body {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;background-color: #990033;margin: 5%;}table { color: black;font-size: 12px;font-family: calibri, arial, sans-serif;empty-cells: show;border-collapse: collapse;margin: 0px auto;width: 99%;} td {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;border: 2px solid black;}.w70 {width: 70%;}.w25 {width: 25%;border: none;padding-top: 10px;padding-bottom: 0px;padding-left: 10px;padding-right: 10px;text-align:center;}.w15 {width: 15%;text-align: center;}.add {width: 20%;text-align: center;border: none;}th {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;font-weight: bold;font-style: italic;text-align: center;border: 2px solid black;}h1, h2, h3, h4, h5, h6 {margin-top: 12px;margin-bottom: 12px;padding: 0px;}div.container {line-height: 150%;background-color: #ffffcc;margin: 0;width: 100%;}div.header {color: black;padding-top: 20px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;clear: left;}div.nav {text-align: center;margin: 0px;padding: 1em;width: 160px;float: left;}div.right {text-align: center;margin: 0px;padding: 1em;width: 160px;float: right;}div.main {padding-left: 195px;padding-right: 190px;padding-top: 15px;}div.footer {padding: 20px;clear: both;}div.footerbox {padding: 8px;clear: both;background: #990033;border: 2px inset #ffffcc;font-family: calibri, arial, sans-serif;font-size: 11px;color: #ffffcc;line-height: 120%;width: 305px;text-align: center;margin: 0px auto;}div.gal {font-family: Calibri, arial, sans-serif;font-size: 13px;color: #000000;line-height: 120%;width: 85%;text-align: center;padding: 5px;margin: 0px auto}img {display: block;margin: auto;border-width: 0px;}p {font-family: calibri, arial, sans-serif;text-align: justify;font-size: 12px;}p.nav {padding-left: 10px;}p.ref {margin-bottom: 0px;font-family: calibri, arial, sans-serif;font-style: oblique;font-weight: bold;color: #666666;text-align: center;font-size: 12px;}pre {font-family: calibri, arial, sans-serif;} And here is an example of the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Goathland - Gallery</title> <LINK rel="stylesheet" type="text/css" href="../stylesheet.css"> <LINK rel="stylesheet" type="text/css" href="../print.css" media="print"> <link rel="shortcut icon" href="../favicon.ico"> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body id="gallery"> <div class="container"> <div class="header"> <h1>Welcome to Goathland</h1> <p>This site is designed to display advances and updates in my railway layout named Goathland. It is a steam era Pre 1960s 00 Gauge layout. I am a firm believer of IMR (Its my railway) therefore not everything on the layout will be prototypical! I see a train that I like, I buy it, I run it and that's that! If it looks good then it must be good!</p> <img width="100%" alt="Goathland Diorama" src="/images/top.jpg"></div> <div class="nav"> <ul id="nav"> <li>Navigation</li> </ul> <ul id="menu"> <li id="indexn"><a class="nav" href="/index.php">Home</a></li> <li id="lightsn"><a class="nav" href="/lights.php">How to Make Lights</a></li> <li id="archiven"><a class="nav" href="/archive.php">News Archive</a></li> <li id="aboutn"><a class="nav" href="/about.php">About the Layout</a></li> <li id="layoutn"><a class="nav" href="/layout.php">Track Plan</a></li> <li id="newsn"><a class="nav" href="/news.php">Layout News</a></li> </ul> <ul id="connect"> <li><a title="Follow me on Twitter!" href="http://twitter.com/edwardholmes91"><img alt="Twitter Icon" width="45" src="/images/twitter.png"></a> <a title="My YouTube Channel!" href="http://www.youtube.com/user/edwardholmes91"><img alt="YouTube Icon" width="45" src="/images/youtube.png"></a></li> </ul> <p class="nav"><a title="Valid HTML 4.01 Strict" href="http://validator.w3.org/check?uri=referer"><img src="/images/valid-html401.png" alt="Valid HTML 4.01 Strict" height="31" width="88"></a></p> <p class="nav"><a title="Valid CSS 2.1" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px"src="/images/valid-css21.png"alt="Valid CSS 2.1!"></a></p></div> <div class="right"> <p></p> <form action=" [url="http://www.goathland.co.cc/searchresults.php""]http://www.goathland.co.cc/searchresults.php"[/url] id="cse-search-box"> <div> <input type="hidden" name="cx" value="005898720465705093109:lpdgcvokeiw"> <input type="hidden" name="cof" value="FORID:9"> <input type="hidden" name="ie" value="UTF-8"> <input type="text" name="q" size="15"> <input type="submit" name="sa" value="Go!"> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box〈=en"></script> <script type="text/javascript"> function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}</script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script> <script type="text/javascript"> try {var pageTracker = _gat._getTracker("UA-9944534-1");pageTracker._trackPageview();} catch(err) {}</script> <!--[if lt IE 7]><script defer type="text/javascript">var arVersion = navigator.appVersion.split("MSIE")var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } }}</script><![endif]--></div> <div class="main"> <h1>Image Gallery</h1> <p>Welcome to my image gallery. Here you will find all images that I have taken during building my layout. These are split up into smaller galleries. Please click on the image of the gallery you would like to see. To return to this page click the home button at the bottom of each gallery or the back button on your web browser. You may also select the gallery you would like to visit by selecting one of the links below:</p> <hr> <div class="gal"> <a class="gal" id="galleryn" href="/gallery/">Gallery Home</a> |<a class="gal" id="buildingbaseboardn" href="/gallery/buildingbaseboard/">Building Baseboard</a> | <a class="gal" id="electronicsn" href="/gallery/electronics/">Electronics</a> |<a class="gal" id="fittingpointsmotorsn" href="/gallery/fittingpointsmotors/">Fitting Points Motors</a> |<a class="gal" id="generaln" href="/gallery/general/">General</a> |<a class="gal" id="lightingeurostarn" href="/gallery/lightingeurostar/">Lighting Eurostar</a> |<a class="gal" id="makingtrackplann" href="/gallery/makingtrackplan/">Making Trackplan</a> |<a class="gal" id="nighttimen" href="/gallery/night/">Night Time</a> |<a class="gal" id="preparingloftn" href="/gallery/preparingloft/">Preparing Loft</a> |<a class="gal" id="sceneryn" href="/gallery/scenery/">Scenery</a> |<a class="gal" id="trackcleaningn" href="/gallery/trackcleaning/">Track Cleaning</a> </div> <hr><table> <tr> <td class="w25"><a title="Building Baseboard - Click to enter gallery" href="buildingbaseboard"><img alt="Building Baseboard Image" src="buildingbaseboard/thumbs/001_grey.jpg" onMouseOver="this.src='buildingbaseboard/thumbs/001.jpg'" onMouseOut="this.src='buildingbaseboard/thumbs/001_grey.jpg'"></a></td> <td class="w25"><a title="Electronics - Click to enter gallery" href="electronics"><img alt="Electronics Image" src="electronics/thumbs/013_grey.jpg" onMouseOver="this.src='electronics/thumbs/013.jpg'" onMouseOut="this.src='electronics/thumbs/013_grey.jpg'"></a></td> <td class="w25"><a title="Fitting Points Motors - Click to enter gallery" href="fittingpointsmotors"><img alt="Fitting Points Motors Image" src="fittingpointsmotors/thumbs/018_grey.jpg" onMouseOver="this.src='fittingpointsmotors/thumbs/018.jpg'" onMouseOut="this.src='fittingpointsmotors/thumbs/018_grey.jpg'"></a></td> <td class="w25"><a title="General - Click to enter gallery" href="general"><img alt="Goathland From Footbridge Image" src="general/thumbs/010_grey.jpg" onMouseOver="this.src='general/thumbs/010.jpg'" onMouseOut="this.src='general/thumbs/010_grey.jpg'"></a></td> </tr> <tr> <td class="w25"><p class="ref">Building Baseboard</p></td> <td class="w25"><p class="ref">Electronics</p></td> <td class="w25"><p class="ref">Fitting Points Motors</p></td> <td class="w25"><p class="ref">General</p></td> </tr> <tr> <td class="w25"><a title="Lighting Eurostar - Click to enter gallery" href="lightingeurostar"><img alt="Ligthing Eurostar Image" src="lightingeurostar/thumbs/010_grey.jpg" onMouseOver="this.src='lightingeurostar/thumbs/010.jpg'" onMouseOut="this.src='lightingeurostar/thumbs/010_grey.jpg'"></a></td> <td class="w25"><a title="Making Track Plan - Click to enter gallery" href="makingtrackplan"><img alt="Making Track Plan Image" src="makingtrackplan/thumbs/008_grey.jpg" onMouseOver="this.src='makingtrackplan/thumbs/008.jpg'" onMouseOut="this.src='makingtrackplan/thumbs/008_grey.jpg'"></a></td> <td class="w25"><a title="Night time - Click to enter gallery" href="night"><img alt="Night Time Image" src="night/thumbs/007_grey.jpg" onMouseOver="this.src='night/thumbs/007.jpg'" onMouseOut="this.src='night/thumbs/007_grey.jpg'"></a></td> <td class="w25"><a title="Preparing Loft - Click to enter gallery" href="preparingloft"><img alt="Preparing Loft Image" src="preparingloft/thumbs/009_grey.jpg" onMouseOver="this.src='preparingloft/thumbs/009.jpg'" onMouseOut="this.src='preparingloft/thumbs/009_grey.jpg'"></a></td> </tr> <tr> <td class="w25"><p class="ref">Lighting Eurostar</p></td> <td class="w25"><p class="ref">Making Track Plan</p></td> <td class="w25"><p class="ref">Night Time</p></td> <td class="w25"><p class="ref">Preparing Loft</p></td> </tr> <tr> <td class="w25"> </td> <td class="w25"><a title="Scenery - Click to enter gallery" href="scenery"><img alt="Making Tree Image" src="scenery/thumbs/017_grey.jpg" onMouseOver="this.src='scenery/thumbs/017.jpg'" onMouseOut="this.src='scenery/thumbs/017_grey.jpg'"></a></td> <td class="w25"><a title="Track Cleaning - Click to enter gallery" href="trackcleaning"><img alt="Electronic Track Cleaners Image" src="trackcleaning/thumbs/003_grey.jpg" onMouseOver="this.src='trackcleaning/thumbs/003.jpg'" onMouseOut="this.src='trackcleaning/thumbs/003_grey.jpg'"></a></td> <td class="w25"> </td> </tr> <tr> <td class="w25"> </td> <td class="w25"><p class="ref">Scenery</p></td> <td class="w25"><p class="ref">Track Cleaning</p></td> <td class="w25"> </td> </tr> </table> </div> <div class="footer"> <div class="footerbox"> © 2008 - 2010 Edward Holmes - Goathland, All Rights Reserved<br> Kindly Hosted by: <a class="bot" href="http://liamgreen94.com/">LiamGreen94</a><br> <a title="contact@goathland.co.cc" class="bot" href="mailto:contact@goathland.co.cc?Subject=Contact Us">Contact Us</a> </div></div> </div> </body> </html> Please help, I am using an id in the body of each page, and id on the link itself and also a.gal so the CSS selectors come out like this:#gallery #galleryn a.gal, etc. Link to comment Share on other sites More sharing options...
holmedwa04 Posted June 1, 2010 Author Share Posted June 1, 2010 Sorry folks fixed it now... I removed the a.gal from everything leaving the following selectors: #gallery #galleryn, #buildingbaseboard #buildingbaseboardn, #electronics #electronicsn, #fittingpointsmotors #fittingpointsmotorsn, #general #generaln, #lightingeurostar #lightingeurostarn, #makingtrackplan #makingtrackplann, #nighttime #nighttimen, #preparingloft #preparingloftn, #scenery #sceneryn, #trackcleaning #trackcleaningn {display: inline-block;color: #ffffcc;font-weight: bolder;text-decoration: none;padding: 5px;background-color: #990033;} Seems to work fine now Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.