|
CSS - Linking To Css To Change The Page Style
Hi all,
I need to link to a stylesheet and have it apply to the page instead of just opening the css. if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file? thanks in advance Matty Similar TutorialsI have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Help please I'm getting knowhere fast, I am trying to load stylesheets dependant upon the browser in use. I have read lots on this on the net and in fact most of this code has been borrowed from better people that I. If I use the stylesheets in a normal hardcoded <LINK...> they work fine. If I put an alert("You are here") in each of the if() statements it runs the code and the correct if() is run for each browser under test. But, there is always a but, the styles are not applied to the document for any browser. In fact the page displays without any styling at all in all of them. I have tried debugging with Mozilla's JavaScript Debugger and on examination the styles are being loaded into the DOM but not applied to the document. It is as if they are being applied to late to take effect. This is the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <meta http-equiv="Content-Language" content="en-gb"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <script language="javascript" src="file:///D:\TestSite\JavaSrc\sniffer2.js"></script> <script language="javascript"> <!-- if(is_nav) { document.write('<LINK href="CSS\nav\BasicSite.css" type="text/css"rel="stylesheet">\n'); document.write('<LINK href="CSS\nav\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\nav\IndexExtra.css" type="text/css" rel="stylesheet">\n'); } else if(is_ie) { alert( "IS IE" ) document.write('<LINK href="CSS\ie\BasicSite.css" type="text/css" rel="stylesheet">\n'); document.write('<LINK href="CSS\ie\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\ie\IndexExtra.css" type="text/css rel="stylesheet"">\n'); } else if(is_moz) { document.write('<LINK href="CSS\moz\BasicSite.css" type="text/css" rel="stylesheet">\n'); document.write('<LINK href="CSS\moz\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\moz\IndexExtra.css" type="text/css rel="stylesheet"">\n'); } else if(is_opera) { document.write('<LINK href="CSS\opera\BasicSite.css" type="text/css" rel="stylesheet">\n'); document.write('<LINK href="CSS\opera\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\opera\IndexExtra.css" type="text/css rel="stylesheet"">\n'); } // --> </script> </head> <body> I hope this is dead obvious to one of you experts. Thanks in advance On the title of my gallery one of the words has moved to the second row. There is obvious room before the text hits the search box so I'm hoping to have all the text on the same row. This is what I've found for the gallery title CSS: #gallerytitle { padding: 10px 10px 10px 20px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background: #F8F8F8; height:30px; border-bottom: 1px solid #CCC; What would I change there (if that is indeed the part that needs to be changed) to get the desired effect? Here is the site where you can see the gallery title issue. EDIT: I guess I can't link to my site. Hmm. It's kind of hard to describe what my problem is. I appreciate any help i have a link which has some parenthesis within the anchor tags, now what i was wondering was whether i could change the style (colour to be exact) of the parenthesis without adding extra tags into the html. Thanks for any assisstance eg: Order By (DESC) to become Order By ( DESC ) Hey all, I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element. I have a DL with one DT & and one DD. I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'. The code: Code:
<dl>
<dt>
<p>Text</p>
</dt>
<dd class="background">
<p>Text</p>
</dd>
</dl>
Any help with this would be much appreciated. Cheers in advance. Hi guys... Would u mind to see this site I'm working ... http://diario.coldfusion-vpm.com It is being done in Mambo (www.mamboserver.com) And i would like to know why it sees OK in Firefox but it sees bad in IE, specially left & middle colum, they see overlapped, very strange CSS file: http://diario.coldfusion-vpm.com/templates/maiputotal/css/template_css.css thanks a lot in advance I have a header.inc file and a footer.inc file that is called to each new file that I create. The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file. What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file. Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??. Hope this is clear...thanks alot I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help: Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css... when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css.. what shld i do to attain that? on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? I have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray. The HTML code is as follows: <OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control." </OBJECT> This does not change the scrollbar color to red. What do I do to change the scrollbar color Hey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF hello, i am new here, and this is my first post. i am working on adding css to my html website, so i was suggested to create a different .css file and put all the styles in there, and then just add a link in my .html files to my .css file. the link from the pages to the .css file is fine, i checked it over but here it is, please point out if i missed something. (by the way all my .html and my .css files are in the same directory.) here it is: <link type="text/css" rel="stylesheet" href="style.css"> so my question is, how do i get the changes from when i save something in the .css file to go into the .html files. just for an example, could someone tell me how to make the background be black, and the text be white? please put it in html form. right now i have this in the .css file but nothing is changing: body { color: white; background: black; } is that right? or am i missing something? Thanks for the help. I have two problems with template I am creating. I could not center the page whatever I tried and for some reason list-style do not appear correct. edit: Actually just realized list styles does not appear at all. http://efetuncel.win.aplus.net/ryt/new/ I was screwing around doing some brain storming on an idea for one of my web pages when I accidently hit save. It wouldn't be an issue except it saved the changes I made to my style.css as well! I've been working on the site for a while finishing the last page and now this happens. All my text is the wrong size and is drifting in some spots. I have the an older style.css file I saved like a month ago, however I've made too many changes since then to implement it. I was looking for a way to take the current style.css file I have now and the old style.css and see all the entries that have changed, like debug them. There's so many lines I'd hate to go line by line, I'm using Dreamweaver CS4, however if there is another bit of software that can help me compare the two files and see the differences between the two that would be awesome! Any ideas? Howdy; I'm looking to set up a web page that upon clicking the 'next' or 'previous' button, the page will appear to turn similar to that of a book or magazine. here's an example of what i want to do: www.insideeonline.com Even if you could just point me in the direction of a good tutorial it'd be greatly appreciated. Thanks in advance. Hi all, very new at this so please pardon. I am attempting to format a series of 3 columns (using the CSS holy grail) into the main body of a .asp page. Everything goes smoothly, I have the columns looking exactly as I want them, however the style sheet appears to be causing problems with the header and footer of my asp page. Namely, it has caused the previously smoothed corner images (.gifs) in the header and footer to have a 90 degree thick white border around them. I assume that my style sheet for the body of the page is affecting elements in the header and footer as well, causing them to look odd. Is there a way to have a style sheet only affect part of my code locally and not all of it globally? Or make certain parts of my code immune to the style sheet via some sort of markup? Thanks! FYI for those interested: the style sheet I am trying to use to format my divs (frame(content left, content right, content center and content header)) is body { text-align:center; border:0px solid #000; } #frame { width:830px; margin-right:auto; margin-left:auto; margin-top:auto; padding:0px; text-align:left; } #contentleft { width:175px; padding:0px; left:auto; top:auto; float:left; background:#fff; border:0px solid #000; } #contentcenter { width:480px; padding:10px; float:left; text-align:left; background:#B7C8EE; } #contentright { width:175px; padding:0px; right:auto; top: auto; float:right; background:#fff; border:0px solid #000; } #contentheader { background:#345EA2; width:auto; } p,h1,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; padding-top:10px; } #contentheader h1 { font-size:14px; padding:10px; margin:0px; } #contentright p { font-size:10px} The .asp page I want to use this style sheet on is <!--#include file="headerauth.asp"--> <meta http-equiv="Content-Language" content="en-us"> <body topmargin="0" leftmargin="0"> <link rel="stylesheet" type="text/css" href="sddm.css" /> <link rel="stylesheet" type="text/css" href="box2.css" /> <STYLE> A:link {font-weight:bold} A:hover {background:white;} A:hover {background-color:white;} A:visited {color:green} A:active {color:red} </STYLE> <!--#include file="footer.asp"--> The sheet appears to be affecting both my headerauth.asp and footer.asp which I do not want it to do. Is there a way to stop it from propogating to both of these other files? Or perhaps wrap the code for each of these in some sort of a tag that tells it not to use the css? Hello, and thanks in advance for anyone who helps me with this. I want to know if it's possible to choose one color on a page and change it to another. This is the page I want to change: http://www.neopets.com/randomfriend.phtml?user=bubbapyque The menu on the left is uneditable by me because it's on Neopet's server. But I'd like to change the yellow color of the menu to something else. Possible? Thanks. Crystal I have 2 pages that use style.css which has all the classes in it. I used to simply drop one page into my web server root dir, open the page and everything worked fine. Now, when I chage pages in the wwroot, it wont format using the css. The first half of the page does format, but the second part does not. I *think* it is something to do with the webserver or PHP. Once I have fixed it (via a reboot) it works fine untill I drop the other page in there and then it breaks again. Below are 2 pics, 2.jpg of what it is supposed to look like and 1.jpg of what it looks like when I get this prob. |
|||||||