Baggy Posted January 26, 2009 Report Posted January 26, 2009 We have 2 navigation bars on our web pages - the original ones across the top, created by the site designers and a new one down the side, added by me. The index.html which I am using as the 'template' for new pages I'm adding(my description - not a 'proper' template), has some CSS script at the top of the code to the page. In there it says - a: link colour:#ffffff text-decoration: none. As a result the text in the new navigation bar (nested table) changes from dark grey (#666666) to white, when I create a hyperlink. Is there a way to stop this so that the font color doesn't change please? Quote
falkencreative Posted January 26, 2009 Report Posted January 26, 2009 Yes, you can. You'll just need to add some css specifying the new link color. For example, say your nav bar has a class of "nav", you could add this to your css file: .nav a:link { color:#666666; } and remember, there are other states for links, which include: a:visited, a:hover and a:active. "link" is a regular link, "visited" is a link that has been visited, "hover" is a link that the user is hovering over with the mouse, and "active" is a link in the moment when it is being clicked. Quote
Baggy Posted January 26, 2009 Author Report Posted January 26, 2009 Thanks for the response. The nav bar is a nested table and when I highlight it, it refers to Div ID (blank drop-down), Class is shown as none and there's an Edit CSS button. Are you able to say what I should enter in the boxes please? Quote
falkencreative Posted January 26, 2009 Report Posted January 26, 2009 Do you have the page posted anywhere online? It's much easier to look directly at the code. If I understand you correctly, you'll need to select the entire nav bar, and give it a class by adding "nav" to the class input in Dreamweaver. Then, you'll need to add the css I showed you above, or edit it to your liking and then add it. Quote
Baggy Posted January 26, 2009 Author Report Posted January 26, 2009 If I click on the edge of the table, so that the border becomes black and it's then possible to drag the sizes in/out, up/down, then in Properties it just refers to Table ID. If I click on the table border again, it turns blue and Properties shows the Div ID and Class, as mentioned previously. This is in Dreamweaver CS3 by the way. Quote
Baggy Posted January 27, 2009 Author Report Posted January 27, 2009 Ben, many thanks, I have now got the linking/colour issues sorted - very grateful. One more, related, question if I may .... The table I have inserted inside a Div, for the nav bar, moves down the Div when the text expands the page. I realise I can lock it to the top/middle/bottom of the Div. However, for appearances, I would like it to appear about 1/4 of an inch below the top of the Div, so that it has the background colour of the Div as a border. This would result in the 'margin/border' looking roughly equal round the top & sides. Can this be done? Quote
Andrea Posted January 27, 2009 Report Posted January 27, 2009 Why are you inserting a table - are you displaying tabular data? If not, use divisions. Quote
Baggy Posted January 27, 2009 Author Report Posted January 27, 2009 I guess I'm doing it the only way I know how? Quote
Baggy Posted January 27, 2009 Author Report Posted January 27, 2009 Do I take it that I can't do what I wanted? Quote
jlhaslip Posted January 27, 2009 Report Posted January 27, 2009 You can have different colors on different Menus by using a class or an ID to identify the menus. .class a:link { color: white; } .class a:hover { color: red; } #id a:link { color: black; } #id a:hover { color: blue; } An ID would be 'stronger' than a class. Specificity applies more strength to the ID. Quote
Baggy Posted January 27, 2009 Author Report Posted January 27, 2009 jlhaslip - thanks for the response, got that sorted now, cheers. Need to sort out how to permanently position a table within a Div, to stop my new Nav Bar moving down when text in the main section extends the page. That's the one that seems to be causing some 'head scratching', Quote
Andrea Posted January 27, 2009 Report Posted January 27, 2009 I guess I'm doing it the only way I know how?You can do whatever you want to - but if you should decide you want to do/learn it the right way, you may want to use divs for layout and tables for tabular data. Quote
Baggy Posted January 28, 2009 Author Report Posted January 28, 2009 Thelma, Firstly, can you please explain what is wrong with using tables for a navigation bar? Second, I'm just trying to make the site look as good as possible, whilst we add a lot more content. Once this is done, I propose to hand over to a professional to have a complete make-over, The layout methods will be updated/improved then. For now, I would really appreciate it if you/someone can tell me if I can fix the position of the table, a little way down from the top of the Div which it is nested in, as it would then look better on each page. cheers Quote
Andrea Posted January 28, 2009 Report Posted January 28, 2009 Navigation is a list of items - that's why navigation menus should be coded as a list. HTML tags have semantic meaning. Of course you can style your titles with an inline tag, but there are tags which assign specific importance to titles - that's helpful for search engines - for detailed discussions, see Follow the links in the first two posts I thought you had posted a link, but if so, then maybe our Spambot got it. Can you repost, but include spaces to prevent that - for example: www. ki llersi tes.com (break up any words that could be found by google, etc.) Quote
Baggy Posted January 28, 2009 Author Report Posted January 28, 2009 Thanks again Thelma - a lot of reading there, which I will get to asap. In the meantime, here's a link to the 'test' index page I'm working on:- www. shire finan cial.co.uk/new_work/index1.html I've already been told the code is a mess - I'm just trying to make the best of a bad job for now as previously explained. cheers Quote
Baggy Posted January 30, 2009 Author Report Posted January 30, 2009 "For now, I would really appreciate it if you/someone can tell me if I can fix the position of the table, a little way down from the top of the Div which it is nested in, as it would then look better on each page." Can anyone help please? Quote
Andrea Posted January 30, 2009 Report Posted January 30, 2009 I started looking into it - but it's such a mess with all the table cells.... which makes another excellent point to NOT use tables - they create a ridiculous code-mess which makes updating more difficult, and trying to adjust stuff a major PITA. I managed to get the navigation grid to align with the top by: /blank-spacer.gif" width="5" height="5"> MORTGAGES And to your internal styles, add: #leftnav {margin-top: 30px;} that should do it. Quote
lm Posted January 30, 2009 Report Posted January 30, 2009 It would be a pity if you launch new website on outdated code, so, to promote more semantic and "table less" coding I've re-used one of standard templates into your layout on CSS basis. You can copy-paste HTML of this template, download CSS file with it and edit it further. Quote
jlhaslip Posted January 30, 2009 Report Posted January 30, 2009 It would be a pity if you launch new website on outdated code, so, to promote more semantic and "table less" coding I've re-used one of standard templates into your layout on CSS basis. You can copy-paste HTML of this template, download CSS file with it and edit it further. nice work. very nice of you to do this. Quote
Baggy Posted January 31, 2009 Author Report Posted January 31, 2009 Thelma - many thanks done that and it works fine - very grateful. Im - that is so kind of you, many thanks indeed. Errr ... I just need to understand what you mean by "You can copy-paste HTML of this template, download CSS file with it and edit it further." I understand that I view 'source' in the page in your link, copy & paste the code, done that and saved it. I don't understand what to do next - sorry, I know I'm being thick! Quote
Andrea Posted January 31, 2009 Report Posted January 31, 2009 sorry, I know I'm being thick!You're not being thick - you're new. Work through some of Stef's tutorials to get an understanding of HTML and CSS - it'll help you understand what lm is talking about: http://www.killersites.com/forums/topic/76/where-can-i-learn-web-design/ Quote
Baggy Posted January 31, 2009 Author Report Posted January 31, 2009 OK Thelma, thanks. There's a load of stuff there to go through, so I will be some time before I can try lm's suggestions and report back. Quote
lm Posted January 31, 2009 Report Posted January 31, 2009 I will leave this page online for the time being till you get all files. So you will need 2 files- HTML you copy from seeing source code of a page and css file. How to get CSS: 1.find this line in HTML: As you can see, HTML page is connected to style.css file which you will need to keep in a same folder, as your HTML page. 2.this is a link to style.css file 3.Copy- paste all css: In your Dreamweaver create a new file with .css extension and copy paste all css into it. Save this file as style.css. Once you've done it, preview your HTML page in browser now: you should see your very own CSS template with all images, colors and so on. Now you can edit both HTML and CSS the way you want it. 4. Keep us updated on your progress 5. Dont give up - if you once go all the way with CSS, you'll learn how to create modern websites. Quote
Baggy Posted February 1, 2009 Author Report Posted February 1, 2009 lm - once again thanks - but I am still struggling to follow your instructions. Here's what I've done so far: followed the link to the .css file and copied all the code then in DW I've created a new Folder (SFM-css) so that I don't risk screwing-up what I've already done (which, so far I'm quite pleased with, compared to what we have 'live' on the web at present). In the new folder, I created a new file and named it style.css and pasted all the copied code into and saved it. I think you're saying that I only need an HTML file in here now to make this 'new version of the site' work? If so, do I copy index1.html (my work-in-progress Home Page) into the new folder and put into the code somewhere to make it work off 'style.css' Or have I got that totally wrong (again)? I hope this is not too exasperating for you! Quote
Andrea Posted February 1, 2009 Report Posted February 1, 2009 I think you're saying that I only need an HTML file in here now to make this 'new version of the site' work? If so, do I copy index1.html (my work-in-progress Home Page) into the new folder and put into the code somewhere to make it work off 'style.css'You need to use the HTML file that lm created - not your old one. Yours doesn't have the proper divisions, etc. to work with the stylesheet. Use her html page, just update it with your content. Quote
Baggy Posted February 1, 2009 Author Report Posted February 1, 2009 Thelma - got it, thanks. I have it working in DW, now I just have to learn how to edit it! It looks and works quite differently from what I'm used to (in my very limited experience), for instance, I can't see any measurements for the gaps around/between the images and nav bars and there are some adjustments needed. I will certainly try to get to grips with this but may have to just put the finishing touches to what we have so far, for expediency, as I fear it will take me some time to learn the CSS 'way'. Many thanks to both of you for your kind help so far. Quote
lm Posted February 1, 2009 Report Posted February 1, 2009 I can't see any measurements for the gaps around/between the images and nav bars and there are some adjustments needed. Now you can do these adjustments in browser, previewing your page. Install Firefox ( if you havent got it yet), and Web developer bar plugin to it. Then preview your page in Firefox, click CSS - Edit CSS on Web developer bar and changing margins, you can move your divs around. On the same Web Developer Bar there is a button Outline. Click on it and choose the option Outline block level elements - you will get the position of all divs and other blocks in your template. Again, changing margins in CSS, adjust the position of the divs. Quote
Baggy Posted February 2, 2009 Author Report Posted February 2, 2009 I have downloaded Firefox and the Web Developer but in CSS - Edit CSS, I can't find anything saying 'change margins'. Once again, sorry if I'm missing the obvious. Quote
lm Posted February 2, 2009 Report Posted February 2, 2009 (edited) No problems, it is just a learning curve. Believe me you've made a big step forward a lot already, editing now your page in Firefox. Now if you see your your CSS in Edit CSS, look there for id of box you want to move, it will be something (for example) like in these lines: #leftheading { background-image: url(http://www.shirefinancial.co.uk/new_work/images/left-pen.jpg); background-repeat: no-repeat; background-position: center top; display: inline; margin: 0 4px 0 0; width: 245px; height: 200px; float: left; padding: 0; } #centerheading { background-image: url(http://www.shirefinancial.co.uk/new_work/images/middle-montage.jpg); background-repeat: no-repeat; background-position: center top; display: inline; margin: 0 2px 0 0; padding: 0; width: 250px; height: auto; float: left; } #rightheading { background-image: url(http://www.shirefinancial.co.uk/new_work/images/right-money.jpg); background-repeat: no-repeat; background-position: center top; display: inline; margin: 0; padding: 0; width: 245px; height: auto; float: right; } look for this in #leftheading line: margin: 0 4px 0 0; now, if you change 4px to 6px, you'll move nearby box ( #centerheading) to the right. And so on. By the way, to pick up CSS very quickly, go through W3schools CSS tutorials. Ask you questions if you need help. Edited February 2, 2009 by lm Quote
Baggy Posted February 3, 2009 Author Report Posted February 3, 2009 Once again - thanks lm. I will read the stuff in your link and start 'having a go' at css editing. I will let you know how I get on. Cheers Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.