...

View Full Version : <p> tags in a stylesheet



GardenGnome2
11-14-2008, 05:21 PM
How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.


<style type=text/css">
.on { <p>text appear</p> }
.off { }
</style>

oesxyl
11-14-2008, 05:30 PM
How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.


<style type=text/css">
.on { <p>text appear</p> }
.off { }
</style>


<style type=text/css">
.on { <p>text appear</p> }
.off { }
p {
line-height: 1000px;
font-size: 4px;
}
</style>


http://www.htmldog.com/reference/

regards

GardenGnome2
11-14-2008, 05:38 PM
But, that didn't work. The text didn't appear. The <p> tag is enclosed by < >, so they wouldn't work in the style sheet, I presume...

oesxyl
11-14-2008, 05:46 PM
But, that didn't work. The text didn't appear. The <p> tag is enclosed by < >, so they wouldn't work in the style sheet, I presume...
must be other reason that text didn't appear. where did you see < >?



p {
line-height: 1000px;
font-size: 4px;
}

regards

oesxyl
11-14-2008, 05:48 PM
How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.


<style type=text/css">
.on { <p>text appear</p> }
.off { }
</style>
sorry, I see now. But this is invalid!!!

I missread your post. This can't be done only with html/css. You must use javascript.

best regards

GardenGnome2
11-14-2008, 06:00 PM
Okay, thanks.

Apostropartheid
11-14-2008, 11:22 PM
Well, no, it CAN be done with CSS, using the visibility property, but only to a certain degree. We need specific context.

oesxyl
11-14-2008, 11:29 PM
How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.


<style type=text/css">
.on { <p>text appear</p> }
.off { }
</style>


Well, no, it CAN be done with CSS, using the visibility property, but only to a certain degree. We need specific context.
this one? I'm curios how?

hmm, this?


p { visibility: hidden; }
p:hover { visibilty: visible; }


best regards

gnomeontherun
11-14-2008, 11:35 PM
My question is how can someone find something on the page if it is hidden?


<style>
p { visibility: hidden; }
p:hover { visibility: show; }


<p>Text to hide and show.

This is supported only by some browsers though.

oesxyl
11-14-2008, 11:40 PM
My question is how can someone find something on the page if it is hidden?
is not the only question, :)


This is supported only by some browsers though.
old IE with a javascript fix for hover, could work, probably this is one of the limitation mentioned by CyanLight.

best regards

Apostropartheid
11-14-2008, 11:45 PM
You'd use the parent element's hover.

<!doctype html>
<html xml:lang="en">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml;charset=utf-8"/>
<title>Visibility tricks.</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font: .814em/1.8 'lucida grande', 'lucida sans unicode', 'dejavu sans', sans-serif;
}
#container {
height: 100px;
width: 200px;
background: #39f;
}
#content {
color: #fff;
visibility: hidden;
text-align: center;
line-height: 100px;
}
#container:hover #content {
visibility: visible;
}
</style>
</head>
<body>
<div id="container">
<p id="content">Look at me! Peekaboo!</p>
</div>
</body>
</html>
Of course, not supported by IE6, but where would we be without theory?

oesxyl
11-14-2008, 11:51 PM
You'd use the parent element's hover.

<!doctype html>
<html xml:lang="en">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml;charset=utf-8"/>
<title>Visibility tricks.</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font: .814em/1.8 'lucida grande', 'lucida sans unicode', 'dejavu sans', sans-serif;
}
#container {
height: 100px;
width: 200px;
background: #39f;
}
#content {
color: #fff;
visibility: hidden;
text-align: center;
line-height: 100px;
}
#container:hover #content {
visibility: visible;
}
</style>
</head>
<body>
<div id="container">
<p id="content">Look at me! Peekaboo!</p>
</div>
</body>
</html>
Of course, not supported by IE6, but where would we be without theory?
smart idea with this div#container, :)
to solve the "how could be find", can put another p inside div, :)

best regards

GardenGnome2
11-15-2008, 01:45 PM
The only thing with that is that it works once. I'm only testing in IE. Oh wait. Maybe Nevermind.

abduraooft
11-15-2008, 02:26 PM
There is a content property in CSS, but this is also not supported by IE. See http://htmldog.com/reference/cssproperties/content/

eg:

p:hover:after{
content: 'how are you?';
}

<p>Hello...</p>

bazz
11-15-2008, 03:54 PM
would CyanLight's 'theory' work in IE6 as well, if the 'p' tag was inside an 'a' tag?

if so, you could style that specific link, to have the same style as you would want for a normal paragraph.

bazz

abduraooft
11-15-2008, 04:02 PM
would CyanLight's 'theory' work in IE6 as well, if the 'p' tag was inside an 'a' tag? may be but it will be an invalid markup, since we can't have a block level element like <p> inside an anchor, which is an inline element.

oesxyl
11-15-2008, 04:04 PM
The only thing with that is that it works once. I'm only testing in IE. Oh wait. Maybe Nevermind.
once if visibility is set to visible in #container will stay so until you reload the page or use samething to set it back to hidden. Is to complicated, in my opinion, that's why I said to use javascript:



p {
display: none;
}




document.getElementById('container').onmouseover = function(){
document.getElementById('container').style.display == 'block';
};
document.getElementById('container').onmouseout = function(){
document.getElementById('container').style.display == 'none';
}


<p id="container">Content to hide/unhide</p>


probably somebody in js forum could write a better way to do that.

best regards

Apostropartheid
11-15-2008, 07:54 PM
once if visibility is set to visible in #container will stay so until you reload the page or use samething to set it back to hidden. Is to complicated, in my opinion, that's why I said to use javascript:



p {
display: none;
}




document.getElementById('container').onmouseover = function(){
document.getElementById('container').style.display == 'block';
};
document.getElementById('container').onmouseout = function(){
document.getElementById('container').style.display == 'none';
}


<p id="container">Content to hide/unhide</p>


probably somebody in js forum could write a better way to do that.

best regards
But this wouldn't work, as #container's default state is to not be visible. How can you mouseover something which isn't there?

oesxyl
11-15-2008, 08:15 PM
But this wouldn't work, as #container's default state is to not be visible. How can you mouseover something which isn't there?
yes probably don't work, I don't tested and don't think to much how to solve. The idea was/is for op to ask in the javascript forum. They could give a optimal solution for this.

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum