Hi simple question I hope

Can you folks please advise as to best solve this page?

I would like for the entire banner to be visible. an horizontal scroll bar? a zoom thing? Doing a <span> or a new css doc placing the links in an horizontal display?
Also how can I post text from a css doc. so to change it I only have to change the css & not each html?
Thanks
D

If instead of using inline styles, or an in-document stylesheet, you create a style.css external stylesheet, and use


<head>
  <!-- other stuff here -->
  <link rel="stylesheet" type="text/css" href="/path/to/style.css" />
</head>

in each of your html pages, then you should be able to update your css externally and it be reflected on all pages.

Already using an external style sheet. And quite happy w/that. Like its functionality.

What do you mean by this, then?

Also how can I post text from a css doc. so to change it I only have to change the css & not each html?

I mean a either simple string of text located in the refered css. doc that fits in footer section or a a list that can also be posted from the css into the html.

I have no idea what you mean. Can you try to explain it more clearly?

What do you mean with the background is not kicking in? It is, but just the width and height of your link since anchors are inline elements. if you make them a block and give them a width or work with padding you will see the result.


#nav li a:link, #nav li a:visited {
  padding: 4px 12px;
  display: block;
  text-decoration: none;
  color: #245185;
  font-weight: normal;
}

Sherpa,
it’s not a good idea to add content from the CSS. It kind of defeats the purpose… BUT lets assume you will be using this in the proper semantic context.

to add text,or other stuff, you can use :before or :after and {content:“your text goes here.”}

lets say for some odd reason you want to add the word “copyright” to section of the footer…

.cr:before{ content:“Copyright :”;}

<div id=“footer”>
<p>PDXSherpa made this. <span class=“copyright”> 2010.</span></p>
</div>

it will output:
PdxSherpa made this. Copyright 2010

(it’s imortant to note that older versions of IE do not support this )

Hope that helps, and use wisely!!!

The background is kicking in but as you set it to the same colour as the existing background there will be no change. :slight_smile:

Use another colour and the hover will be visible. If you want the whole line to change color and not just the text you will need to set the anchor to display:block and then use padding on the anchor and not on the list.

e.g.


#nav li {
    border-bottom: 1px solid #0000ff;
    font-size: 90%;
[B]/* padding removed*/[/B]
}
#nav li a:link, #nav li a:visited {
    text-decoration: none;
    color: #245185;
    font-weight: normal;
 [I]   display:block;
    padding: 0.4em 0 0.2em 0;[/I]
}
#nav li a:hover {
    text-decoration: none;
    color:#ffffff;
   [B] background:red;[/B]
    font-weight: normal;
}


will only use it for the forces of good!
Thank you & that is exactly what I was thinking of.
changing the year date only on one css sheet rather than each html.
Of course one way around it too would be to do a
background-image: url(xxx/mainPage.jpg);
with the image providing the info.
Thanks!

Thank you & d’ho! I was trying to have the color change to be the same as the border.
I used your code

#nav{
    list-style: none;
    margin: 5px;
    padding: 0;
}

#nav li {
    border-bottom: 1px solid #0000ff;
    font-size: 90%;
}

#nav li a:link, #nav li a:visited {
    text-decoration: none;
    color: #245185;
    font-weight: normal;
    padding: 0.4em 0 0.2em 0;
}
#nav li a:hover {
    text-decoration: none;
    color:#ffffff;
    background:red;
    display: block;
    font-weight: normal;
}

and it is giving me the block display. But now only the “photo” turns white. although I did specify the "color: ffffff; " I am sure eventually it’ll make sense. thanks Paul.