|
CSS - Css Doesn't Initially Appear Until You Click On The Page
Hi,
I am in the process of migrating a web site over on to a new platform. The old web page had an in text translation feature which I am wanting to keep but just tweek slightly. The original page has the turkish translation appear on the right and the english translation appear on the let each expanding to about 80% of the page when clicked on. Original Website web .archive.org/web/20080719023530/cat .une.edu.au/page/acemhoyuk This is a link to the original site using Wayback Machine and you can see from the moment the page loads both translations are visible. What I am wanting to do is keep the minimised translations to the one side and the bulk of the text to the other to eliminate the inertia that comes with constantly moving your focus from one side of the page to the other. I have done this by changing this bit of css code: .page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b { position: static; margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } .page_language_b .bilingual .language_b { margin: 0 0 0 20%; padding: 0 0 0 1.5em; border-left:1px solid #ccc; border-right: none; } to .page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b { position: static; margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } .page_language_b .bilingual .language_b { margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } This simple change in the code seems to have worked for the most part and everything lines up fine except that it is not initially visible. When you first navigate to the page both translation appear as the body of the text one after each other. It is not until you click the mouse in the body of the text that you see the css doing what it is meant to and the translation appear on the right. New website www .une.edu .au/cat/sites/Acemhoyuk .php I am a relative novice with css but I can 'read' the code and I have gone through it, experimenting with changing different aspect of it but I can't find any solution to my problem. Could someone please help me figure out a solution to this issue as I want both the text and the translation to appear at the same time on the screen from the moment it loads not just after a mouse click. Kim Similar TutorialsI downloaded a free layout and started using it for my club's website. After finishing several pages, I uploaded it to the school's server. However, I realized that after publishing it, the layout does not look right. It is supposed to look like this (I had to insert spaces to get around no URL postings for newbs) https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/howitssupposedtolook.jpg Unfortunately, it looks like this https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/index.html As you can see, there are several layout issues. First, the background color inside the white border is not the lighter green color. Also, the border is missing on the right hand side. If anyone can shed some light on this issue, I would greatly appreciate it! In case you can't pull up the CSS document, it is https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/FlexibleGreen.css 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............ I use the same css for all page, but one of them doesn't show sidebar and push down the footer about 100px Code: http://elsoszabadmagyarkormany.com/torveny-szavazasok/ Anybody can help me? alright I'm stumped so please please please help me out! I have a page that's 100% in height, and usually there's more information so you have to scroll down. but I can't seem to activate the scrollbar. I've tried overflow, messing with the height attribute, i have no idea how to solve this. my page: http://www.aapinboom.nl/luxeduinvil...ntroductie.html and this is the code: Code:
html,body {
background-image: url('../images/bg.gif');
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "Trebuchet MS";
font-size: 13px;
height: 100%;
}
#center {
text-align: center;
width: 100%;
height: 100%;
}
#container {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100%;
border: 1px solid #B8B8B8;
background-color: #FFFFFF;
text-align: left;
}
thanks for any suggestions! I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? OK, So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks! Shawn PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code URL: http://www.raisetheratesottawa.org/xhtml/ ===== CSS ===== HTML { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } BODY { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } #upper { width:700px; margin:0px auto; text-align:left; padding: 0px; border: 5px solid #FFFFFF; BACKGROUND-COLOR: #000000; PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } /* Horizontal nav */ #menu { width:700px; margin:0px auto; padding: 0; } #menu ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #menu ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #menu ul li a { background: #000000; width: 175px; /* was 'height: 2em; */ height: 24px; padding: 0; /* was 'margin: 0 0 10px 0; ' this affects the margin between upper menus*/ margin: 0 0 0 0; color: #FF0000; text-decoration: none; display: block; text-align: center; font-weight: bold; letter-spacing: 1px; /* was 'line-height: 2em; */ line-height: 24px; /* was 'font-size: x-small; ' */ font-size: 10px; font-size: 10px; /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/ } #menu ul li#one { width: 46px; } #menu ul li#two a { width: 154px; } #menu ul li#three a { width: 105px; } #menu ul li#four a { width: 85px; } #menu ul li#five a { width: 56px; } #menu ul li#six a { width: 57px; } #menu ul li#seven { width: 147px; } #menu ul li a:hover { color: #000000; background: #FF0000; } #menu a:active { background: #c60; color: #fff; } #content { width:700px; margin:0px auto; text-align:left; padding:0px; border:5px solid #FFFFFF; background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC; } ====== XHTML ====== <!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"> <head> <title>Test</title> <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="No Index" /> <meta name="Copyright" content="Copyright (c) 2004" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="help" href="about.php" title="Site info." /> <meta name="Rating" content="General" /> <meta name="revisit-after" content="2 Days" /> <meta name="doc-class" content="Living Document" /> </head> <body> <div id="upper"> <div id="header"> <img src="graph/top-right2.jpg" width="700" height="78" alt="" /> </div> <div id="menu"><ul> <li id="one"> </li> <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li> <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li> <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li> <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li> <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li> <li id="seven"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> Hi, My site is divided into 2 columns: The left column is 760px in width. I want the right column to take up the remaining space of the screen - no matter what resolution i'm on. Here's the page: http://www.3003online.com/demos/ecoceylon/ As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt... Here's the code: Code: <div id="container"> <div id="logo"> <div class="hide">test</div> </div> <div class="spacer"> </div> </div> <div id="bgcolor_area"> </div> And the CSS: Code:
body {
color:#FFFFFF ;
font-family: Trebuchet MS, Arial ;
font-size:9pt ;
font-weight:normal;
line-height: 18px;
background-color: #FFFFFF;
margin:0px;
width:100%;
height:100%;
}
#bgcolor_area {
background: #000000;
height: 100%;
width: auto;
float: left;
}
#container {
text-align: left;
width: 760px;
float: left;
}
#logo {
height: 89px;
width: 760px;
background: url(../images/0_top.jpg) no-repeat;
margin: 0;
}
Does anyone know what I'm doing wrong? Thanks a lot! Hi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. Exactly that question. I got this menu from a website. 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>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... hi, I was just wondering, how can you get an image to change on mouse click like how an image changes on a mouse over? What i mean by this is when you click on an image and you go to the destination page, how can you use css to keep the image as the same one seen on the mouse over? so the person knows what section of the site they are in? Is it possible to make a menu with css that appears when you right click a certain link? I tried with javascript, my only downfall was i couldn't be bothered find out how to pass PHP variables into javascript variables. ... Anyway, is it possible? Hi guys, I don't know if this is possible.. I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them. So my question is it possible to click through the table element on the links in the background and stuff? http://perfbase.com/beta/tablesector/v7/ I tried setting the middle td to visibility: hidden and display: none but that didn't work. I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background. Thanks a lot! 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>
Ok I have a html page with 6 navigation buttons on pressing a navigation button it changes a iframe but what I want to do is have a differant colour for each iframe whick is no problem but can I add some code to the buttons to change the CSS of the main html page? Or does anyone have any idea how I can achieve this Regards Kev I want to have the functionality of this page
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">
<head>
<title>Bug Tracker | View All Active Bugs</title>
<script type="text/javascript">
function toggleCard(card) {
var o = document.getElementById(card);
o.style.display=(o.style.display == "none")?"block":"none";
}
</script>
<style type="text/css">
h2 {
border: 1px 0 0 0 solid #000;
background-color: #eee;
margin: 0px;
padding: 2px 2px 2px 15px;
font-size: 1.0em;
}
p {
margin: 2px;
padding: 0px;
}
</style>
<script src="inc/js/sorttable.js"></script>
</head>
<body>
<h2 id="head1" onclick="toggleCard('card1')">Click Me</h2>
<div id="card1" style="border: 1px solid #000; display: none"><p>Click should display me!</p></div>
</body>
</html>
But instead of using a heading element (h2) I would like to use a table row to display the new div. However, when I do this, the newly displayed division messes with the spacing for the table columns and also in firefox it will leave the display space for the div blank and continue to repeat this each time the row is clicked. I've looked for similar problems with google, but haven't dug anything up. Any pointers? @kravvitz You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply... 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'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 |
|||||||