|
CSS - Simple Image Switching
I'm in need of a method to change an image to different images in the same spot when the user hovers over their respective text links.
So far I have only found methods that work with only 2 different images or they just change upon hovering over the image itself and not text located elsewhere. THanks. Similar TutorialsI'm switching my font sizes from px to em (e.g. 10px to 1em) so people can resize the font using their browser settings. However, it's not working. The content on the page remains the same in IE. Should just switching from one to the other work? I can't seem to find any other styles that are conflicting with it. Code: #centerCol p, #centerCol select, #centerCol textarea, #centerCol form, #centerCol td, #centerCol th, #centerCol input, #centerColTop p, #centerColSecondaryTop p {
color: #333;
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Hi Guys, Basically I'm having trouble with getting the 'Content' div layer to wrap around the switching div layers. The grey background colour represents the 'Content' div layer which wraps around the button menu OK but doesn't wrap around the layers which switch. The bodged way of doing it is to have a fixed height but then it leaves a blank area underneath the divs that are short of text...If you get what I mean? Code:
<div id="content_test">
<div id="rollovercontentwrapper">
<div id="tabwrapper">
<ul id="tabmenu">
<li><p><a href="#" onClick="javascript:showTabContentOne('TabContentOne')">Summary</p></a></li>
<li><p><a href="#" onClick="javascript:showTabContentTwo('TabContentTwo')">Benefits</p></a></li>
</ul><!--TABMENU-->
</div><!--TABWRAPPER-->
<div id="TabContentOne" class="TabContentOne" style="visibility: hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus,
porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus,
et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies
urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu
cursus nisi interdum.</p>
<br>
<p>In hac habitasse platea dictumst. Sed vulputate auctor cursus. Morbi ac
ullamcorper dui. In sem velit, pulvinar sit amet cursus id, vulputate fringilla
erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Sed lorem urna, imperdiet eget fringilla eget, molestie nec justo.
Fusce diam nulla, fringilla a sodales at, rhoncus vitae massa. Donec tincidunt,
leo quis fermentum venenatis, purus elit tincidunt ipsum, vitae sollicitudin nulla
orci nec arcu. Sed non neque neque, ac pharetra lectus. Donec a massa mauris. Sed
vel magna eget tellus commodo placerat in quis risus. Aenean velit lectus, aliquam
quis dictum ac, pellentesque sed diam.</p>
</div><!--TabContentOne-->
<div id="TabContentTwo" class="TabContentTwo" style="visibility: hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus,
porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus,
et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies
urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu
cursus nisi interdum.</p>
</div><!--TabContentTwo-->
</div><!--ROLLOVERCONTENTWRAPPER-->
</div> <!----CONTENT_TEST---->
<div id="onebyone" style="visibility:hidden;">
<img src="onebyonepixel.gif" onLoad="javascript:showTabContentOne('TabContentOne')" width="1" height="1">
</div>
Code:
div#rollovercontentwrapper {
float: left;
width: 630px;
background-color: #E9E9E8
}
div#tabwrapper {
width: 630px;
}
ul#tabmenu {
display: block;
float: left;
width: 630px;
list-style-type: none;
border-bottom: 1px solid #0048A7;
}
ul#tabmenu li {
display: block;
float: left;
background-color: #E9E9E8;
}
ul#tabmenu li a {
display: block;
float: left;
padding: 10px;
background-color: #E9E9E8;
border-top: 1px dashed #0048A7;
border-right: 1px dashed #0048A7;
}
ul#tabmenu li a:focus {
display: block;
float: left;
padding: 10px;
background-color: #3383CD;
border-top: 1px dashed #0048A7;
border-right: 1px dashed #0048A7;
}
#TabContentOne {
float: left;
position: absolute;
top: 350px;
width: 628px;
z-index: 1;
padding-top: 10px;
padding-bottom: 10px;
}
#TabContentTwo {
float: left;
position: absolute;
top: 350px;
width: 628px;
z-index: 1;
padding-top: 10px;
padding-bottom: 10px;
}
div#onebyone {
float: left;
}
div#content_test {
float: left;
width: 900px;
padding: 20px;
background-color: #CCCCCC;
}
Can anybody help me out on this? Many thanks, Mark I understand how to write a print.css style sheet, but I am unclear on how to use it. I want to have a link on my page that says "Printer Friendly Version" that displays the printer friendly version and lets them hit the print button on the browser to print it. I think this is the most common way to print a web page, right? So I am displaying to the screen first and the printer if they hit the button. So how do I get the print.css formatting to display instead of the screen version? Obviously I want a single markup file for both purposes. Hi, I had designed and coded my page, tried to keep all standards, ran it through the W3C HTML and CSS validators - everything seemed alright. Everything since I switched to Firefox. Not a big mess, but if you want it perfect you want it for all browsers. Well we know that life is not easy if you try to satisfy all of them, but how come that even minor things are different? Maybe I'm too stupid not to see the point, I hope someone can help - here's the piece of simple code that behaves different in both browsers: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1"> <title> CSS Test Page </title> <style type="text/css"> BODY { BACKGROUND: #5A656B none; COLOR: #5A656B; } .BigBox { BACKGROUND: #FFF none; COLOR: #000; HEIGHT:40px; FONT-SIZE: 12px; } .SmallBox { position:absolute; BACKGROUND: #CAA none; COLOR: #FFF; } </style> </head> <body> <div class=BigBox> Text in BigBox <div class=SmallBox> Some Text in the SmallBox </div> </div> </body> </html> I don't want to start a religious discussion - I just want to have my site displayed in both browsers as it was intended to do. Any help? Thanks in advance, Damianos I'm used to using PHP includes and the like to make my pages. I like having header, footer, and navbar files so I can edit things once across a site. I just took some advice about ditching tables and using CSS for layout. It works fine if I just layout a single page but when I try touse includes everything is all over the place. Still a table-like headache. I'm sticking with it but I thought that CSS would allow me to put everything where i want it, maybe just beginner's problems but I try to put things exactly where I want them or use percentages, nothing works in IE & Netscape at the same time. Any advice on the best layout practices? Hi, what I'd like to do is have a few style sheets, then have a dropdown box where the user can select a theme and it will switch the style sheet in the link rel= according to which theme they chose. This should be pretty simple but I'm not much of a programmer. Can anyone help me out with the code for this? Thanks I have a personal website that has 13 different styles - easily switchable through a drop-down menu. Is it possible to insert background music (bgsound=) in CSS and make it work with the switching I have? Here is the URL: http://brandon.ennis.tv/home.shtml Hi, I'm using a regular drop-down manu for a CSS change. I can easily get regular links to work, but the drop-down menu will only work in Mozilla. In IE, if I add a 'submit' or 'change' button, the page is reloaded to the home page, and I don't want to make a million different menus, one for each page. Anyone know how to fix it? Here's the page's URL, and the code I use for the drop-down. http://www.pokevista.com/home.shtml <form name="change" method="change" action="http://www.pokevista.com/home.shtml?"><select> <option>Style Switch:</option> <option value="#"onClick="setActiveStyleSheet('nav1'); return false;" style="background-color: rgb(0, 33, 87); color: rgb(125, 167, 217);">Winter</option> <option value="#"onClick="setActiveStyleSheet('nav2'); return false;" style="background-color: rgb(101, 189, 96); color: rgb(0, 94, 15);">Spring</option> <option value="#"onClick="setActiveStyleSheet('nav3'); return false;" style="background-color: rgb(240, 112, 0); color: rgb(255, 255, 0);">Summer</option> <option value="#"onClick="setActiveStyleSheet('nav4'); return false;" style="background-color: rgb(153, 37, 7); color: rgb(255, 185, 0);">Autumn</option> </select></form> {yes, I'm 15 and a Pokemon fan. Bite me. ^__^;} Hey Guys, I have been working on a template type site where each visitor will be able to click an Href to select a style for the page. I found this code at another site and it works awesome on my local host, but when I upload the files, it doesnt inherit a default style. Here is the Java in my header: Code: <script>
var StyleFile = "style" + document.cookie.charAt(6) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">');
</script>
<SCRIPT type="text/javascript" id="wa_u" ></SCRIPT><SCRIPT type="text/javascript" src="/tracking.js"></SCRIPT>
And here are the links in my page: Code: <b>Select Page Style:</b> <a href="javascript: document.cookie='style=1'; window.location.reload();">Red</a> | <a href="javascript: document.cookie='style=2'; window.location.reload();">Blue</a> | <a href="javascript: document.cookie='style=3'; window.location.reload();">Green</a> | <a href="javascript: document.cookie='style=4'; window.location.reload();">Yellow</a> | <a href="javascript: document.cookie='style=5'; window.location.reload();">Earth</a> | <a href="javascript: document.cookie='style=6'; window.location.reload();">Black</a> Any ideas how to have a default style on the page before the user switches? I want to stick with java if possible rather than PHP or some other language. Please let me know. Thanks i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes. so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all. the code i'm having a problem with reads like this: <td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'"> it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative. oh, and by the way i'm using IE 6.0.2600 Hello, I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again. I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related: 1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones. 2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal). 3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored. Here is a test html: http://www.bsuto.com/test.html and here is the css: http://www.bsuto.com/fluid.css Thanks! -Brian Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS? I've tried something like this.. Code:
#ulist ul{
list-style: none;
}
#ulist li a{
list-style: square;
}
the list Code: <ul id="ulist"> <li><a href="#">Element 1</a></li> <li><a href="#">Element 2</a></li> <li><a href="#">Element 3</a></li> <li><a href="#">Element 4</a></li> </ul> But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element. If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it? Cheers, Fozzy So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with: <img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div> But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution? *** EDIT: YOU CAN SEE AN EXAMPLE HE *** http://www.poweredpages.com/sample.php Thanks. *** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! *** So I'm trying to put in a bg image using godaddy website tonight and its just not working for me.. I only want it to be in the main paragraph area.. I know html quite well but just a little css.. here is my coding so far.. All I've really added to the template is under body.. Not sure if it supposed to be under body or .sf_outer_wrapper: Code: /*********************************************************
**********************************************************
Folder: Theme315_Generic1
Name: Generic 1
Cat: Generic
**********************************************************
*********************************************************/
/*------------------------------------
GENERAL
------------------------------------*/
body {
background-image:url(images/bamboo1.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
margin: auto;
}
.sf_outer_wrapper {
width: 1014px;
margin: 50px auto;
}
.sf_wrapper {
width: 1014px;
position: relative;
}
a {
color: #000;
}
a:hover {
color: #333;
}
a:visited {
color: #000;
}
.sf_extra10 {
display: none;
}
/* ------------------------------------
HEADER
------------------------------------ */
.sf_header_wrapper {
margin-top: 0px;
height: 133px;
}
.sf_main_header p, .sf_sub_header p { margin: 0; padding: 0; }
.sf_main_header {
padding-top: 25px;
text-align: left;
line-height: 0.9;
margin-left: 18px;
height: 40px;
overflow: hidden;
font-family: Arial, Helvetica, FreeSans, sans-serif;
font-size: 24px;
font-weight: bold;
}
.sf_sub_header {
text-align: left;
padding: 4px 0 30px 50px;
width: 450px;
height: 30px;
overflow: hidden;
font-family: Arial, Helvetica, FreeSans, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
/* ------------------------------------
NAVIGATION
------------------------------------ */
.sf_navigation_top { display: none; }
.sf_navigation {
clear: both;
height: auto;
width: 1014px;
}
.sf_navigation ul {
margin: 0 0;
height: auto !important; height: 1%;
padding-left: 0;
}
.sf_navigation ul:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.sf_navigation ul {
list-style-type: none;
}
.sf_navigation ul li {
float: left;
width: auto !important;
width: 5px;
white-space: nowrap;
}
.sf_navigation ul li a {
height: 40px;
margin: 0 0 0 1px;
text-decoration: none;
display: block;
line-height: 28px;
padding: 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.sf_navigation ul li a:hover {
text-decoration: none;
color: #fff;
display: block;
}
.sf_subnavigation, .sf_subnavigation2 {
display:none;
}
/*------------------------------------
Dropdown
------------------------------------*/
#Nav1 iframe {
position: absolute;
/* account for the border */
left: -0.25em;
top: -0.25em;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
margin-left: 3px;
}
#Nav1,
#Nav1 ul { /* all lists */
list-style:none;
width:100%;
}
#Nav1 a {
display:block;
}
#Nav1 li { /* all list items */
float:left;
}
#Nav1 li ul { /* second-level lists */
position:absolute;
left:-999em;
width:130px;
margin:-4px 0 0 0;
border:solid 1px #929292;
background:#ffffff;
padding:3px 3px 0 3px;
z-index:1000;
}
#Nav1 li ul li{
margin:0;
padding:0;
background:none;
}
#Nav1 li ul li a{
background:#e8e8e8;
height:auto;
margin:0 0 3px 0;
width:120px;
padding:5px;
line-height:normal;
white-space:normal;
border:none;
}
#Nav1 li ul li a:hover{
background:#999999;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul { /* lists nested under hovered list items */
left:auto;
}
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
/*------------------------------------
CONTENT
------------------------------------*/
.sf_pagetitle {
clear: both;
padding: 10px 0 0 20px;
text-align: left;
height: auto !important;
min-height: 30px;
font-family: Arial, Helvetica, FreeSans, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.sf_pagetitle h1 {
font-size:24px;
font-weight:normal;
margin:0;
}
.sf_content {
height: 300px;
padding: 20px 20px 0 20px;
margin: 0px;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: auto !important;
height: 200px;
min-height: 200px;
}
.sf_content:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
/*------------------------------------
FOOTER
------------------------------------*/
.sf_footer {
font-size: 13px;
padding: 25px 0 10px 20px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F6F6F6;
}
/*------------------------------------
BANNER
------------------------------------*/
div.sf_banner {
margin-bottom: 35px;
padding-top: 50px;
text-align: center;
font-size: 13px;
}
div.sf_banner div#bannerLink {
padding-top: 10px;
}
/**
* Sticking flyout menu bug
*
* @bugfix
* @affected ie7
* @css-for ie7
* @valid yes
*/
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
Hi, If you look at the following page you will see there is a gap under the sidebar elements at the top. LINK HERE In FF its not there yet in IE it is, any ideas how i can remove it? Thanks, Mike i am trying to use this very simple image gallery from cssplay stu nichols site "A permanent image click gallery with 'previous' / 'next' buttons" so i change the css to suit my images and create my own prev|next buttons but when i check it in a browser - i'm working with dreamweaver cs5 [trial] it dosn't show me the buttons i'm very new to css - and am bashing my head over this issue would appreciate any help - not sure if i need to put in my altered source code so i will Code: CSS #gallery {
width:500px;
height:500px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
}
#gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;}
#gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;}
#gallery a b {display:none;}
#gallery #fullsize {
position:absolute;
left:0;
top:0;
height:550px;
width:500px;
overflow:hidden;
text-align:center;
}
#gallery #fullsize div {width:500px; height:600px; padding-top:10px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:8px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:10px; line-height:14px;}
Code: XHTML <div id="gallery"> <div id="fullsize"> <div id="pic1"> <img src="images/greyday/gd1.jpg" alt="grey day1" /> <a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a> <h3>1 | 10</h3> </div> <div id="pic2"> <img src="images/greyday/gd2.jpg" alt="grey day2" /> <a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a> <h3>2 | 10</h3> </div> <div id="pic3"> <img src="images/greyday/gd3.jpg" alt="grey day3" /> <a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a> <h3>3 | 10</h3> </div> <div id="pic4"> <img src="images/greyday/gd4.jpg" alt="grey day4" /> <a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a> <h3>4 | 10</h3> </div> <div id="pic5"> <img src="images/greyday/gd5.jpg" alt="grey day5" /> <a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a> <h3>5 |10</h3> </div> <div id="pic6"> <img src="images/greyday/gd6.jpg" alt="grey day6" /> <a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a> <h3>6 | 10</h3> </div> <div id="pic7"> <img src="images/greyday/gd7.jpg" alt="grey day7" /> <a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a> <h3>7 | 10</h3> </div> <div id="pic8"> <img src="images/greyday/gd8.jpg" alt="grey day8" /> <a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a> <h3>8 | 10</h3> </div> <div id="pic9"> <img src="images/greyday/gd9.jpg" alt="grey day9" /> <a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a> <h3>9 | 10</h3> </div> <div id="pic10"> <img src="images/greyday/gd10.jpg" alt="grey day10" /> <a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a> <h3>10 | 10</h3> </div> </div> </div> i really would appreciate some help with this - thank you in advance hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! Hi all, I've got an div set up for images, which just has a style of padding-right 15px; . Now, I've got a text div with a style of padding-right 5px; . Whenever I put that div in after the image div, the text appears below the image. Can anyone tell me how to make it so the text appears next to the image (on the right)? Cheers. I am not liking CSS atm. I have spent nearly 3 hours actually on trying to get a rollover to work. I've tried a IRC channel but all the help I've gotten is how to do a image rollover with one image and/or with text. Here is all I want. It's very simple. I want to have a image rollover (the image changes when the mouse moves over it) for several different images. I want to do it in CSS. Code:
#seeallseries
{
background: url('navpictures/seeallseries.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
#seeallseries:hover
{
background: url('navpictures/seeallseriesHover.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
That's my CSS code that I have right now. How do I use that to make a image rollover. I can do Code: <div class="navbar"> <ul id="seeallseriesul"> <a href="http://www.google.com"><li id="seeallseries"></li></a> </ul> </div> Ignore the other CSS code for the moment. Right at that, it works. The image rollover happens. However I need a link which that does not provide. Is what I'm trying to do impossible? Please tell it's not. This should be simple but it's not for me. Thanks for any links or help. Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... |
|||||||