CSS - Toggle Open Close

I need a popup auto close in 3 second to show result is true.
I try it in javascript,but no border is impossible in my ie8. I need it in css. Send me some solutions. THank all

I've looked at other threads to figure out my problem. However, I didn't really find one that matched my tiny problem. But anyways...

I made this markup where the div tags change css attributes. Works nicely in Opera and Firefox (and other mozilla based browsers), but the evil IE yet ruinz my dreams.

The link to the problem is he

http://www.shockcannon.com/beta_test/fb/imagefx.php

Here is PART of the region where i want the effect to happen:

Code:

<div id="ToC">

<table width="390" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="195 align="left valign="top">

<table width="195" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" valign="top" height="16">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="head1">Photoshop</span>
&nbsp;&nbsp;<a href="javascript: idget_alt('photoshop','show');">Show</a> | <a href="javascript: idget_alt('photoshop','hide');">Hide</a>

</td>
</tr>
<tr>
<td height="10" width="10">
<img src="../images/subheading/ball_01.gif" width="10" height="10" alt="">
</td>
<td height="10">
<img src="../images/subheading/ball_02.gif" width="100%" height="1" alt=""></td>
</tr>
<tr id="photoshop">
<td colspan="2" valign="top" class="sub_indent">

<a href="imagefx.php?file=PS_lightning"><div class="toc_sizer"><img src="imagefx/image_display/PS_lightning.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>Storm Sky</strong><br>Create a electric storm in 5 easy steps.</div></a>

<div class="toc_sizer"><img src="imagefx/image_display/blank.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>TV Scanlines</strong><br>Enhance your image by adding a TV-feel to it (FW version, as well).</div>

...and here is the css region:

Code:

/* Sub Atttributes */
.sub_indent {
   padding-left: 10px;
}
.toc_sizer {
   width: 195px;
   height: 55px;
}
#ToC strong { /* Table of content mini title colorer */
   color: #999966;
   font-size: 11px;
}
#ToC div { /* Table of content mini title colorer */
   color: #CCCCCC;
   border: 1px solid #333333;
   padding: 1px 1px 1px 1px;
}
#ToC div:hover, #ToC div.sfhover a { /* Table of content mini title colorer */
   background-color: #444444;
   border: 1px dotted #666666;
}

Any guesses? Thankz!

Hello everyone,

At the moment I am trying to achieve a re-design of my website (http://www.madewithpixels.co.uk) in pure XHTML/CSS.

After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues.

I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser,

I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla...

so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to
remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward.

But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time.

also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful.
I've been tweaking this code for two days now and am getting nowhere.

i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc

Thanks very much to anyone who has the time to make a suggestion, its very much appreciated.

For reference, you can see the latest version he
http://www.madewithpixels.co.uk/sandbox/latest.htm

cheers

Mike

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help

Hi all,

I am trying to re-create my web site, replacing Frames with CSS. I have a tree menu on one of my pages. Does any know how can I bring the functionality of master frame i.e, opening the link in the content pane?

hey i was wondering if i can add a scrollbar area to my page and have the links only open in that area instead of going to a different page

hello

I am currently working on a website with a template from mambo open source.

Unfortunately there are some icons built in the css that are rather ugly to look at.

Would any one of you know how to hide them?

thank you and regards,

schnauzer

Using percentages so I can leverage .css when the page is printed. so...

I have div with a background image. the image has a round off top-right corner. when i increase the percentage size, id like the width to grow from left to right so that the top right of the background image is always in view...no matter how wide or narrow the width of the div.

Is this possible?

Yet another question about CSS layout. All I want is a block that encloses three others on the left (title), centre(description) and right(image) of the encapsulating block. I can do this with my eyes shut using tables but after several frustrating hours scanning online CSS tutorials, tryng DIV, SPAN, float left/right/AnywayAtAllAndPleaseDearGodWorkThisTime, I'm still no nearer the truth.

Code:

<HTML>
<HEAD>
  <style type="text/css" media="screen">
.header {
	background-color : #E7D69C;
        font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
        font-size : 1.1em;
	color : black;
	border : 4px #CCDFCC groove;
	margin-left : 5%;
	padding-left : 0.2em;
	padding-right : 0.2em;
	width : 90%; 
}
.headerTitle {
	float : left;
	width : 33%;
	position : relative;
}
.headerDescription {
	float : left;
	text-align : center;
	width : 33%;
	position : relative;
}
.headerImage {
	text-align : right;
	width : 34%;
	position : relative;
}
  </style>
  
 </HEAD>
<BODY>
<DIV CLASS="header">
<DIV CLASS="headerTitle">
Title
</DIV>
<DIV CLASS="headerDescription">
Description
</DIV>
<DIV CLASS="headerImage">
Image
</DIV>

</DIV>
</BODY>
</HEAD>

Can anyone stop my slide back into tables?

Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small?

I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars.

If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari.

I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down!

Any ideas?

Hi!

How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden).

Thank you

I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on.
if there is a better way of doing this all please let me know

this is menu.php
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BHI and Roth's Website menu</title>
<?php
<link rel="stylesheet" type="text/css" href="menu_css.css" />
</head>
<BODY STYLE="background-color:transparent">

<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            
                
                <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="pureCssMenum">
                    <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            

            
                <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="pureCssMenum">
                    <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            
        </ul>
        

        <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenui">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li>
        </ul>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li>
</ul>

</body>
</html> 


<?php
}
          }
          }
else
//if the cookie does not exist, they are taken to the login screen
{
header("Location: login.php");
}
?> 
</html> 





And this is menu_css.css
Code:

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#990033;
	background-repeat:repeat;
	border-color:#FFEE00;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#990033;
	border-width:0px;
	border-color:#990033;
	border-style:solid;
	text-align:center;
	text-decoration:none;
	padding:4px;
	_padding-left:4;
	font:normal 11.5px Verdana;
	color: #FFEE00;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;
	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#BB99BB;
	background-image:none;
}
ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#FFEE00;
	border-color:#0099cc;
	border-style:solid;
	font:normal 11.5px Verdana;
	color: #990033;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#FFEE00;
	border-color:#990033;
	border-style:solid;
	font:normal 11.5px Verdana;
	color: #990033;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}