|
CSS - Changing Css Opacity By Link Click
Hey guys,
Just seeing if this is possible. By the way this is for a myspace page. Looking to have a link to change opacity on current page. table table table, div table table{ border-color:rgb(0,0,0); border-style:solid; border-width:2px; background-color:rgb(55,55,5); opacity:0.8; -moz-opacity:0.7; filter:alpha(opacity=50); } This is the code currently. Is it possible (without java) to have a link that would set "opacity:0" Thanks! Similar TutorialsHi! I'm wondering how can I do the little opacity to the <div> box so we can see the background wallpaper a little bit.. Example can be seen at http://koivi.com/css-menus/ and look at the grey box where you can see the images at the upper left corner... I couldn't figure it out... Thanks, FletchSOD I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot. I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail. Here is the HTML I am using for this particular container: <div id="fivels"> <div id="classone"> <a class="home" href="#">Home</a> <a class="gallery" href="#">Gallery</a> <a class="about" href="#">About</a> <a class="help" href="#">Help</a> <a class="partner" href="#">Partner</a> </div> </div> And here is my CSS: #fivels { margin-left: auto; margin-right: auto; height: 150px; width: 800px; background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */ } #classone { margin-left: auto; margin-right: auto; width: 800px; text-align: center; } #classone a:link { color: white; text-decoration: none; background-color: black; filter: alpha(opacity=20); } #classone a:visited { color: white; text-decoration: none; background color: black; filter: alpha(opacity=20); } #classone a:hover { color: white; text-decoration: none; background-color: white; filter: alpha(opacity=20); } .home { padding: 3.2em; } .gallery { padding: 3.2em; } .about { padding: 3.2em; } .help { padding: 3.2em; } .partner { padding: 3.2em; } Also, on a side note, is using the padding attribute the most efficient way of seperating the links? http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? Hi, I have this site, you see home in red, It is through css. http://natradersonline.com/temp/index.php what i want when I click on some other menu item, it turn red and 'home' goes back to normal color. Is it possible to change css throght javascript, I have an onclick even in each menu, i tried something like this , but that gives me error. Code:
document.getElementById('home1').class= 'first active';
I appreciate your help. Thanks I have a FAQ web page which has a list of questions at the top which link to the answer for that question (on that page). I have used 'on click' to change the background colour of the div which contains the answer to the question you have clicked on. Code: <a href="#name" onclick="document.getElementById('namediv').style.background='#99ccaa'" >click here !!! </a><br>
And this works, but it becomes a problem when i scroll back to the questions and click on another one. It will change the background of the new div as required but I can't find a way to revert the previous div back to its original background color. any ideas? Thanks For some odd reason, the link in one of my DIVS is inaccessible. It's styled as a link, so I know it's being recognized, but mouse-over does nothing, and it won't respond to a click. I've tried to bring the DIV to the front via z-index, but no help. The pile of code is below, but the DIV I'm needing help with is "frontcontentbox". You can see an example at www . deepwaterchurch / next Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link href="css/universal.css" rel="stylesheet" type="text/css" />
<link href="css/jflow.css" rel="stylesheet" type="text/css" />
<link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
<script src="scripts/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.flow.1.2.auto.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "462px",
height: "289px",
auto:true,
});
});
</script>
<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
username: "deepwaterchurch",
join_text: "auto",
avatar_size: 0,
count: 5,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>
<link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
<div id="navtabs">
<ul id ="nav">
<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
<li class="faq"><a href="faq">FAQ</a></li>
<li class="contactus"><a href="contactus">CONTACT US</a></li> </ul></div><!--end navigation-->
<div id="wrap">
<div id="controller" class="hidden">
<span class="jFlowControl">Current Series</span>
<span class="jFlowControl">We're Social</span>
<span class="jFlowControl">Compassion</span>
</div>
<div id="prevNext" class="hidden">
<img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
<img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
</div>
<div id="slides">
<div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
<div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" border="0"></a></div>
<div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
</div>
</div>
<div id="overlay" style="z-index:3; position:relative; top:80px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:absolute; top:110px; left:390px; z-index:5;"><img src="images/tagline.png" alt="Deep Water exists to help people become passionate followers of Jesus Christ" /></div>
<div id="front page content" style="position:relative; top:120px; padding-bottom:140px; padding-right:20px;">
<!--start twitter block-->
<div class="tweet_bird" style="position:relative; top:20px; left:140px; z-index:6;"><a href="http://twitter.com/deepwaterchurch"><img src="images/whatstweetin.png" border="0"></a></div>
<div class="tweet" style="position:relative; left:50px; top:12px; width:380px; padding-bottom:50px;"></div>
<!--end twitter block-->
<!--start theloop block-->
<div id="the loop" style="position:relative; left:50px; width:380px; top:20px; padding-bottom:20px;">
<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {position: relative;}
#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
.mc-field-group {overflow:visible;}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
<div id="mc_embed_signup">
<form action="http://deepwaterchurch.us1.list-manage.com/subscribe/post?u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial;font-size: 12px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background:url(images/blackboardtexture.jpg);color: #ffffff;text-align: left;">
<div align="center"><a href="../theloop"><img src="images/theloop_front.png" border="0" /></a></div>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
If you're not receiving <em>the loop</em> newsletter, then you're... out of the loop. Check out <a href="../theloop">the archives</a> or sign up below.<br /> <br />
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address: </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;color: #b51b00;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background:#;color: #73bd2b;"></div>
</div>
<div id="counter chicklet" style="float:right; padding-right:40px; padding-bottom:20px;">
<script type="text/javascript" src="http://deepwaterchurch.us1.list-manage.com/subscriber-count?b=7&u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77"></script></div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="width: auto;display: block;margin: 1em 0 1em 5%;">
</div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
</div>
<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='NAME';ftypes[3]='text';fnames[1]='PHONE';ftypes[1]='phone';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[2]='SMALLGROUP';ftypes[2]='dropdown';var err_style = '';
try{
err_style = mc_custom_error_style;
} catch(e){
err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: fff5ee none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: 9C1801;';
}
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready( function($) {
var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} };
var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
options = { url: 'http://deepwaterchurch.us1.list-manage1.com/subscribe/post-json?u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
beforeSubmit: function(){
mce_jQuery('#mce_tmp_error_msg').remove();
mce_jQuery('.datefield','#mc_embed_signup').each(
function(){
var txt = 'filled';
var fields = new Array();
var i = 0;
mce_jQuery(':text', this).each(
function(){
fields[i] = this;
i++;
});
mce_jQuery(':hidden', this).each(
function(){
if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
this.value = '';
} else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
this.value = '';
} else {
this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);
});
function mce_success_cb(resp){
mce_jQuery('#mce-success-response').hide();
mce_jQuery('#mce-error-response').hide();
if (resp.result=="success"){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
mce_jQuery('#mc-embedded-subscribe-form').each(function(){
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ',2);
if (parts[1]==undefined){
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]){
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch(e){
index = -1;
msg = resp.msg;
}
try{
if (index== -1){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
} else {
err_id = 'mce_tmp_error_msg';
html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';
var input_id = '#mc_embed_signup';
var f = mce_jQuery(input_id);
if (ftypes[index]=='address'){
input_id = '#mce-'+fnames[index]+'-addr1';
f = mce_jQuery(input_id).parent().parent().get(0);
} else if (ftypes[index]=='date'){
input_id = '#mce-'+fnames[index]+'-month';
f = mce_jQuery(input_id).parent().parent().get(0);
} else {
input_id = '#mce-'+fnames[index];
f = mce_jQuery().parent(input_id).get(0);
}
if (f){
mce_jQuery(f).append(html);
mce_jQuery(input_id).focus();
} else {
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
}
}
} catch(e){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
}
}
}
</script>
<!--End mc_embed_signup-->
</div><!--end the loop block-->
<!--start social icons-->
<div style="position:relative; top:20px; left:50px; width:380px; background-color:#333333; padding-top:20px; padding-bottom:20px;">facebook link place holder</div>
<!--end social icons-->
<!--start right column-->
<div style="position:absolute; top:81px; left:480px; width:300px;">
<div id="frontcontentbox">
<img src="images/wherewemeetfront.jpg" alt="Where We Meet" />
<p>Deep Water meets Sunday mornings at 10:30 in the Empire Theatres at Park Lane, on the corner of Spring Garden Road and Dresden Row. <a href="wherewemeet">Get more details</a>.</p>
</div>
</div><!--end right column-->
</div><!--end front page content-->
</div><!--end content div-->
<div id="bottom"></div><!--end bottom-->
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->
</body>
</html>
I've set up two divs side by side using "float:left;". In each of the Divs I have placed links, in the right hand div I can click the links but in the left hand div I can not. If I remove the "float:left;" I can then click the links in the left hand div but the divs are no longer aligned. The problem only happens in FF not in IE. I have copied the relative code below that is causing the problem. Code:
#left{float:left;position:relative;width:49%;}
#right{position:relative;}
<div id="left"><a href="hh">hh</a></div>
<div id="right"><a href="hh">hh</a></div>
I don't want to have to change the layout just for FF so I'm hoping there is a fix for this problem. Thanks Hi, I have a pure css menu that uses hover, Kravitz told me it wont work in touchscreens which I searched for and is so, thanks Kravitz. Also one told me to keep the hover and add a class to make it posible to click on li if hover does not work. Problem, cant test this as I dont have any touchscreen. So 1. is there a way to add a code to disable the hover affect? 2, maybe a website where you can test but using mouse.... 3. Dont remember, its validates but are there anything against using <a href="#">? Thanks, Helen Hi Guys, I'm trying to create a category list. One first load, the category list is going to be a short list of the top 5 major categories. Each major category will have a sublist of 3 subcategories below it. Lastly, there will be a link labeled 'more' that when clicked, will toggle out divs and display a full category list. Lastly, all other primary categories will have their short list hidden as well, so you only see the Primary Category followed by a 'more' link. Here's a crude example of what I mean. First block is 'first load'. Then the next block would be how it'd look if I clicked the "more" link below vehicles -------------------------------- Vehicles -Cars -Trucks -Motorcycles MORE Stuff -Musical Instruments -Camping -clothing MORE Electronics -televisions -stereos -video games MORE ------------------------------ ex. Vehicles -Cars -Trucks -Motorcycles -Boats -Tractors -antiques -commercial Less Stuff MORE Electronics MORE ------------------------------ I think every primary category (ie vehicles) will require 3 divs. Div1 - short list with 3 sub categories Div2 - full list of all subcategories Div3 - hidden list At first load, the DIV1 variant will be displayed for all primary categories. When the 'more' link is clicked for a particular primary category, it will swap it's div1 for it's div2, and at the same time, swap all other categories div1 for their div3. If the 'less' link is clicked on div3, everything would revert back to normal, all primary categories showing div1. I need to find/write some javascript which would toggle the div's. Does this make sense? Am I going about this the right way? I'd think the code would look something like the following, with each Primary category being cat1, cat2, cat3, etc. Code for first Primary Category Code: <div id="cat1div1">
sample text
<a href="javascript:toggle2('cat1div1','cat1div2');javascript:toggle2('cat2div1','cat2div3'); javascript:toggle2('cat3div1','cat3div3');">
more
</a>
</div>
<div id="cat1div2">
a whole bunch of sample text
<a href="javascript:toggle2('cat1div2','cat1div1');javascript:toggle2('cat2div3','cat2div1'); javascript:toggle2('cat3div3','cat3div1');">less</a>
</div>
<div id="cat1div3">
<a href="javascript:toggle2('cat1div3','cat1div2');">MORE</a>
</div>
I have a webpage that has a Link tag that links to a style sheet Code: <html> <head> <link rel="stylesheet" type="text/css" href="http://cdn-media.madaboutbrighton.net/css/main-min-v1.4.css" /> </head> <body> Test 0.0.1 </body> </html> However, when viewing the source of this page in IE, Chrome and Firefox the Link tag has transformed into a Style tag which contains a dump of the linked style sheet Code: <html> <head> <style type="text/css" style="display:none">body... whole style sheet content dumped in here...</style> </head> <body> Test 0.0.1 </body> </html> This is a fairly old site, and nothing has changed recently. But when i first published the site the Link tag appeared normally. I have tried passing it a css file with no content or with just one definition in it, but it keeps changing the Link tag into a Style tag. I obviously don't want the css dumped into a Style tag each time as this is very inefficient and bypasses all my caching/expires settings. You can see an example of this here madaboutbrighton.net/test This is not an isolated case and is effecting some but not all sites on my webserver, which were all displaying correctly the last time i checked but now have this problem. Even though all sites have the same settings. I am baffled. All ideas most welcome, or even just let me know if you are having the same problem. Cheers!!! hey, i want to change a certain link to a different colour. but i want all the other links to be the 'original' i have tried appling a class but the 'original' link seems to be taking over i want to change the "Top" link to red site is located at: http://studentwork.qantm.com.au/pking/website/seminars.cfm the css is located at: http://studentwork.qantm.com.au/pking/website/ptwm.css any help would be great thanks Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#060606; background:url(images/background.png) repeat-y left top;
}
ul, ul li { margin:0; padding:0; list-style:none; }
ol, ol li { margin:0; padding:0; list-style:none; }
div { margin:0; padding:0; }
.clear { clear:both; }
.wrapper { width:100%; height:1000px; border:1px solid #FF0000; }
.header_wrapper { background:url(images/banner_bg.png) no-repeat left top; height:115px; width:100%; border-bottom:2px solid #FCE66F; }
.header_wrapper .header { width:906px; height:115px; margin:0 auto; outline:1px solid #0000FF; }
.header_wrapper .header .logo { float:left; left:0; top:0; width:136px; }
.header_wrapper .header .title { float:left; margin-left:10px; padding-top:42px; width:491px; }
.header_wrapper .header .right { width:245px; height:115px; float:right; outline:1px solid #0000FF; position:relative; }
.header_wrapper .header .right .link { font:Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; color:#F4E8D1; padding-top:28px; width:145px; height:20px; outline:1px solid #0033FF; position:absolute; right:0; }
.header_wrapper .header .right .search { width:245px; height:35px; outline:1px solid #FF0000; position:absolute; bottom:20px; right:0; }
.header_wrapper .header .right .link ul li a { line-height:10px; border-left:1px solid #F4E8D1; float:left; text-decoration:none; margin-left:15px; padding-left:15px; color:#F4E8D1; }
.header_wrapper .header .right .link ul li.first a { border:none; }
.header_wrapper .header .right .link ul li a:hover { text-decoration:underline; }
.container_wrapper { width:923px; margin:0 auto; background:#060606; outline:1px solid #FF0000; }
.container_wrapper .nav { margin:0 auto; padding-top:30px; width:923px; height:32px; font:12px Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; }
.container_wrapper .nav ul { list-style:none; margin:0; padding:0; }
.container_wrapper .nav ul li { display:inline; margin-top:27px; }
.container_wrapper .nav ul li a { padding:17px 35px; color:#FF6600; text-decoration:none; }
.container_wrapper .nav ul li.first a { margin-left:30px; }
.container_wrapper .nav ul li a:hover { background:url(images/hover_button1.png) center center no-repeat; color:#FF6600; }
.container_wrapper .home_container { margin:0 auto; width:906px; outline:1px solid #0000FF; position:relative; }
.container_wrapper .home_container .container_bg { background:url(images/body_bg.png) repeat-y left top; }
.container_wrapper .home_container .left { float:left; width:219px; outline:1px solid #0000FF; margin-left:10px; }
.container_wrapper .home_container .left .background { background:url(images/left_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .left .background .title { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color:#FDFD31; width:190px; border-bottom:2px solid #FF7811; margin-left:12px; padding-bottom:5px; padding-left:2px; }
.container_wrapper .home_container .left .background .pruduct { width:190px; margin-left:12px; margin-top:5px; }
.container_wrapper .home_container .left .background .pruduct ul li { font:12px Verdana, Arial, Helvetica, sans-serif; color:#FFF500; padding-bottom:5px; }
.container_wrapper .home_container .left .background .pruduct ul li a { color:#FFF500; text-decoration:none; }
.container_wrapper .home_container .left .background .pruduct ul li a:hover { color:#FFF500; text-decoration:underline; }
.container_wrapper .home_container .contain_box { float:left; width:400px; margin:0px 10px 0 10px; }
.container_wrapper .home_container .contain_box .contain_title { font:bold 14px Verdana, Arial, Helvetica, sans-serif; color: #FDFD31; padding:5px 0 8px 0; }
.container_wrapper .home_container .contain_box .text { font:12px Verdana, Arial, Helvetica, sans-serif; color:#ffffff; font-style:normal; text-align:justify; }
.container_wrapper .home_container .right { float:right; width:253px; outline:1px solid #0000FF; }
.container_wrapper .home_container .right .right_box_bg { background:url(images/right_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .right .right_box_bg .daily_news { width:195px; height:120px; outline:1px solid #00FF00; margin:0 auto; padding:0; }
.container_wrapper .home_container .right .right_box_bg .daily_news .News_title { font: bold 24px "Times New Roman", Times, serif; color:#000000; text-align:center; border-bottom:2px solid #FA7815; }
.container_wrapper .home_container .right .right_box_bg .daily_news .news_scroll { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; width:175px; padding-left:20px; }
.container_wrapper .home_container .right .right_box_bg .login_nox { width:230px; height:200px; outline:1px solid #0000FF; margin:0 auto; margin-top:20px; }
.footer { margin:0 auto; width:906px; height:73px; background:url(images/footer2.png) no-repeat; margin-top:5px; outline:1px solid #0000FF; text-align:center; }
.footer ul li { font:12px "Times New Roman", Times, serif; color:#C1A579; display:inline; line-height:80px; margin-left:20px; padding-left:20px; }
.footer ul li a { font:12px "Times New Roman", Times, serif; color:#C1A579; text-decoration:none; }
.footer ul li a:hover { text-decoration:underline; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header_wrapper">
<div class="header">
<div class="logo"><img src="images/logo.png" height="171" width="136"/></div>
<div class="title"> <img src="images/banner_title.png" width="500" height="56" /></div>
<div class="right">
<div class="link">
<ul>
<li class="first"><a href="">Register</a></li>
<li><a href="">Login</a></li>
</ul>
</div>
<div class="search">
<table width="245">
<tr>
<td><img src="images/search_bg.png" width="179" height="27" /></td><td> <img src="images/go_button.png" width="49" height="29" /></td>
</tr>
</table>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="clear"><!-- --></div>
</div>
</div>
<div class="container_wrapper">
<div class="nav">
<ul>
<li class="first"><a href="#">Home </a></li>
<li><a href="#">Voluntee </a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Events</a></li>
<li><a href="#"> Donate </a></li>
<li ><a href="#"> Carrier with us</a></li>
</ul>
</div>
<div class="clear"><!-- --></div>
<div class="home_container">
<div><img src="images/body_top.png" width="906" height="12"></div>
<div class="container_bg">
<div class="left">
<div><img src="images/left_box_top_img.png" width="219" height="14" /></div>
<div class="background">
<div class="title">EVENTS</div>
<div class="pruduct">
<ul>
<li>* <a href="#">Whatexpect on Sundays</a></li>
<li>* <a href="#">Location and directions</a></li>
<li>* <a href="#">Where to go to wear</a></li>
<li>* <a href="#">What for your child</a></li>
<li>* <a href="#">Meet the staff</a></li>
<li>* <a href="#">ExploreFaith.org</a></li>
<li>* <a href="#">Mission Opportunities</a></li>
</ul>
</div>
</div>
<div><img src="images/left_box_bottom_img.png" width="219" height="15" /></div>
</div>
<div class="contain_box">
<div class="contain_title">Welcome to Elite Brigade</div>
<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="right">
<div> <img src="images/right_box_top_img.png" width="253" height="18" /></div>
<div class="right_box_bg">
<div class="daily_news">
<div class="News_title">Daily News</div>
<div class="news_scroll">
<marquee height="80" behavior="scroll" direction="up" scrolldelay="50" truespeed="truespeed" scrollamount="1" onmouseover="this.stop()" onmouseout="this.start()" >
Put Your Images tag here
</marquee>
</div>
</div>
<div class="login_nox"></div>
</div>
<div><img src="images/right_box_bottom_img.png" width="253" height="17" /></div>
</div>
<div class="clear"><!-- --></div>
</div>
<div><img src="images/body_bottom_.png" width="906" height="23"/></div>
</div>
<div class="clear"><!-- --></div>
<div class="footer">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Copyright statement</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Quote: Hi Friends........... Above code is an home page of website and I want that when user clicks on register link, the registration form(PHP File) displays below "Welcome to Ankit" by replacing "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> <br> <span style="font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</span> instead of another page. Anyone plz help me?????????????? Thx in advance............ Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares? CSS Code:
DIV.outer
{
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 488px;
border:2px solid white;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
}
DIV.inner
{
position:absolute;
left: 50%;
top :50%;
width: 500px;
height: 488px;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
background-color:#CC6666;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
div.tn
{
position:absolute;
width:115px;
height:115px;
background-color: #660000;
layer-background-color: #660000;
border: 1px none #000000;
}
HTML Code:
<div class="outer">
<p> </p>
<div class="inner">
<!--row 1!-->
<div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<!--row 2!-->
<div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<!--row 3!-->
<div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
</div>
</div>
What i'm trying to get at here is how do I get non transparent items in a transparent div box? Hi, I have a div which is somewhat transparent. There is no problem there. Then I have textin this div, which is also showing up with transparency, and this is the problem. I need the text to be 100% opaque. Here's the div css: Code: .rounded_STYLE
{
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
width: 224px;
background-color: #616161; /* if needed */
/* border: 1px solid BORDER_COLOR; */ /* if needed */
-webkit-border-radius: 4px; /* for Safari */
-moz-border-radius: 4px; /* for Firefox */
}
Here's the text css: Code: .bodywhite{
margin:0px, 4px, 4px, 4px;
opacity:1;
font-size:10px;
color:#FFFFFF;
font-weight:normal;
}
I've tried different numbers in the opacity value, but to no avail. Here's the site:site any ideas? thanks currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too? the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it thanks I've set the main div content for opacity like this #content-main { margin-right:1%; margin-top:0; margin-bottom:2%; width:58%; background-color:#ffffff; filter:alpha(opacity=70); opacity:0.7; } but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div? Thanks Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity. The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ? And another question... how can i set an opacity for Opera Browsers ? i cant get IE to render opacity correctly. filter: alpha(opacity=50); opacity: .5; i know the filter is for Firefox and the opacity is for IE. but it doesnt seem to work. any ideas? |
|||||||