|
CSS - Css Hiding Text Questions
I have recently seen an article from 2005 stating that using CSS to hide text could lead to flagging from Google and other Search Engines as Spam sites.
My question is, if hidden text is used for certain elements of the page such as branding a logo as an h1 tag, will my site be penalized? I don't want to risk being blacklisted from Google, but If all I have is an image header anyways, would it hurt to use a CSS text indentation to hide the h1 text? I notice that several of the designs on CSS Zen Garden use this techinique for header images, yet the page has a google page rank of 9. Any knowledgeable advice or references to recent articles would be very helpful including personal experience. Thanks in advance! Similar TutorialsI have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas? in my site text is appearing correctly in IE but it is hiding in the right site. the site is in N E P A L I language and english. Just below the poll in the site i could not arrange the table the content of table is also hidden in right side. I've tried by reducing the width of the table in the content but could not succeed. the url is janapukar . com. Please suggest. Hi all, Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print. A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method. Any thoughts on how to do this? Thanks, AJ What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion. Code: #rightnav {
margin-top:14px;
background-image:url(../images/loader.gif);
background-position:center center;
background-repeat:no-repeat;
width:282px;
overflow:hidden;
}
#rightnav hr {
color:white;
background-color:white;
height:1px;
border:none;
width: 250px;
margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
height:306px;
float:left;
}
#wslist {
background-color:#336699;
}
.list {
width:282px;
float:left;
}
HTML as follows:
<div id="rightnav">
<div id="rightbox">
<div id="wslist">
<div id="video">
Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
</div>
<hr />
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Why is my family so screwed up?</p>
<p id="vidSub">What to do when families fight</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This my second Title</p>
<p id="vidSub">A video on titles</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This is my third title</p>
<p id="vidSub">Yay for subtitles, esp ESL</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Four titles are great though</p>
<p id="vidSub">I am full of English SDH</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">I am the outcast of the group</p>
<p id="vidSub">Mah.. nobody loves me</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="clearfix"><!--clear--></div>
</div>
</div>
</div>
What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it. Any suggestions? Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages. The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway. I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful. Edit: I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side. Hello, So I have a page built that displays correctly in all modern browsers. However in IE6 the right floated div does not float right and throws the page off. If I could just hide the right and left columns from IE6 it would work fine. I have tried several bug fixes but nothing so far works. the page is : woodbuiltright com/ test2 php If it would layout correctly in IE6 with a fix/hack that would be great if not could I just make the right and left divs just not display? I even tried using some php to redirect IE6 to a different page. I guess I did not insert the php correctly because I could never get it to work. I would not even support IE6 but I know people who still use it...despite my recommendations. Just so you know, I have spent hours trying stuff before asking. Thanks! My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue. I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there. This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help. I have listed the code below as well as attached the css and the page( If images are need, please let me know: Code: html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}
#logo {
background: url(profileimages/logo.png) no-repeat;
position: absolute;
left: 6px;
top: 3px;
z-index: 4;
width: 92px;
height: 64px;
}
#congratulations {
position: absolute;
left: 22px;
top: 377px;
z-index: 3;
width: 914px;
height: 30px;
font-size:26px;
font-weight:bold;
color:#4fa700;
}
#toptext {
position: absolute;
left: 31px;
top: 85px;
z-index: 6;
width: 897px;
height: 16px;
font-size:16px;
font-weight:bold;
color:#1b1b1b;
}
#cartproduct,
#cartproductcopy {
position: absolute;
z-index: 2;
width: 268px;
height: 20px;
font-size:18px;
color:#272727;
}
#shippinginformation {
position: absolute;
left: 226px;
top: 421px;
z-index: 2;
width: 711px;
height: 31px;
font-weight:bold;
font-size:34px;
color:#272727;
}
#willbesecure {
position: absolute;
left: 83px;
top: 285px;
z-index: 3;
width: 315px;
height: 14px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#foryourarea {
position: absolute;
left: 682px;
top: 257px;
z-index: 3;
width: 233px;
height: 14px;
font-size:11px;
color:#272727;
font-weight:bold;
}
.toplinksbar {
color:#006FD6;
text-decoration:none;
}
.toplinksites {
font: 12px/14px Arial;
margin: 0px;
color: #1B1B1B;
text-align: left;
text-decoration: underline;
}
#toplinks {
position: absolute;
left: 745px;
top: 25px;
z-index: 2;
width: 227px;
}
#item,
#qtyproductback {
background: url(profileimages/layer5copy12.gif) no-repeat;
position: absolute;
left: 11px;
z-index: 2;
width: 31px;
height: 25px;
}
#totalback,
#priceback {
background: url(profileimages/layer5copy9.gif) no-repeat;
position: absolute;
top: 156px;
z-index: 2;
width: 124px;
height: 25px;
}
#cartproductcopy {
top: 720px;
left: 262px;
}
#ourprice {
position: absolute;
left: 803px;
top: 190px;
z-index: 2;
width: 117px;
height: 28px;
font-size:12px;
font-weight:bold;
}
.ourpricepercent {
color:#43a000;
}
#securelock {
background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
position: absolute;
left: 525px;
top: 875px;
z-index: 2;
width: 20px;
height: 27px;
}
#profilevectorsmartobject {
background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
position: absolute;
left: 15px;
top: 259px;
z-index: 3;
width: 62px;
height: 68px;
}
#cartproduct {
top: 191px;
left: 54px;
}
#productdescription {
position: absolute;
left: 59px;
top: 163px;
z-index: 3;
width: 140px;
height: 13px;
color:#272727;
font-size:14px;
font-weight:bold;
}
#retailprice {
position: absolute;
left: 669px;
top: 190px;
z-index: 2;
width: 117px;
height: 13px;
font-size:13px;
color:#ff0000;
}
#acceptedpayments {
position: absolute;
left: 490px;
top: 270px;
z-index: 2;
width: 121px;
height: 13px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#enteryourzipcode {
position: absolute;
left: 683px;
top: 279px;
z-index: 3;
width: 145px;
height: 12px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#profilereadmoreaboutit {
position: absolute;
left: 87px;
top: 300px;
z-index: 3;
width: 98px;
height: 9px;
}
.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;
}
#formback {
background: url(profileimages/layer5copy13.gif) no-repeat;
position: absolute;
left: 557px;
top: 467px;
z-index: 2;
width: 380px;
height: 381px;
}
#formtable {
font-size:14px;
font-weight:bold;
}
#item {
top: 187px;
}
#qtyproductback {
top: 156px;
}
#checkback {
background: url(profileimages/layer5copy10.gif) no-repeat;
position: absolute;
left: 677px;
top: 249px;
z-index: 2;
width: 249px;
height: 77px;
}
#lowerbar {
background: url(profileimages/layer1copy5.gif) no-repeat;
position: absolute;
left: 4px;
top: 342px;
z-index: 2;
width: 952px;
height: 3px;
}
#shippingback {
background: url(profileimages/layer5copy7.gif) no-repeat;
position: absolute;
left: 566px;
top: 156px;
z-index: 2;
width: 90px;
height: 92px;
}
#zipcodefield {
position: absolute;
left: 681px;
top: 296px;
z-index: 3;
width: 150px;
height: 25px;
}
#zipcodefieldform {
border:#aab1b7;
}
#totalback {
left: 800px;
}
#priceback {
left: 667px;
}
#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}
#congratulationsback {
background: url(profileimages/layer24copy.gif) no-repeat;
position: absolute;
left: 5px;
top: 368px;
z-index: 2;
width: 951px;
height: 42px;
}
#producttitleback {
background: url(profileimages/layer5copy6.gif) no-repeat;
position: absolute;
left: 48px;
top: 156px;
z-index: 2;
width: 507px;
height: 25px;
}
#layer1copy {
background: url(profileimages/layer1copy.gif) no-repeat;
position: absolute;
left: 373px;
top: 68px;
z-index: 3;
width: 400px;
height: 5px;
}
#profilesecurityback {
background: url(profileimages/layer5copy.gif) no-repeat;
position: absolute;
left: 19px;
top: 278px;
z-index: 2;
width: 395px;
height: 40px;
}
#area {
margin: 0px auto 0px auto;
background: url(profileimages/background.gif) no-repeat;
height:100%;
width: 960px;
position: relative;
}
#shipping {
position: absolute;
left: 583px;
top: 162px;
z-index: 3;
width: 54px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#yourcart {
position: absolute;
left: 10px;
top: 132px;
z-index: 2;
width: 106px;
height: 17px;
font-size:20px;
font-weight:bold;
color:#272727;
}
#profileshadow {
background: url(profileimages/layer16.gif) no-repeat;
position: absolute;
left: 29px;
top: 326px;
z-index: 2;
width: 32px;
height: 4px;
}
#fedex {
background: url(profileimages/layer30.gif) no-repeat;
position: absolute;
left: 579px;
top: 221px;
z-index: 4;
width: 66px;
height: 18px;
}
#paymenttypes {
background: url(profileimages/layer18.gif) no-repeat;
position: absolute;
left: 490px;
top: 291px;
z-index: 2;
width: 174px;
height: 27px;
}
#profileproductback {
background: url(profileimages/layer24.gif) no-repeat;
left: 223px;
top: 467px;
z-index: 2;
width: 323px;
height: 243px;
}
#profileproductimage {
/*background: url(profileimages/layer25.gif) no-repeat;*/
position: absolute;
left: 227px;
top: 491px;
z-index: 3;
width: 305px;
height: 200px;
}
#topbar {
background: url(profileimages/topbar.png) no-repeat;
position: absolute;
left: 15px;
top: 73px;
z-index: 5;
width: 952px;
height: 41px;
}
#freedivide {
background: url(profileimages/layer32.gif) no-repeat;
position: absolute;
left: 567px;
top: 213px;
z-index: 4;
width: 88px;
height: 1px;
}
#fedexback {
background: url(profileimages/layer31.gif) no-repeat;
position: absolute;
left: 567px;
top: 214px;
z-index: 3;
width: 88px;
height: 33px;
}
#checkbackbutton {
/*background: url(profileimages/layer21.gif) no-repeat;*/
position: absolute;
left: 835px;
top: 293px;
z-index: 3;
width: 72px;
height: 26px;
}
#lowerarrow {
background: url(profileimages/layer34.gif) no-repeat;
position: absolute;
left: 862px;
top: 344px;
z-index: 3;
width: 24px;
height: 6px;
}
#paymentline {
background: url(profileimages/layer20.gif) no-repeat;
position: absolute;
left: 490px;
top: 285px;
z-index: 2;
width: 173px;
height: 1px;
}
#form {
/*background: url(profileimages/layer23.gif) no-repeat;*/
position: absolute;
left: 571px;
top: 480px;
z-index: 3;
width: 349px;
height: 354px;
}
#checkoutbuttonback {
/*background: url(profileimages/layer6.gif) no-repeat;*/
position: absolute;
left: 556px;
top: 854px;
z-index: 2;
width: 382px;
height: 50px;
}
#total {
position: absolute;
left: 806px;
top: 163px;
z-index: 3;
width: 28px;
height: 10px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#price {
position: absolute;
left: 673px;
top: 163px;
z-index: 3;
width: 30px;
height: 11px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#free {
position: absolute;
left: 598px;
top: 191px;
z-index: 3;
width: 34px;
height: 10px;
font-size:14px;
color:#2e2e2e;
font-weight:bold;
}
#radiobutton {
position: absolute;
left: 571px;
top: 190px;
z-index: 3;
width: 13px;
height: 13px;
}
#qty {
position: absolute;
left: 15px;
top: 162px;
z-index: 3;
width: 25px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#itemnumber {
position: absolute;
left: 24px;
top: 190px;
z-index: 3;
width: 5px;
height: 13px;
font-size:18px;
color:#272727;
}
#copyright {
position: absolute;
left: 13px;
top: 971px;
z-index: 2;
width: 940px;
height: 126px;
font-size:11px;
}
.copyrighttext {
text-align:center;
}
.copyrightlinks {
text-decoration:underline;
color:#000000;
}
Is there a way to hide part of my css from Firefox but show up in IE? hi in Internet Explorer, this style works fine and when i print it prints the div and hides it on screen. however, in firefox, it does not hide the div on screen. can anyone help with this? many thanks Code: <style media="print">
.noPrint { display:none;}
.Hidden { display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
<style media="screen">
.Hidden { display:none;}
</style>
<div class="Hidden">Just an example of text in a div.<br /><br />Thank you</div>
</p>
<p><input type="button" value="Print this page" onclick="printpage()" /></p>
This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated! It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always). Here is the CSS (sorry if it's a mess, I'm learning) ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 298px; background-image: url(../images/PracticeAreas.gif); z-index: 2; } ul.MenuBarActive { z-index: 1000; } ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 298px; } ul.MenuBarVertical ul { margin: 0% 0 0 100%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } ul.MenuBarVertical ul li { width: 302px; background-color: #CCC; border: 1px solid #A32B34; z-index: 2; } ul.MenuBarVertical { border: 0px; } ul.MenuBarVertical ul { border: 0px; } ul.MenuBarVertical a { display: block; cursor: pointer; padding: 0.5em 0.75em; color: #A32B34; text-decoration: none; } ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color: #FFF; } ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { color: #FFF; } ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(../images/PracticeAreas.gif); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; width: 298px; } ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-repeat: no-repeat; background-position: left top; background-image: url(../images/Template_10_ro_10.png); background-attachment: fixed; width: 298px; } ul.MenuBarVertical iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; z-index: 2; } } -------------------------------------------------------------- Any help would be greatly appreciated! ~cheers~ Hi, I have a problem with a menu. I use joomla 1.5 and I create a sprite CSS menu as follow: Code:
ul.menu-central {
width: 970px;
display:inline;
}
ul.menu-central li {
display:inline;
}
ul.menu-central li a {
display: block; float:left; margin-left:5px; height: 80px;
background-image: url((URL address blocked: See forum rules)); text-indent: -9999px;
}
ul.menu-central .item67 a {
width: 150px; background-position: -10px -9px;
}
ul.menu-central .item72 a {
width: 150px; background-position: -170px -9px;
}
ul.menu-central .item97 a {
width: 150px; background-position: -330px -9px;
}
ul.menu-central .item79 a {
width: 150px; background-position: -490px -9px;
}
ul.menu-central .item98 a {
width: 150px; background-position: -650px -9px;
}
ul.menu-central .item99 a {
width: 150px; background-position: -810px -9px;
}
a { outline: none; }
In IE the bullets of the list are hidden, instead in Firefox are visible. I try to put: list-style:none and list-style-type: none in the css code, but nothing has happened. Someone could you know how can I hide the bullets also in Firefox? Thank you I wan't to print documents (actually invoices) from my PHP web application, but without the url and date and what ever there is on header and footer. As I understand the header and footer 'visibility' is browser settings and can't be changed with code. Is there any way to go around this with CSS or PHP? How do you guys take prints without header and footer data? I'm not sure if this is a PHP issue, if so maybe this thread will be moved to PHP forum.. I'd like to be able to hide a layer by hoving over a tab, so that the browser background can be seen. Code: --------------- | Hide | | |------------|| | | || | | layer || | | || | |------------|| --------------- ie. Hovering over the "hide" tag in the outer layer, causes the central layer (containing text, images and tags) to disappear. However, there should be no change when the cursor is over the central layer itself. Regards, Ian Tresman I have a very terrible isuue I am hiding DIV layer which is relatively positioned but it still takes space when hidden.. when i change the positioning to absolute things work ok.. so how could i do same with relative posotion... or any work around? You help would be appreciated Adnan Memon Here's something strange. I'm seeing a problem in IE on Windows. I've built a progress bar using vbscript and css, but the table doesn't quite display the way I want it to. Here's demo code: Code: <html> <body bgcolor="dddddd"> <center> <table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid #000; border-collapse: collapse; background-color: #000" width="100"> <tr><td id="pct_complete" width="50" bgcolor="black"> </td><td id="pct_remain" width="*" bgcolor="blue"> </td></tr> </table> </center> </body> </html> Now I've set the border to collapse, but if you load it up, you'll notice a white line between the two. I think it may be the way ie adds a 3d appearance to the table, but I can't figure out how to overcome it. Any ideas? Thanks! Hi Everyone, I'm currently doing a job for a client of the company I work for. In this case the client has created an Iframe for us to publish content on their website. They have certain aspects of the content they would like to change. The content we are publishing is coming from an old oracle database and there are no classes or ids. We want to hide one of these images from the database, is it possible to flag and hide the file name using css? Here is the code Oracle is pushing out... Though I don't know how much it'll help. <TABLE BORDER="0" WIDTH="95%" CELLPADDING="0" CELLSPACING="0" align="center"> <tr> <td align=right> <A HREF="corpworkstestfour.job_posting?pi_job_id=8315038&pi_search_id=596347860&pi_sort=POST_DATE&pi_curjob=2&pi_maxjob=2"><IMG SRC="~/next.gif" ALT="Next Job" BORDER=0 ALIGN=bottom hspace=2></A> </TD> </TR> </TABLE> next.gif is the image I need to hide. Thanks in advance to all who read, help and take a shot at this. Regards, Tom Hi everyone I'm not sure weather this is a CSS issue. For that sake I'm not even sure if it's possible, but I'll take a try Is there any way I can totally remove the scrollbars from a textarea? I've noticed that firefox doesn't show them at all times, but IE seems to show them even when they're not necessary. In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show? 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 Hi there, I've set up an href in my php script which when clicked hides or shows the layer .login. At the moment it only hides the text within the layer and not the layer itself, in other words the border and bg of the layer remain and the text disappears. How do I hide the WHOLE layer? Many thanks in advance! in my style.css the layer login is defined as: Code: .login {
border-style:solid;
border-width:1px;
border-color:000000;
background-color:FFFFFF;
filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; -khtml-
opacity:0.75;
font: normal 10px Verdana;
width:116px; height:100px;
position:absolute; z-index:2; left:82%; top:0;
margin-left: 0; margin-top:35px;
visibility:visible;
}
in my words.php script I do: Code: <a href="#" onClick="if(login.style.visibility=='visible'){login.style.visibility='hidden';}
else{login.style.visibility='visible';}">Sign in</a>
The actual layer is under: <div class="login">text here etc</div> Many thanks Mark |
|||||||