19 replies [Last post]
quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

I am new to CSS and I am using frontpage for the table layout but also CSS.
I've set up a navigation list. But at the end of the list the border bar shows, which I do not want, I have tried adding classes and selectors but I cannot get rid of it. Can anyone help?
Here is the code.
The HTML first:-

li#last {border-right: 0px;}


  1. contacts

  2. referrals

  3. about

  4. benefits

  5. your say

  6. site map


and the css
li.last { border-right: 0; }
ol {
float:left;
list-style-type:none;
}
li {
display:inline;
text-size: 0.5em;
list-style: none; }

a {
float: right;
text-decoration:none;
padding:0.2em 0.6em;
color:#FFFFFF;
background-color:#6600CC;
border-right:1px solid;
font-weight: bold;
a:hover {
color:#FFFFFF;
background-color:#E60073;
border-right: 1px solid;
}
a:active {
color:#FFFFFF;
background-color:#E60073;
border-right: 1px;
}

Christine

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

added

I tried first using just the css stylesheet but added the embedded style too after it did not work.

Christine

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

quartzy wrote:I am using

quartzy wrote:
I am using frontpage for the table layout

Wrong.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

wrong

well I am learning css and frontpage gives me a layout that I just find too hard to do with css, ie the positioning and the percentages, ems, pixels, floats etc. I can only learn so much at a time when I have mastered css layouts I will use them. Saying wrong is not very helpful.

Christine

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

quartzy wrote:well I am

quartzy wrote:
well I am learning css and frontpage gives me a layout that I just find too hard to do with css, ie the positioning and the percentages, ems, pixels, floats etc. I can only learn so much at a time when I have mastered css layouts I will use them. Saying wrong is not very helpful.

True, though. And actually very helpful despite what you think. You are really just shooting the messenger.

And by doing that you are just storing up trouble for yourself and eventually you'll have to forget all you "learn" this way and start from scratch.

CSS is built on the foundation of valid and semantic html. Unless you can write valid and semantic html you'll never get anywhere with CSS. I'm sorry, but there is no shortcut to mastery of this topic. You have to start at the beginning and learn the right approach right from the start or you'll be wasting your time.

You'll save yourself much time and trouble by forgetting all you think you know now about web design and going to the HTML dog tutorials and working through them from the begining.

Throw out frontpage and get yourself a good text editor and learn to write for the web the right way.

Or not - it's your life. But the approach you are taking will just waste hours and hours of that valuable life for no real purpose.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

RIGHT! now both of you,

RIGHT! now both of you, having got those points out of the way, get back into this thread and explain to the OP why what he is trying to do isn't probably going to work the way that they are going about things. Lets also help the poster with the original question, and this isn't a flipping request :mad: !!

Remember this is a tyros forum section.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

css beginners

thanks for that Hugo, but I still do not have the answer, is this forum for beginners or not as I may need to use another forum. Everyone is so keen on telling me what is right, when I am just learning. I need to get this website done quick for a charity. So I cannot do it with css layouts, it is taking me ages to learn CSS coding itself.

Christine

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

<ol><li id="last"><a

  1. contacts
  2. referrals
  3. about
  4. benefits
  5. your say
  6. site map

shouldn't you actually be adding the ID on the last lit-item? as in:

  1. contacts
  2. referrals
  3. about
  4. benefits
  5. your say
  6. site map

Verschwindende wrote:
  • CSS doesn't make pies

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

yes, but as it is right

yes, but as it is right aligned, the last becomes the first. This forum just picks holes in peoples comments.

Christine

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No we don't just pick holes

No we don't just pick holes in peoples comments, TPH is trying to help.

In your first post you show CSS rules that describe a class called 'last' yet the markup shows an ID so you ought to look at that. Place the rule last after the other border rules As for left becoming right I don't see where you have floated the li elements to the right :? there are properties setting li elements inline and your parent ul is floated left, perhaps I missed the rules however that shouldn't be an issue.

Edit/ I see you've floated the anchors; not sure why you have floated the anchors and changed the li elements to display:inline, leave the li as normal and set the anchors to display:block.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

nav links

I realise I had some errors in my work which I have fixed, yet, despite the errors I am still having problems with the nav links. As I have two sets. One horizontal and one vertical. The vertical links do not lay one after the other but jumbled up, and I cannot seem to remove the margin, I believe that I need to add some code to remove the default margin for lists but as yet I cannot remember it or find it. I enclose a screen shot. And the codes






  1. contacts

  2. referrals

  3. about

  4. benefits

  5. your say

  6. site map

css

ol { list-style-type:none; } li { display:inline; text-size: .63em; list-style-type: none; }

#navlinks {
padding-top: 0.3em;
padding-bottom: 0.3em;
border-right: 0;
text-align: left;
margin: 0;
width: 20%;
display: block; }

