|
CSS - I Need Invisible Text!
Hello all,
Site is here. As you can see, there are 4 links along the top. They are all images controlled by CSS. Here's the XHTML code I am working on: Code: <div id="logonav"> <ul> <li id="ln1"><a accesskey="k" href="./" title="To The Main Page"></a></li> <li id="ln2"><a accesskey="t" href="timeline/" title="A little about me"></a></li> <li id="ln3"><a accesskey="i" href="about/" title="Info about this little web space"></a></li> <li id="ln4"><a accesskey="c" href="contact" title="Contact Me"></a></li> </ul> </div> As you can see, there is NO actual value for the anchor: nothing. Well, the WAI-AAA validator doesn't like that. There has to be something there. The problem is that if I add text there it, of course shows up on the page. I don't want that, I want my images... So, can I add the text, but make it invisible somehow? I've played with transparencies a bit, but nothing's working. Anyone know any tricks? The CSS code that controls them is he Code:
#logonav {
background : url(./pix/MenuBar.jpg) no-repeat;
height:40px;
width : 780px;
}
#logonav ul {
margin : 0;
padding : 0;
white-space : nowrap;
list-style : none;
}
#logonav li {
float : left;
width : 130px;
text-align : center;
margin-left : 25px;
}
#logonav li a {
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
}
#ln1 a {
background : url(./pix/home_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln1 a:visited {
background : url(./pix/home_click.gif) no-repeat;
}
#ln1 a:hover {
background : url(./pix/home_mouse.gif) no-repeat;
}
#ln2 a {
background : url(./pix/time_bio_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln2 a:visited {
background : url(./pix/time_bio_click.gif) no-repeat;
}
#ln2 a:hover {
background : url(./pix/time_bio_mouse.gif) no-repeat;
}
#ln3 a {
background : url(./pix/about_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln3 a:visited {
background : url(./pix/about_click.gif) no-repeat;
}
#ln3 a:hover {
background : url(./pix/about_mouse.gif) no-repeat;
}
#ln4 a {
background : url(./pix/contact_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln4 a:visited {
background : url(./pix/contact_click.gif) no-repeat;
}
#ln4 a:hover {
background : url(./pix/contact_mouse.gif) no-repeat;
}
Just as an example, I'll add "Home" to the bar in red text. Bsaically, I figure that still has to be there, but invisible! How? Thanks! Chris Similar TutorialsI am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. This is the weirdest thing, and I don't know what is wrong, and its driving me crazy. I have the following html code. Code: <body> <div id="container_bg"> <div id="container"> <div id="brand_bar"> <div id="logoleft"> Logo1 </div> <div id="logoright"> Logo2 </div> </div> <div class="header"> Big Image goes here </div> <div class="body"> <div id="left"> Left Column </div> <div id="right"> Right Column </div> </div> </div> </div> <div class="clear"></div> <div id="footer_bg"> Footer goes here </div> </body> </html> The css is as follows... Code:
body {
margin: 0px;
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}
#logoleft {
float: left;
width: 350px;
}
#logoright {
width: 347px;
}
#container_bg {
width: 768px;
margin: 0px auto;
background-image: url(../images/container_bg.gif);
background-repeat: repeat-y;
padding-bottom: 20px;
}
#footer_bg {
width: 768px;
height: 40px;
margin: 0px auto;
background-image: url(../images/footer_bg.gif);
}
#container {
width: 700px;
margin: 0px auto;
text-align: left;
}
#left {
float: left;
width: 250px;
}
#right {
width: 450px;
}
The weird thing is...I can't make left and right add up to 700 or its "bigger" than its container. I actually have to make the total add up to 697 or they won't stay on the same line. Is there just a mysterious 3 px space between divs...or am I missing something? The same with logoleft and logoright...if I make them the same (350px) to add up to 700px...it won't stay on the same line...what is going on? inner circle design Ok. If you view this page in Firefox(any version) it works fine with the rollovers and all. When viewed in IE, when you mouseover the portion to the left of the about us button, the contact us button acts as if it were being rolled over. I used a JavaScript rollover, and styled it with CSS. I'm thinking the problem lies in the CSS, although it is valid(as is the XHTML page). Can anyone steer me in the right direction? Thanks. How would I change this to make list elements invisible? At the moment it just greys them out? div.sideBox ul li.disabled { display: block; padding: 2px 0 2px 7px; border-top: 1px solid #ccc; color: #777777; } So Id like to make the element basically like it doesnt exist. I dont want any spaces left over. Ive tried this div.sideBox ul li.disabled2 { visibility:hidden; } but it leaves an empty space. Hi, I am using this class for .textbox, input.text_class, select.select_class{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; background-image: url(./textbox_shadow.gif); height: 18px; width: 160px; margin: 0px; padding: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #BFBFBF; border-right-color: #E2E2E2; border-bottom-color: #EEEEEE; border-left-color: #C8C8C8; } for text box , how can I made tghe text box invisible or hidden style.display = "none"; Hi Guys, Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this? P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this. Cheers, Chris Hi all! I have some DIVs and I want only one of them to be visible. Here is some simplified code: Code:
<p>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='visible';document.getElementById('div2').style.vis ibility='hidden';">Show DIV 1</a>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='hidden';document.getElementById('div2').style.visi bility='visible';">Show DIV 2</a>
</p>
<div id="div1" style="visibility:visible">
this is the content of div 1
<br/>line 2
<br/>line 3
</div>
<div id="div2" style="visibility:hidden">
this is the content of div 2
<br/>line 2
</div>
By clicking the <a> link, one DIV becomes visible, the other is hidden. The problem is that there is a gap between them, both in FF2 and IE7. Can someone explain me why there is this gap, and if there is a way I can remove it? TIA Alex Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas. Here is the IE Screenshot and the Firefox Screenshot Also... The CSS and The HTML I have a site with a cityscape and need text/image div to appear to pass behind skyscrapers. The javascript for all the div motions are worked out. I had planned to just overlay a higher z-index graphic of the skyscraper where I wanted the text to pass behind, but as the site now requires the ability to scale the images on a window resize, that has become difficult if not impossible to make work seamlessly. So what I would like to do is have one div (textDiv) pass behind another (towerDiv) that shows through to the background, but when it does, it is hidden in the same way it would have been if passing behind a div with an image or background. Is it possible to make a div behave this way with css configuration? Z-index Visible 30 towerDiv 20 >-------textDiv---------> >-------------> 10 CityCityCityCityCityCityCityCityCityCityCityCityCityCity An alternative I've thought of would be to have the textDiv jump from one div container to another somehow, but that would require javascript and I'll place that question there. Thanks Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Is it possible to have text run around a div positioned with absolute positioning? |
|||||||