|
CSS - Which Method Is Better?
I have a navigation bar. The desired behaviour is such that when a user mouses over (or out) of a button, its appearance changes. The appearance and change is being set by css (let's say background-color and background-image to make things simple).
My question is this: On the mouseover and mouseout events, is it better to use javascript to manipulate these css properties directly or to use javascript to assign a new className to the button's container? Ex. Code: document.getElementById("button1").style.background-color = newColor;
vs Code: document.getElementById("button1").className = newClassName
In the latter, "newClassName" would obviously reference an alternate css style where the "newColor" would be defined Similar TutorialsI have a client who wants HTML emails (I know... I know...). I'm just curious what type of CSS works the best with the most email readers out there. I really don't want to go back to tables, <font>, <center>, etc... Obvious choices are an external stylesheet linked to in the <head>. Downfall for that is if they aren't connected it may not load? Or I can do an internal sheet in the <head> or just use inline styles in each <div>, <p>, etc. What are recommendations? I imagine the client is using Outlook or OE, but I haven't asked. ---John Holmes... hi I'm wanting to create the same background as this: http://www.designdetector.com/demos/css-gradients-demo-1.php (0,191,255 and 255,255,255) It looks like it uses a variety of div tags to create the gradient. But then it's kind of hard to put things over the top of the gradient. So what's the best way to create that gradient above as a background (NOT fixed)? cheers nathan Very cool new method, definitely worth a look. http://somerandomdude.net/projects/webdev/divless/ Enjoy. Hello, Is there a method by which we can use position:fixed in Internet Explorer 5.5 and 6.0 ? I have searched google but did not find anything really useful. Please help me. Hello, I tried to make a page with a header, left column and right column, as shown in the screenshot. http://img292.imageshack.us/my.php?image=screengr2.jpg You can see the code at the bottom. I used the faux-column technique to make the column colors extend to the bottom of the page. Is this a good way to do it? and does this method give problems with different resolutions on different computer-monitors. I used floats in this example to position the divs, is this a common solution or is absolute or relative positioning better? My goal is to teach myself a way to easily and effectively divide a webpage, so that I have a basic method, also in larger and more complex websites. I like to hear any tips/techniques to improve this. I used the folowing code: Code:
<html>
<body>
<div class="wrapper">
<div class="header">
<br /><br /><br /><br /><br />
</div>
<div class="left">
<img src="homer.jpg" />
</div>
<div class="right">
<div class="nav">
<a href="home.htm">home</a> <!-- menubar -->
</div>
<div class="contents">
This is the contents of the page
</div>
</div>
</div>
</body>
</html>
and the css code Code:
body{
background: url(fauxcolumn.jpg) 15% 0;
margin: 0;
padding: 0;
}
.header{
background-color: green;
float: left;
width: 100%;
margin: 0%;
padding: 0%;
}
.left{
background-color: purple;
width: 15%;
float: left;
margin: 0%;
padding: 0%;
height: 100%;
}
.nav{
background-color: blue;
width: 85%;
float: left;
margin: 0%;
padding: 0%;
}
.contents{
float: left;
width: 85%;
margin: 0%;
padding: 0%;
background-color: red;
}
Thanks in advance. |
|||||||