...

View Full Version : Need some help with CSS display:



XtremeGamer99
12-28-2009, 07:20 PM
I'm trying to hide everything in an element except the first letter. To do this, I'm wrapping all the text around in a <div>, and the first letter around in the <span> (I might be able to use :first-letter, but I want as much browser compatibility as I can get *cough*).

Here's the code:

<div class='hide'><span>T</span>his is some text</div>

Here's the CSS:

div.hide {
display: none; }

div.hide > span {
display: block; }

This doesn't work, and I'm not surprised because I've never really experimented with display in such a way so I'm probably going about it all wrong. >_>

Anyone care to shed some light on me? =)

Excavator
12-28-2009, 08:23 PM
Hello XtremeGamer99,
Try it the other way around. Let the div normally display it's text and hide stuff inside the <span> tags.

Excavator
12-28-2009, 08:27 PM
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
.box {
width: 700px;
margin: 20px auto;
background: #ccc;
}
.hidden {display:none;}
</style>
</head>
<body>
<div id="container">
<div class="box">
<p>
L<span class="hidden">orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
</p>
<!--end hide--></div>
<!--end container--></div>
</body>
</html>

XtremeGamer99
12-28-2009, 08:47 PM
Never thought of it that way! Thank you! =)

Arbitrator
12-29-2009, 09:37 AM
This doesn't work, and I'm not surprised because I've never really experimented with display in such a way so I'm probably going about it all wrong. >_>

Anyone care to shed some light on me? =)The correct property is visibility. Unlike with the display property, the visibility is not all or nothing; you can make the child elements of hidden elements visible.

Here's a demo:

<!doctype html>
<html>
<head>
<title>Demo</title>
<style>
div { display: block; margin: 2em; border: 0.1em solid; background: silver; color: black; }
h1, p { font-size: 1em; margin: 1em; }
/* Approach 1 */
div:first-child h1 + p { visibility: hidden; }
div:first-child h1 + p:first-letter { visibility: visible; }
/* Approach 2 */
div + div h1 + p { visibility: hidden; }
div + div h1 + p span { display: /* IE */ inline-block; visibility: visible; }
</style>
</head>
<body>
<div>
<h1>Approach 1</h1>
<p>Hi!</p>
<p>Only the first letter (i.e., H) of the paragraph above should be visible.</p>
</div>
<div>
<h1>Approach 2</h1>
<p><span>H</span>i!</p>
<p>Only the first letter (i.e., H) of the paragraph above should be visible.</p>
</div>
</body>
</html>

"Approach 1" only works in WebKit browsers (Google Chrome and Safari). I did a little reading and found out that implementors are not required to apply the visibility property to the first-letter pseudo-element, so the other browsers (Firefox, IE, and Opera) are still correct.

"Approach 2" works in everything except IE. It's a bit surprising that this doesn't work in IE8 given that they were touting their CSS2.1 support awhile back. A little bit of experimentation revealed that they don't support reversing visibility on elements with display: inline, so I threw a display: inline-block declaration in there (with no change in appearance).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum