CSS - Creating Hyperlinks
I want to have all my hyperlinks in my CSS file, so I can call them all at once. Is there any way to do this? Or do I have to code them into every page individually??
Similar TutorialsGreetings, i have a question regarding CSS hyperlinks. Here's what one of my sheets looks like: ==================== a:link{text-decoration:none; color:#0000ff; font-weight:bold;} a:visited{text-decoration:none; color:#0000ff; font-weight:bold;} a:hover{text-decoration:none; color:#00ff00; font-weight:bold;} p.pic { position:absolute; left:275px; top:104px; } p.message { a:link{text-decoration:none; color:#0000ff; font-weight:normal;} a:visited{text-decoration:none; color:#0000ff; font-weight:normal;} a:hover{text-decoration:none; color:#00ff00; font-weight:normal;} position:absolute; top:475px; } ============================ i want the hyperlinks in "p.message" to display as normal text, NOT BOLDED like the hyperlinks in "p.pic" appear. What do i need to alter in this code to make this happen? i would like keep this all within one style sheet. Thanks for your time, Nick I'm pretty new to css but now use one css file for all of the formatting of my entire website. The only problem I see with that (I say problem because I can't figure out a way around it) is that all of my hyperlinks throughout the website have only one normal state, hover state, active state and visited state. Is there a way to make more than one hyperlink set of formats? Like if I wanted to make one for each page? I could do something like ahomepage:link, ahomepage:visited, ahomepage:active or something??? Code: a:link, a:visited, a:active { font-size:12px; font-weight:normal; font-family: times; text-decoration:none; color : #000000 } a:hover { font-size:12px; font-weight:normal; font-family: times; text-decoration:underline; color : #000000 } i currently have the following code for links.. Code: a { color:#666666; font-size:11px; text-decoration:none; font-weight:600; font-family: arial, helvetica, sans-serif; } a:link {color:#666666;} a:visited {color:#333333;} a:hover {background-color:#eee;} is there a way of having another set so that some have the colour settings as above and another set have the colour settings that are blue or something??? any suggestions would be great.... thanks RF Hi, I have created this menu: http://www.explosiveracing.net/test/header.html In IE the hyperlinks do not appear with the underline whereas in FF they do. How do I make FF not display the underline? Also in FF the 'boxes' are 'squashed' on top of each other whereas in IE there is a small gap. How do I keep the small gap in FF? The direct link to the css is: http://www.explosiveracing.net/test/css/menu.css Thanks Something has gone terribly wrong. I added a sub menu to one of my pages by creating a sub-unordered list and positioning it absolutely where I wanted it. Now only 1 of 7 of the hyperlinks actually works and even that one isn't lined up correctly. I'm not sure what is going on here. The page in question can be found here. I've gone over this a hundred times and can't find where the problem starts. Hi, I have a series of images that act as hyperlinks to other pages. I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide. Tried doing this with normal link styles, but it ain't workin. So how do you do this? Thanks mM Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! One thing I've never been able to replicate using CSS that you can do w/ tables is a simple content area with tab, where the border goes just around those areas and there's a set width for the tab but no set width to the area beneath it. I'll try to graphically depict what I mean he _____________ |************|____________________ |*********************************| |*********************************| |*********************************| |*********************************| |*********************************| ------------------------------------------------- Seems simple enough, right? Just imagine that's a solid border and the asterisks are the content area, and I want to create this using only CSS and divs. The tab, say, is fixed at 100px, but the area below is at some percent, say 90% of the page. The problem ends up being the portion to the right of the tab. I need to create a div there so that the top right border is drawn, which is really the bottom border of that space. I can't simply give the area below a top border because then it would place a border under the tab, and I want the tab to be seamless with the area beneath. CSS can't figure out what the remaining width of the div to the right of the tab (at least without using the under developed display:table-cell), so I can't specify the width of that div, which means I can't know how far to extend it to reach the right side of the area below. So, generally, as far as I can tell, the above depiction can't be done without tables. Can anyone find a workaround? Please let me know if I'm not explaining this well enough. Thanks! Hello, I am trying to aling two unordered lists side by side by each other. I want them to look like: Code: Example 1: Example2: *blah *blah *blah *blah *blah *blah I'm running into two problems: 1) I can't get them spaced apart from each other. I tried putting them in a table, but the cells just sit right next to each other so there's no space. 2) Since it is an UL, the dotted bullet points are centered, however, I would like them left-justified like the example. Is this possible? Thanks guys, [EDIT] After posting, the example does not display like I want it. I want a whole SPACE GAP between the two lists. The post made them run together. hye peeps i need to create a external css for my website www. losttv . 50webs. com would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books? any advise would be SO welcome ricki Hello, I'm trying to create about 4 columns to hold different things in an organized manner with css. My site is www.rafm.org and if you go to the paste section, and look at the recent pastes, I want them to be in columns with column headers. So, how do you create columns with css? is it possible to create this in css ? if so, does anyone have a tutorial on how to ? or what its called so i may research it more (content box? container box?) ty btw, just the style not the stuff inside them lol Hi, I have been using the HR tag to create a single line. The problem is that (in IE6 and 7) this creates an extra line break underneath the horizontal rule. Firefox doesn't create an extra line break. I tried to do this another way so I created a DIV with the class name .hr with the following properties: Code: div.hr { width:500px; (being the width of the content area) color:red; border-top:1px solid #CCCCCC; margin:0; padding:0; clear:both; } However this still creates a line-break. Is there a way of creating a single horizontal line without incurring the extra line break in IE? Many Thanks. having an issue with trying to work out the best way to overcome my current issue. what i am trying to accomplish best case scenario is as i hover over a link i get a descriptive box over on the right of this describing what the link is preferable like the nav bar always visible near the top right . now i have got some examples of trying to get this to work but it not that good currently. I am currently using a span to accomplish this but have a few issues with it so far. the first two links are my css sheet and the verified html page but it doesn't look the way i want it. the third link is the page that is more like what i want. but still not 100% what i need. be aware my whole page is self sizing so absolute position with measurements are out of the question. Please help and if span is not the option whatever someone can suggest to put me on the right path. I currently using pure css and html for the page but running out of ideas if no suggestions will use java if that will accomplish the task needed be but prefer not too. CSS verified theknowledgeden .com / default .css Verified html theknowledgeden .com / ancient-afr .html non verified html but closer to what i am trying to accomplish. theknowledgeden .com / ancient -asia .html Hi there. I am trying to create the attached image in style sheets. I have done everything, but now I'm stuck on the border of the bottom TD. Anyone got any suggestions on how to do this? Hi. im used to using tables for things like this, trying to get it all into css, im having a little trouble creating like module boxes, with tables i would slice the corners up, etc and put arrange them in a table, Row 1: 3 columns //header Row 2: 1 column spanning 3 //content Row 2: 3 columns //footer corners heres a diagram of what im trying to do will make it easier to understand, appreciate anyones help. Cheers Rob Hi: Does anyone know of a site(s) that deal with text presentation in CSS? I'm looking not for the plain text manipulation but for really, really good FX(maybe?) text presentations. Just place a link to a site(s) that you consider you would be looking for. Also, if it has been mentioned in the forum, kindly show me the link to it. Thanks. I know this should be possible - I'm not a CSS noob, nor a grand master I'm trying to create an internal webapp that only needs to work with current modern browsers - so I'm not constrained by all the IE hack stuff. It uses jquery-ui in places I can get a version that nearly works in Safari, and one that nearly works in FF - but not one that works in both. And all attempts still have minor glitches. (sorry - forum wouldn't let me post live links - you will have to copy and paste) The target would be this: ptone.com/temp/wrad/target.png With the layout being fluid both vertically and horizontally - status bar always visible on the bottom - overflow content in the tab divs would be scrolled (see transcript tab in examples below) Neither of these are perfect, but here is the one that works in Safari: ptone.com/temp/wrad/test-layout.html and here is the version that almost works in FF ptone.com/temp/wrad/test-table.html Neither works in the other browser I've looked at lots of stuff about two column fluid vertical - but they almost all involve just one of the columns being fluid and one being set to content height. I want everything to be fluid (with a min h/w) except for the tabbed content Absolute positioning seems to be the way to go here - but I'm struggling getting the jquery-ui tabs not to collapse in one browser or another. Any help appreciated. -Preston |