.first { border-right: 0; }

a {
text-decoration:none;
padding:0.3em 0.6em;
color:#FFFFFF;
background-color:#6600CC;
border-right: 1px solid;
font-weight: bold; }

a:hover {
color:#FFFFFF;
background-color:#E60073;
border-right: 1px solid; }

a:active {
color:#FFFFFF;
background-color:#E60073;
border-right: 1px solid; }

maybe someone can let me know what the code is to remove default margin for lists, and should I add more padding?

AttachmentSize
screenshot.gif 21.84 KB

Christine

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

I have fixed everything

I have fixed everything except one small problem now with the header showing the links color at one side of the margin.

Christine

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

CODE???

Verschwindende wrote:
  • CSS doesn't make pies

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

Here is the code I just need

Here is the code I just need to find a way of removing the hyperlink coding for the header.
CSS

body { font-family: Verdana, sans-serif;
font-size: 0.75em;
color: #000000;
text-decoration: none;
background-color: #E60073;
text-align: center; }

header#img {
border : 0;
width : 750px;
height : 110px; }

.centred { margin: 0 auto; }

ol {
margin: 0;
padding: 0;
list-style-type:none; }

li { display:inline;
text-size: .63em;
list-style-type: none; }

.first { border-right: 0; }

#navigation {
margin: 0;
padding: 0;
list-style-type: none; }

#navigation li {
margin-bottom: 2px; }

#navigation a {
background: #6600CC;
color: #fff;
display: block;
width: 120px;
border-left: 1px solid;
padding-left: 10px; }

#navigation a:hover {
background: #E60073;
color: fff;
text-decoration: none;
border-left: 1px solid; }

a {
text-decoration:none;
padding-right: 8px;
padding-left: 8px;
color:#fff;
background: #6600CC;
border: 1px solid; }

a:hover {
color:#fff;
background-color:#E60073;
border: 1px solid; }

a:active {
color:#fff;
background-color:#E60073;
border: 1px solid; }

and the HTML










  1. contacts

  2. referrals

  3. about

  4. benefits

  5. your say

  6. site map





AttachmentSize
header problem.jpg 37.12 KB

Christine

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

To set different styling you

To set different styling you use one of two techniques: you either set a class on one of the elements or you use descendent styling selectors which apply styles based on a parent ID or class name i.e:

a {color:black;}

#nav a {color:red;}

Quartzy would you please have a read of the posting guidelines for instruction on how to format code for posting.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Let me repeat

thepineapplehead wrote:

Verschwindende wrote:
  • CSS doesn't make pies

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

re hover image

Yes I did read the messages but was not sure what to insert for what I needed to show. Also I will in future enclose my code in code tags, if thats what you need. I realise I need to add a class or selector but I am not sure on where to add it, to the a and hover css or the image css. I suppose I could enclose the image in a div and then add a selector. Would this be the best way? Appreciate your help

Christine

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Are you wanting to style the

Are you wanting to style the two sets of links differently?

If so try and use what's already there, eg:



  1. mosaic workshop

  2. screen printing

  3. creative crafts

  4. web design

  5. gallery

  6. events

  1. contacts
  2. referrals
  3. about
  4. benefits
  5. your say
  6. site map

the second set of links (the horizontal one) isn;t wrapped in anything useful but the first set are. For that reason, you'd use:

ol { color: pink; }

etc for the second list (on the right), then use the ID of the first links to overwrite it, eg:

#navigation ol { color: blue; }

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quartzy The above is an

Quartzy The above is an example of what I have already mentioned by way of descendent styling, check posts carefully if you don't understand the responses just ask.

You do not have to add a class or ID that is one of the choices, but preference should always go to descendent styling selectors i.e look for a unique identifier that already exists and that is grouping the styles that you wish to modify, then apply your rulesets such that the selectors read 'if an anchor has a parent or ancestor called ... then apply these rules' as demonstrated in my post and TPH's.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

quartzy
Offline
Regular
Last seen: 10 years 16 weeks ago
Joined: 2007-12-23
Posts: 24
Points: 0

re hover on image

merry christmas to you. I have done it now, I added the other navigation in its own div, and so bypassed the list and ol option. Thanks for your help if you want me to put the code of what I done just let me know. It looks a lot of css but it works

Christine