|
CSS - Problem Can Not Click Link
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 Similar Tutorialshttp://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. 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? 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>
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>
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! 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............ APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE. Hi Guys looking for a spot of help please. IE is driving me up the wall. Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still. Just when they click the item image within the anchor it does nothing. Here is a slim version of the HTML : Code:
<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
</ul>
CSS Code: Code:
ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
ul li {
display:block;
list-style:none;
margin:0;
padding:0;
border:0;
text-align:center;
float:left;
width:118px;
height:133px;
}
ul li a{
display:block;
border-right:1px solid #e2f5fe;
outline:none;
text-decoration:none;
background:#FFF;
padding:3px 2px 3px 2px;
line-height:15px;
}
ul li a:hover{
background:#e2f5fe;
color:#fe0084;
}
ul li span.box_wrap {
display:block;
background:#FFF;
height:127px;
}
ul li span.box_wrap span{
padding:0px 3px;
font-size:12px;
}
ul li span.img {
padding:2px 0px 2px 0px;
display:block;
}
Just when you try to click any of the images within the boxes its not clickable. Really stumped. Any help or pointers would be greatly appreciated. Thanks in advance! if you see on http://www.ipan.be/dev/index.php?page=about in FF it is nice but in IE it put borders around some links of my class inhoudstafel... Does anyone know a solution? Hi! Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work! Its a little strange! Output at www.generating-sets.com Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly). CSS below: PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div.displaybox { color: #000000; padding: 2%; margin: 1%; border: #000044 solid 1px; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; font-size: 1.1em; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#topleveladminbar { padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px } #header { background-color: #000044; background-image:url(images/wel.jpg); width: 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:160px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: left; height:150px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #ffffff; background-color: #0000FF; text-decoration: underline;} .displaybox a:link {color: #0000FF; text-decoration: underline;} .displaybox a:visited { color: #0000FF; text-decoration: underline;} .displaybox a:hover {color: #000044; background-color: #EEEEEE; text-decoration: underline;} Hi there, I have a drop down menu which I want to display next to another link to the right of the page (so there is a link to the far right and then the drop down to the left of the right link), however the drop down link is appearing under the far right link in FF, instead of beside it like it is in IE. Any ideas what I have wrong? This is my CSS: PHP Code: #tools{ text-align:right; padding-right: 20px; } #add_business{ background-image: url('images/add_business.png'); height: 21px; width: 156px; float:right; text-align:center; padding-top: 4px; } #add_business a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:underline; } #add_business a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:none; } #com_tools{ text-align: right; margin-right: 200px; margin-top: 0px; float:right; } #menu ul .item{ display:none; list-style:none; list-style-image:none; } #menu ul:hover .item{ display:block; list-style:none; list-style-image:none; } #menu{position:absolute; list-style:none; list-style-image:none; } and this is my HTML: PHP Code: <div id="tools"> <div id="com_tools"> <div id="menu"> <ul id="item1"> <li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li> <li class="item"><a href="#">menu item 1</a></li> <li class="item"><a href="#">menu item 2</a></li> <li class="item"><a href="#">menu item 3</a></li> </ul> </div> </div> <div id="add_business"><a href="#">Add Your Business!</a></div> </div> I'm working on a project for school, I'm nearly done, but for some reason, in Firefox the first link in my navigation menu doesn't fit the formatting of the rest. The link is 'About Us'. Please see he http://lovemeforme.org/testing/ any ideas? I'm stumped! Hi guys, I recently created a website for my Union, and am having some problems getting around a possible CSS error. Unfortunately the majority of our user base only has access to MS Internet Explorer 5, and it is within this browser that the CSS glitch is apparent: The 'Join the union' image link tends to push right to the left margin, and I'm unsure how to correct this without adversely affecting either Firefox or more recent versions of IE/Opera/Safari. Any help would be appreciated! Edit: would be easier if I gave you the link! http://www.algus.org.uk/ Sajid hi guys, I'm sure this is an easy fix but it's driving my little non-technical mind nuts... I have an external style sheet for a site, and it appears to be linked correctly as altering it does affect the text in my site. HOWEVER, the elements I've included to keep web links displaying as normal text aren't working (visited, hover, active, etc etc) Please help. Code below. .main { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; link {text-decoration: none; visited {text-decoration: none; hover {text-decoration: none; active {text-decoration: none; } Hi i am using to different styles to preview my links but i want when a link is being visited to return to his starting point.For example it is black and when is being visited i want it again when the second time the user come's to the page to see it black again.I tried a lot of methods but when i put the visited pseudo class it blocks and the the hover pseudo class is not working.Plz help ****the class that i have the problem is "boxes" Code: A:link {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:active {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:visited {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:hover {
COLOR: #ffffff; TEXT-DECORATION: none
}
TD {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
hr{
color: #96A097;
height: 0px;
width: 150px;
}
#title{
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
COLOR: #000000;
}
.mainbox{
FONT-SIZE: 10px; COLOR: #727C8E;
padding-top:5px;
padding-bottom:3px;
}
.boxes {
FONT-SIZE: 10px; COLOR: #000000;
padding-top:3px;
padding-left:3px;
padding-right:3px;
padding-bottom:3px;
}
.boxes a:link {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:active {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:hover {
FONT-SIZE: 10px; COLOR: #FFFFFF;
}
.boxes a:visited {
FONT-SIZE: 10px; COLOR: #000000;
hey just got a small problem i dont know hw to fix, take a look at my site http://funnyguys99.tripod.com/index.htm if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link. Here's the Css for the left bar, please fix it [CODE] div#menubar { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 20%; margin: 120px 0px 0px 0px; padding-top: 0.5em; left: 0px; width: 8em; top: 0px; height: auto; position:absolute; background:#FFFFFF; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black; } div#menubar ul { padding-left:0px; padding-top:0px; list-style:none; line-height: 85%; margin:0px; } div#menubar a { font-weight: bold; text-decoration: none; font-size:0.6em; padding-right:7.5em; padding-top:0px; padding-bottom:0px; } div#menubar a:link { color: #ffa500; } div#menubar a:visited { color:dark red; } div#menubar a:active { font-weight: normal; } div#menubar a:hover { color: white; background:#999999; border:1px solid black; } [CODE] Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad. (Ive rewritten the same problem clearly this time hope someone can help me out) My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif 1.home 2.archives 3.news 4.about - (layer 1 unvistided link) 1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over) 1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer. I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes. so the links of each section are like this home=http://localhost/wordpress/ archives=http://localhost/wordpress/?page_id=2 news=http://localhost/wordpress/?page_id=35 about=http://localhost/wordpress/?page_id=31 You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes. PHP code: Code: <ul id="nav"> <li id="home"><a href="http://localhost/wordpress/">home</a></li> <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li> <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li> <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li> </ul> CSS Code: Code: #nav {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#nav li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#nav li.last { padding: 0; }
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }
ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }
ul#nav li#home a:hover { background-position: 0 -30px; }
ul#nav li#archives a:hover { background-position: -84px -30px; }
ul#nav li#news a:hover { background-position: -168px -30px; }
ul#nav li#about a:hover { background-position: -252px -30px; }
.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }
The main problem i can understand from the earlier discussion is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please. the website http://www.mostardesigns.com/4five1/ the top menu links work ok in firefox but in IE they wont display, here is my css code for the links: Code:
a.a_bannerLink:link, a.a_bannerLink:visited, a.a_bannerLink:active {
color:#FFFFFF;
text-decoration:none;
font-size:12px;
font-weight:bold;
padding:6px 15px 6px 15px;
display:block;
}
a.a_bannerLink:hover {
color:#FFFFFF;
text-decoration:none;
font-size:12px;
padding:6px 15px 6px 15px;
background-image:url(../images/link_bg.jpg);
background-repeat:repeat-x;
display:block;
}
any help is appreciated, thanks in advance. ok, so after i click a link it goes to the css visited link. .menu_1a a:link {color:#666666; text-decoration: none;} .menu_1a a:hover {Background: #666666; color:white;} .menu_1a a:visited {color:#666666; text-decoratoin: none;} is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link any ideas? -kevin |
|||||||