|
CSS - Wanting The Same Links On Every Page
I know I am going to sound very silly in this, I have only very basic knowledge of CSS, other than that I only know bits of HTML. I haven't tried making a site for a couple of years, and I've only ever made sites with frames before. Now everyone is telling me that you really shouldn't use frames because they cause all kinds of problems with links/search engines/ etc. So I've used CSS to make the layout, very basic- column of links on left, content on the right.
The thing I can't get my head round is that all the content has to be on every single page, so that each one has all the links on the left coded into it... so if I want to alter this menu at all, say to add or remove a link, I have to edit every single page, which is 200+ pages! Surely there is a way to not have to do this? To somehow set a template for the content etc so that I dont have to press copy paste 200 times! Or am I just going to have to deal with it? It seems so mental after how easy it is to change things with frames! Thanks so much for any help you can offer. Similar TutorialsI want to show in a page two different link styles, to achieve this I have created two css files, one for each link style, and I have attached it in the page thus: Code: <html> <head> <title>Link format test</title> <link href="StylesCSS/link1.css" rel="stylesheet" type="text/css"> <link href=" StylesCSS/link2.css" rel="stylesheet" type="text/css"> </head> <body> Then I have applied the styles thus: Code: <a href="index.aspx" class="letterLink1">Home</a> <a href="forgotten_password.aspx" class="letterLink2">I have forgotten my password</a> And both css files are as follow: link1.css Code:
a:link {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
.letterLink1 {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
link2.css Code:
a:link {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
a:hover {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
a:active {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
.letterLink2 {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
But when I load the page, the link1 a:hover and a:active are showed as link2 a:hover and a:active. What is wrong? Thank you, Cesar ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top. i am trying to do something like this but my page just gets messed up if i move the links to below. page layout: Code: <div> //overall <div>//top> <div>side Links/menu <div>contents <div>footer Hello I am trying to fix my links so they remain in the same place regardless of how large the users window is when they browse the site. I have tried using the following code in my style sheet. h3 { position:absolute; bottom:330px; top:670px; } but the link still moves around when you minimise the browser on the site. Bear in mind I have a think black border as well which runs all around the screen. Any help would be much appreciated. I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks My first post Website:www.freewebs.com/weareamazing I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help! Hi, I have CSS document like so: Code: div.menu A:link {
definitions
}
div.menu A:visited {
definitions
}
div.menu A:active {
definitions
}
div.menu A:hover {
definitions
}
And in my HTML document Code: <div class="menu"> Links are then put in here </div> But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck Thanks alot! I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE. My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>? Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop) Code: <html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="#">links</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="links2">
<a href="#">links</a>
<a href="#">link 2</a>
<a href="#">three</a>
</div>
</div>
</body>
</html>
I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean. here is my css style for that particular part: .bodycopy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #575757; text-decoration: none; line-height: 13px; } .bodycopy a:link { color: #BF0000; text-decoration: none; } .bodycopy a:active { color: #BF0000; text-decoration: none; } .bodycopy a:visited { color: #BF0000; text-decoration: none; } .bodycopy a:hover { color: #969696; text-decoration: underline; I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links. The HTML: Code: <div id="homelink"><a href="index.html"></a></div> The CSS: Code: #homelink{
position:absolute;
width:53px;
height:17px;
margin-top:25px;
margin-left:70px;
z-index:10;
}
#homelink a{
display:block;
background-image:url(images/links/home.png);
background-repeat:no-repeat;
width:53px;
height:17px;
}
#homelink a:hover{
display:block;
background-image:url(images/links/homehover.png);
width:53px;
height:17px;
}
As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it. Is there any way to solve this so that no border appears? Hi, If I have the following CSS: body { margin: 0px; padding: 0px; } a:link, a:visited { color: #F36706; text-decoration: none; } a:hover, a:active { color: #F36706; text-decoration: underline overline; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } How come the links in my page aren't changing from the normal blue/purple ones? question is about CSS and links. I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text. How do i set up more than two link effects? I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness? <div id="footer_bottom" class="bold"> <a href="sitemap.php" title="Sitemap">Sitemap</a> | <a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a> </div> I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links: Code:
a:link {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
a:visited {
color: red;
text-decoration: none;
}
a:active {
color: red;
text-decoration: underline;
}
Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined. However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined. I want visited links to act the same. They only way I could get them to act the same was to do the following: Code:
a.general:link {
color: red;
text-decoration: none;
}
a.general:visited {
color: red;
}
a.general:hover {
color: blue;
text-decoration: underline;
}
a.general:active {
color: red;
text-decoration: underline;
}
This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this? I have what seemed to be a simple idea but is turning out to bother me. In my style sheet i want to put a base url followed by a user id Link looks like this Code: http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id= Now in my html i have this Code: <table><tr><td >My name<td >Job position<td >606959150</tr> The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this Code: <a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a> I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide I've gone through my nav.php and nav.css files about 100 times and I can't find anything that would cause this error. This is the nav.php code PHP Code: <?php $section = $_GET['section']; switch($section){ case 'memorial':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li id=\"memorial_item\"> <ul> <li> <a id=\"memorial_1\" class=\"selected\" href=\"memorial.php?section=memorial\">Memorial</a> <img src=\"image/section.png\" style=\"float:left;clear:left;height:13px;\" alt=\"V.C. Bar\" /> </li> <li> <a id=\"memorial_2\" href=\"memorialkia.php?section=memorial&startpage=1\">K.I.A. WW2</a> </li> <li> <a id=\"memorial_3\" href=\"memorial.php?section=memorial&startpage=1#ENLISTED_DB\">Served WW2</a> </li> </ul> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } case 'about':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li id=\"about_item\" class=\"selected\"> <ul> <li> <a id=\"about_1\" href=\"about.php?section=about\">About</a> <img src=\"image/section.png\" style=\"float:left;clear:left;height:13px;\" alt=\"V.C. Bar\" /> </li> <li> <a id=\"about_2\" href=\"about.php?section=about&site=submit\">Site</a> </li> <li> <a id=\"about_3\" class=\"about_mid\" href=\"about.php?section=about&b3l=submit\">Branch 3</a> </li> <li> <a id=\"about_4\" class=\"about_mid\" href=\"about.php?section=about&rcl=submit\">R.C.L.</a> </li> <li> <a id=\"about_5\" class=\"about_mid\" href=\"about.php?section=about&jbc=submit\">John B. Croak</a> </li> <li> <a id=\"about_6\" href=\"about.php?section=about&vc=submit\">V.C.</a> </li> </ul> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } case 'credits':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"selected\" id=\"credits\"> <a id=\"credits\" href=\"credits.php?section=credits\">Credits</a> <img src=\"image/section.png\" style=\"float:left;clear:left;\" alt=\"V.C. Bar\" /> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } case 'home':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li> <a class=\"selected\" id=\"home\" href=\"home.php?section=home\">Home</a> <img src=\"image/section.png\" style=\"float:left;clear:left;\" alt=\"V.C. Bar\" /> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } default:{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } } echo "</li></ul></div><div id=\"nav_foot\"> <a href=\"http://validator.w3.org/check?uri=referer\">Valid XHTML 1.0!</a> </div></div>"; ?> This is the output of the nav.php file: Code: div id="nav"> <div id="nav_main"> <ul> <li> <a class="selected" id="home" href="home.php?section=home">Home</a> <img src="image/section.png" style="float:left;clear:left;" alt="V.C. Bar" /> </li> <li class="nav_item"> <a class="nav_item" href="memorial.php?section=memorial">Memorial</a> </li> <li class="nav_item"> <a class="nav_item" href="#not_complete">Members</a> </li> <li class="nav_item"> <a class="nav_item" href="#not_complete">Our Shop</a> </li> <li class="nav_item"> <a class="nav_item" href="about.php?section=about">About</a> </li> <li class="nav_item"> <a class="nav_item" href="credits.php?section=credits">Credits</a> </li> <li class="nav_item"> <a class="nav_item" href="#last_item">Site Map</a> </li></ul></div><div id="nav_foot"> <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0!</a> </div></div> and this is the CSS that's been my main target trying to iron out this bug. Code:
#nav{
float:left;
width:122px;
}
#nav a:link, #nav a:visited{
color:#9fb594;
}
#nav_main ul, #nav_main ul li{
padding:0;
margin:0;
list-style-type:none;
text-align:left;
}
#nav_main{
margin:1em 0 0 0;
float:left;
clear:left;
width:122px;
background-image:url('../image/nav_bg.png');
background-repeat:repeat-y;
}
#nav_main p{
padding:0;
margin:0;
}
#nav_foot{
float:left;
clear:left;
width:122px;
height:177px;
margin:auto;
background-image:url('../image/nav_foot.png');
background-repeat:no-repeat;
}
.nav_item{
float:left;clear:both;
}
#memorial_1{
width:105px;height:1em;float:left;clear:both;color:#000;font-weight:600;
}
#memorial_2{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:both;background-color:#1a1121;border-top:thin solid #000;
}
#memorial_3{
text-align:right;height:1em;width:105px;background-color:#1a1121;border-bottom:thin solid #000;padding-bottom:.4em;margin-right:19px;float:right;clear:both;
}
.about_mid{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;
}
#memorial_item{
float:left;clear:both;
}
#about_item{
float:left;clear:both;
}
#about_6{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;border-bottom:thin solid #000;
}
#about_2{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;border-top:thin solid #000;
}
#about_1{
float:left;height:1em;width:105px;clear:both;font-weight:600;
}
#credits{
clear:both;font-weight:600;
}
#home{
clear:both;font-weight:600;
width:105px;float:left;clear:both;
}
.selected{
background-image:url('../image/section.png');background-repeat:no-repeat;
}
I've spent everyday since monday trying to fix this and I can't find anything. It happens in both IE and firefox so I think it's more of a CSS error but I'm convinced it's not in any of these files and they're the only files with styles for the nav. Hello does anyone have any links to good tabs tutorials I been looking at some other and most of the CSS code would not work well but I would just like some links thanks for ur time |
|||||||