Jump to content

Navigation And A Span


bicyclegirl
 Share

Recommended Posts

I am a newbie to it all so don't get very technical yet...I've created a layout that includes a navBar external css class=".nav"and a hyperlink styled with external css class="span.mailto". Now my nav bar is using the css styling meant for the span hyperlink. My navBar is supposed to be no margin and the link,visited and hover are set at left-90px, right-40px but it's not responding...helphere's the css for each element.navigation{background-color:#163181;margin-left:0px;margin-right:0px;}a:link{font-family:Arial;font-size:.85em;color:white; text-decoration: none; margin-left:90px;margin-right:40px;}a:visited{font-family:Arial;font-size:.85em;color:yellow; text-decoration: none;}a:hover{font-family:Arial;font-size:.85em;color:orange;text-decoration: none;}span.mailtoa:link{ color:orange;text-decoration: none;margin:6px;}span.mailtoa:hover{color:white;}here's the html for each as well<div class="navigation"><a href="index.html">Home</a> <a href="everydayPhotos.html">Everyday</a><a href="photoArt.html">Photo Art</a> <a href="restoration.html">Restoration</a> <a href="about.html">The Artist</a> <a href="linksPage.html">Links</a></div><span class="mailto"/><a href="mailto:notmyrealone@gmail.com">Email</a>

Link to comment
Share on other sites

is this an external stylesheet you are using? are you calling it within the HTML page itself somewhere?
thanks for replying...and sorry I was gone for a while so just now saw your note.yes this is an external css and it is linked to my html page. the span is only on one html page of a 6 page layout. the navigation bar is on all 6 html pages
Link to comment
Share on other sites

thanks for replying...and sorry I was gone for a while so just now saw your note.yes this is an external css and it is linked to my html page. the span is only on one html page of a 6 page layout. the navigation bar is on all 6 html pages
btw... the span is near the end of a paragraph...
Link to comment
Share on other sites

I am a newbie to it all so don't get very technical yet...I've created a layout that includes a navBar external css class=".nav"and a hyperlink styled with external css class="span.mailto". Now my nav bar is using the css styling meant for the span hyperlink. My navBar is supposed to be no margin and the link,visited and hover are set at left-90px, right-40px but it's not responding...helphere's the css for each element.navigation{background-color:#163181;margin-left:0px;margin-right:0px;}a:link{font-family:Arial;font-size:.85em;color:white; text-decoration: none; margin-left:90px;margin-right:40px;}a:visited{font-family:Arial;font-size:.85em;color:yellow; text-decoration: none;}a:hover{font-family:Arial;font-size:.85em;color:orange;text-decoration: none;}span.mailtoa:link{ color:orange;text-decoration: none;margin:6px;}span.mailtoa:hover{color:white;}here's the html for each as well<div class="navigation"><a href="index.html">Home</a> <a href="everydayPhotos.html">Everyday</a><a href="photoArt.html">Photo Art</a> <a href="restoration.html">Restoration</a> <a href="about.html">The Artist</a> <a href="linksPage.html">Links</a></div><span class="mailto"/><a href="mailto:notmyrealone@gmail.com">Email</a>
Instead of finishing the <span...> within the carets, have you tried finishing the span outside the anchor closing? <span class="mailto"><a href="mailto:notmyrealone@gmail.com">Email</a></span>
Link to comment
Share on other sites

Instead of finishing the <span...> within the carets, have you tried finishing the span outside the anchor closing? <span class="mailto"><a href="mailto:notmyrealone@gmail.com">Email</a></span>
the problem is that the navBar now uses the span's css not it's own css. I'll try closing outside the spans anchor and see if that helps...
Link to comment
Share on other sites

Instead of finishing the <span...> within the carets, have you tried finishing the span outside the anchor closing? <span class="mailto"><a href="mailto:notmyrealone@gmail.com">Email</a></span>
bigsilk, the symbol < or > is not a caret. Together they are angle brackets.Caret, sometimes spelled carat, is the name for the symbol ^ in ASCII and some other character sets. Its Unicode code point is U+005E, and its ASCII code in hexadecimal is 5E. The term "caret" is most frequently used to refer to a circumflex accent over a letter especially in French. It is also a mark used by an author or editor to indicate where something is to be inserted into a text.
Link to comment
Share on other sites

the nav_has no margins, the margins are are assigned to a:link but also cascade down to a:hover, and a:visited. Not exactly clear what you want, but if you want the margins width to change???, add margins to hover, visited and change size.My opinion if you want to equally space them out, give the navigation a a fixed width, which span equally across the menu bar, or instead of margins use padding: 0 30px; which will add 30px of padding each side of text.is the mailto span supposed to be within the navbar??see my coding below:.navigation{background-color:#163181;margin-left:0px;margin-right:0px;}.navigation a {font-family:Arial;font-size:.85em;text-decoration: none;padding: 0 30px;}.navigation a:link{ color:#FFF; }.navigation a:hover{color:orange;}.navigation a:visited{color:yellow;}span.mailto a{text-decoration: none;margin:6px;}span.mailto a:link{color:orange;}span.mailto a:hover{color:white;}

Edited by dsonesuk
Link to comment
Share on other sites

bigsilk, the symbol < or > is not a caret. Together they are angle brackets.Caret, sometimes spelled carat, is the name for the symbol ^ in ASCII and some other character sets. Its Unicode code point is U+005E, and its ASCII code in hexadecimal is 5E. The term "caret" is most frequently used to refer to a circumflex accent over a letter especially in French. It is also a mark used by an author or editor to indicate where something is to be inserted into a text.
'bigsilk' forms a 'W' on his forehead with his hands, as to indicate 'whatever...'How about addressing the issue and not correcting me in a public forum.And if you are going to copy verbatim from another source, you should cite it. I found almost the same exact thing on Wikipedia:"Caret, sometimes spelled carat, is the name for the symbol ^ in ASCII and some other character sets. Its Unicode code point is U+005E, and its ASCII code in hexadecimal is 5E."-http://en.wikipedia.org/wiki/Caret
Link to comment
Share on other sites

the nav_has no margins, the margins are are assigned to a:link but also cascade down to a:hover, and a:visited. Not exactly clear what you want, but if you want the margins width to change???, add margins to hover, visited and change size.My opinion if you want to equally space them out, give the navigation a a fixed width, which span equally across the menu bar, or instead of margins use padding: 0 30px; which will add 30px of padding each side of text.is the mailto span supposed to be within the navbar??see my coding below:.navigation{background-color:#163181;margin-left:0px;margin-right:0px;}.navigation a {font-family:Arial;font-size:.85em;text-decoration: none;padding: 0 30px;}.navigation a:link{ color:#FFF; }.navigation a:hover{color:orange;}.navigation a:visited{color:yellow;}span.mailto a{text-decoration: none;margin:6px;}span.mailto a:link{color:orange;}span.mailto a:hover{color:white;}
well, what I wanted was that the bar itself stretch the width of my pages. the words on the navBar (home, about, etc, etc) was to begin 90px from the leftand have 40px of space between each word. I know they will not go across the whole page. the span is no longer an issue but now a new one has come up.... I have created a list on another page that is formatting itself using the navBar code.the nav and list both have <a href=.....> tags in them so I guess that is confusing the css.the list is in list form but giving the bullets a 90px left-margin, 40px between the bullet andlist item and using the navs colors. I tried putting the list in <div1 class="li">(the nav is <div class="nav") and still have trouble getting it to use it's own css. I thought the <div1> would do it. any suggestions??
Link to comment
Share on other sites

'bigsilk' forms a 'W' on his forehead with his hands, as to indicate 'whatever...'How about addressing the issue and not correcting me in a public forum.And if you are going to copy verbatim from another source, you should cite it. I found almost the same exact thing on Wikipedia:"Caret, sometimes spelled carat, is the name for the symbol ^ in ASCII and some other character sets. Its Unicode code point is U+005E, and its ASCII code in hexadecimal is 5E."-http://en.wikipedia.org/wiki/Caret
bigsilk,I moved the closing span tag over as you suggested. it worked! :)thank you very much...now I have a new css issue with a listsee reply to 'dsonesuk'.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...