|
CSS - Css Hide And Seek
hey
on my site at http://www.tequme.com theres a little copyright footer at the bottom and it looks good in 1280 but in 1024 it gets tucked away under the main site. its all divs and css and i kinda get whats going wrong but any suggestions/solutions on resolving it would be appreciated. i use one table to centrally align the main div. Regards Russell Similar TutorialsHi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> Hello, Can search engine see a hide H1 tag? Quote: h1 {display:none;} Hello. I have code like this one Code: <div class='captionCell cbregName'> <label for="cbpplan10">AVATAR DESIGN</label> </div> how to hide just that label. Since there is many <div class='captionCell cbregName'> but labels are named different like for="cbblane9"... For some reason i am adding css Code: Original - css Code /* Hide this from IE-Mac \*/ div.spacer { height: 5px; } /* End the hiding */ /* Hide this from IE-Mac \*/ But IE keeps seeing this, does anyone knows why? I used the following code to hide overflowing content in one of my earlier works. Not working this time, check it yourself (purple section), http://www.refinethetaste.com/html/ Code:
<style>
.playlist { float:left; width:474px; height:80px; background:#FFF; overflow:hidden; }
.playlist .entries { position:absolute; width:10000em; }
.playlist .entries a { float:left; width:452px; height:60px; font-size:9px; padding:10px; background:#90F;}
.playlist .entries a:hover { background-position:-211px 0; color:#000; }
.playlist .entries a.playing { background-position:-422px 0; }
.playlist .entries a.paused { background-position:-633px 0; }
.playlist .entries a.progress { opacity:0.8; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { float:left; width:20px; height:60px; margin:15px 0; background:url(/html/themes/default/images/home_carousel_arrow_left.png) no-repeat; display:block; cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(/html/themes/default/images/home_carousel_arrow_right.png); }
</style>
Hi all, pls can anybody help me out in writing a code to hide the address bar and IE bar with css..it is very urgent.. thank you in advance I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? i am trying to find anywhere that may have something to describe a collapse and expand link menu in css. I can't find one that use's mainly css it is all javascript of somekind does anyone know where i could find one. Hello. I'm nesting inputs within labels to enable me to position the inputs underneath their labels. (I use relative positioning for the labels and absolute positioning to move the inputs underneath and slightly to the right.) For one label I don't want any text to appear. I could use a non-breaking space but I'd ideally like to keep the label but just not show the text. But I can't hide it because it contains the input What would be a good way to approach this? (I've given the label a class to identify it/them.) Code: <form id="myForm" method="">
<label>Email<input type="text" id="txtEMail" /></label>
<label>Password<input type="text" id="txtPWord" /></label>
<label class=" lblHidden " >Login<input type="image" src="images/login.jpg" id="btnLogin" /></label>
</form>
[It occurred to me to set the width to 0 but I'm not so keen on this approach and it might interfere with my positioning.] Andy. PS I could post my css if it's useful (?). Edited: width:0px doesn't do anything anyway, because it contains an image. Is it possible to hide a vertical scroll bar? I have a div that I just want to be able to horizontal scroll within a page. Is there a way to hide the vertical scroll??? Thanks! Thanks for taking the time to read my question, I want to hide this line from IE6 and lower Code: padding: 0px 0px 0px 12px; Is there something I can do to it to hide it? I need it to work in IE7, FF etc. I'm looking on line, but I guess I'm not typing in the correct search terms, as I'm not coming up with anything. Thanks, Brad I have created two divs. The one is at the top of the screen set fixed not to move around with whitebackground. I create another div[bottom], that is moving. The bottom div move over the top div, it will not show the texts or text box because I set the top div with white background. But somehow, the the bottom div with drop down menu still see through over the top div. how can I fix that so it will not show when it scroll over the top div? CSS Code: Original - CSS Code //CSS div#navigation { position: absolute; top: 1em; left: 1em; width:20em; } @media screen { div#navigation { position: fixed; } * html { overflow-y: hidden; } * html body { overflow-y: auto; height: 95%; } * html div#navigation { position: absolute; } } div#top { position: absolute; margin-top: 0em; font-family: verdana, arial, helvetica, sans-serif; width:48em; background: white; } div#bottom { margin-top: 1em; margin-left:13em; padding-left: 2em; font-family: verdana, arial, helvetica, sans-serif; }
PHP Code: //HTML PART <div id="navigation"> <?php include('link.php'); ?> </div> <div id="top"> <form name="DFORM" action="<?php echo $PHP_SELF; ?>" method="post" align="right"> <table> <tr> <td align="right">NAME: </td> <td><select name="NameList"> <option value="Betty">Betty</option> <option value="Dave">Dave</option> <option value="John">John</option> <option value="Bruce">Bruce</option> </select> </td> <td><input type="submit" value="Submit" name="userSubmit"> </td> </tr> </table> </form> <div id="bottom"> <form name="dispoUpdate" action="<?php echo $PHP_SELF; ?>" method="post" align="right" > <table> <tr> <td align="left">Name:</td> <td><?php echo $NAME; ?></td> </tr> <tr> <td align="right">Number: </td> <td><select name="NumberList"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> </select> </td> </tr> <tr> <td><input type="submit" value="Submit" name="numberSubmit"> </td> </tr> </table> </form> From the above code, if I have long document, and I need to scroll down. The drop menu will be show over the top div, while other texts & textarea will not be show. Why the drop down menu is shown? Thanks. I am normally quite good at css but I have hit a wall. I want a 2 column layout. The left column will be alot smaller than the right (one is for navigationa dn the other for content). I want to be able to show and hide the left column. When I hide it I want the rightcolumn to take up the space that the left column took up. Incase my description was confusion I have drawn this simple picture. Picture I am wanting to do this with just divs, no tables. And very little or no javascript. Thankyou. I need a space where the user can select from a large group of options, so I thought I'd use a <div> and have a link saying OPEN which would make the <div> visible (whereupon the user could select choices, then close the <div>) Problem is, I am not sure exactly how to do this. I can make the <div> with the id and everything, but I am not sure how to make the div visible from the initial page. Is it something like document.theDiv.style.visibility="visible"; How do I put that into a link that the user can click to show the div? I am converting my news system from tables to pure CSS. So far its going great, and I'm almost complete except for one problem; Each post has a category, and the category image is displayed in each post using "background-image" in CSS. Although it somehow comes back in the background of each link within the <div> (in Firefox). I have attached an image of what I'm talking about. Here's the html (simplified): Code: <div class="games"> <div class="newstoryinfo"> <h2>Topic goes here</h2> </div> text text text text text text text text text text text text text text text text text text text text text and so on... </div> Here's the CSS Code:
.news {
background-image: url("/img/topics/1.gif");
background-color: transparent;
background-repeat: no-repeat;
border: 1px solid black;
padding: 10px;
}
.news div {
text-align: justify;
margin-left: 1ex;
margin-bottom: 10px;
padding-left: 60px;
padding-right: 5%;
line-height: 1.6em;
}
.newstoryinfo {
padding-top: 5px;
color: #888;
font-size: 11px;
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, sans-serif;
}
Can someone please tell me how to make links in the "text text text.." area display with a white/transparent background? Thank you! I've heard that there is a way to use comments in CSS that make certain definitions invisible to certain browsers. Is this true. If so, where can I learn more about this? What are the down sides? I am very new to css. I am trying to show and hide text by clicking a button. My intention is to use this in a threaded discussion board. For example I'd like the topics to be displyed when the page loads 1) topic 1 (Open/Close) 2) topic 2 (Open/Close) On hitting the Open button this would be something like this: 1) topic 1 (Open/Close) ---message 1 ---message 2 ---message 3 ---message 4 2) topic 2 (Open/Close) Hope someone can suggest me an answer or point me to one. Thanks Works in IE, but not NN: Code:
<SCRIPT LANGUAGE="javascript"> <!--
function doSection(secNum){
//display the section if it's not displayed; hide it if it is displayed
if (secNum.style.display=="none") {
secNum.style.display=""
} else {
secNum.style.display="none"
}
}
--> </SCRIPT>
And here is the code to make it happen: Code: <A HREF="javascript:void(0)" onclick="doSection(Sec1)">What factors affect the color of meat and poultry?</A> <DIV ID="Sec1" STYLE="display: none"> <P>Myoglobin, a protein, is responsible for the majority of the red color, in meat and poultry. Myoglobin does not normally circulate in the blood but is fixed in the tissue cells. When bruising occurs during gathering, myoglobin circulates in the blood, and a small amount can be found in the meat after processing. This purplish color can leave small dark spots that resemble bruising. Exposure to light in the meat case can also affect color. (USDA) </P> </DIV> Anybody see what I did wrong? Any good links to CSS in NN, possibly used with js? I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option. Here's the jQuery script: Code: $('#sideTabMain .button').toggle(function() {
$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});
And the basic CSS for the div: Code: #sideTab {
position: absolute;
z-index: 1000;
top: 50px;
right: -650px
}
The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas? Thanks for your help. Mistake. Sorry! |
|||||||