14 replies [Last post]
johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

i'd like to hide the top AND bottom of a block of text.

in other words, if my text contains three paragraphs, i want css to hide the FIRST and LAST paragraphs.

this would be like a window on a section of the text, where i can reveal different parts of the text just by changing the css.

text
text
text visible section---start
text
text
text
text visible section---end
text
text
text

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Assuming something like

Assuming something like this:

<div id="mytoken">
  <p class="first">...</p>
  <p>...</p>
  <p class="last">...<p>
</div>
You can use the visibility property, which would preserve a blank space where the hidden text resides, or the display property which would act as if the hidden text never existed.
#mytoken p.first,
#mytoken p.last {
  visibility: hidden;
  }
=========== or
#mytoken p.first,
#mytoken p.last {
  display: none;
  }
If you want only the last paragraph to show (or similarly, the first):
#mytoken p {
  visibility: hidden;   /*hides all paragraphs*/
  }
 
#mytoken p.last {
  visibility: visible;  /*overrules hidden for the last paragraph*/
  }
=========== or
#mytoken p {
  display: none;
  }
 
#mytoken p.last {
  display: block;
  }
You could use #mytoken p:first-child {} or #mytoken p:last-child {}, but support is limited and they would constrain your structure.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

thanks gary. but i want to be

thanks gary.

but i want to be able to display a section of text, which could be a group of paragraphs within a larger body of text, or could be a section of text within a single paragraph.

i want the css to show, for example, rows (or lines, or list-items) 10 through 15. if items are removed or added, 10 through 15 would still be displayed, except they might be different items.

the problem with id's is that i want the site content manager to be able to add and remove content at-will. maybe the solution would involve id's in some way, but the couldn't be as specific as "i'm the third item", because the third item could be changed at any time.

i would be happy with a solution that's based on items, OR rows, OR lines, OR characters, OR even pixels (eg, "show the content from vertical pixel 100 through pixel 300").

the best would be by proportion: "display the middle 1/3rd of this content", but that might be too much to ask!

cheerio!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Replace the p elements with

Replace the p elements with div. Then put as few or as many paragraphs as you like in each segment.

The reason for the id at the top level is so you can have multiple blocks, but not have to have a potload of individual names for the segments. E.g.

<div id="hotstuff">
  <div class="first">
    <p>...</p>
    ...
  </div>
 
  <div>
    <p>...</p>
    ...
  </div>
 
  <div class="last">
    <p>...</p>
    ...
  </div>
</div>
 
<div id="notsohotstuff">
  <div class="first">
    <p>...</p>
    ...
  </div>
 
  <div>
    <p>...</p>
    ...
  </div>
 
  <div class="last">
    <p>...</p>
    ...
  </div>
</div>
================
#hotstuff .first,
#hotstuff .last {
  display: none;
  }
 
#notsohotstuff div {
  display: none;
  }
 
#notsohotstuff .last {
  display: block;
  }
This shows you the methodology; it's up to you to apply it to your particular circumstance.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

thanks, gary. but if i'm

thanks, gary.

but if i'm understanding you correctly, then this solution won't work for me. i want to use the css itself to change the position and proportion of visible text, and i don't see how to do either with your method.

-jr

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

CSS is not a programming

CSS is not a programming language, it is a declarative presentation language. There is no way for css to gauge which proportion to show or hide. You can use a server or client side language to make the determination, and have that alter the document object model or the style rules to affect the changes; that, or make the determination in a static manner, as in the previous answers.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

johnywhy wrote: but if i'm

johnywhy wrote:

but if i'm understanding you correctly, then this solution won't work for me. i want to use the css itself to change the position and proportion of visible text, and i don't see how to do either with your method.

As Gary rightly points out, that's not what CSS is for and not what it can do. You can want something all you like, but you can't do anything to change what CSS is for and what it can do. CSS can't do what you ask for, because it was purposely designed so it can't.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

i agree that server-side

i agree that server-side scripting may be my best solution, but i'm still looking at css.

i disagree that css cannot gauge proportions: we use proportionsin css all the time. for example "width:30%;".

think of it this way: we all know how to set a div height too small to accommodate all the text, which causes overflow below the div, right? then we can use "overflow:hidden" to hide the overflow under the div. then we change the height setting in the css to change the cutoff point-- no edits to the html required. nothing unusual.

so one possible solution is to do the same thing, but at the TOP. in other words, force the text to be bottom-aligned inside the div, forcing the TOP of the text to overflow ABOVE the div, and then hide the top-overflow.

another possible way: a frame which cuts off the top of it's own contents.

another possible way: a div with negative top-margin and bottom-margin, and then some way to hide the stuff that falls in the negative area above and below the div. (this would be the best solution, because it hides both the top and the bottom).

with all of these hypothetical solutions, i could change the cutoff point by changing the css alone. i would NOT have to edit the html to change the cutoff point.

one of my pet peeves is forum posts saying "you can't do that." that's not telling me anything new.

best

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

johnywhy wrote: one of my pet

johnywhy wrote:

one of my pet peeves is forum posts saying "you can't do that." that's not telling me anything new.

I don't understand that attitude at all. I mean, if someone asked you for advice as to how better flap his arms in order to fly by that means, how would telling him he is wasting his time not be a favour?

The thing is sometimes you really just can't do that!

And sometimes there are people you can trust when they tell you you can't. To me at least, Gary Turner is one of them and if he tells you it can't be done with CSS there is really no better authority. And he has told you that.

But, it's your life and you can waste your time however you wish of course. But should you be asking someone else to waste their time with you?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

I'd like to add that if

I'd like to add that if you're doing this for an experiment, just because you can then I can understand bucking the use and purpose of CSS. If this is a real, production site then I'd just listen to Gary and Ed and the guys in the other thread.

johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

i'm going to focus on css here.

i'm going to focus on css here. i can only say that many times i've been told "you can't do that", and then i found a way.

another possible way to achieve my goal: put a relatively or absolutely position div above the div who's top i'm trying to cut off. it would hide the top text. this is the "hiding div". the hiding-div would have a higher z-index than the text-div. and i think something has to be set to "block", but i'm not sure.

then give the div containing the text a negative margin. this is the "text div"

the negative margins on the text-div would make positioning easier to understand, and then the hiding-div would not hide borders on the text div.

johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

Solution: CSS2

here's my css2 solution-- uses no pseudo-elements/classes.

you're looking into a window at some text. you can watch the text "scroll" up behind the window. (no actual animation takes place).

to scroll the text up, you change 1 value in the css: the TOP property, of the text div. 0 puts the text at the top of your visible window. as you negatively increase the top property of the text div, the text div rolls up and out of sight.

the basic idea is to put your content in an absolute div, contained within a relative div. the relative container div is your "window" on the text-- it doesn't move. the absolute content div behind it moves up, as you negatively increase it's top property.

		.content {
			top:-110;
			position:absolute;
			}
 
		.container {
			width:250px;
			height:200px;
			position:relative;
			overflow:hidden;
			}

the overflow:hidden property behaves exactly as i wished for-- it hides overflow ABOVE the visible window, as well as below it.

note, your container constrains the dimensions of the content div, so you state your height & width in the container div.

you change the amount (ie proportion) of visible text by changing the height of the container.

complete html sample:

<!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>
	<title>Test Page</title>
	<style  type="text/css">
		.content {
			top:-110px;
			position:absolute;
			}
 
		.container {
			width:250px;
			height:200px;
			position:relative;
			overflow:hidden;
			}
	</style>
</head>
 
<body>
 
<p>here's some stuff before it.</p>
 
<div class="container">
<div class="content" >
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in 
 
Liberty, and dedicated to the proposition that all men are created equal.
 
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so 
 
dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a 
 
portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is 
 
altogether fitting and proper that we should do this.
 
But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The 
 
brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or 
 
detract. The world will little note, nor long remember what we say here, but it can never forget what they did 
 
here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here 
 
have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us 
 
-- that from these honored dead we take increased devotion to that cause for which they gave the last full 
 
measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this 
 
nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for 
 
the people, shall not perish from the earth.
</div>
</div>
 
<p>here's some stuff after it.</p>
 
</body>
 
</html>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And what is wrong with

And what is wrong with "Complete html example" ?
Why do you think that now many of are mildly peeved ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

ok, validated

it works in all browsers i've tried, including chrome, ff, ie6. it fulfills the requirement that i spec'd at the top of this thread.

and...

...ok, now it's validated. phew, don't mess with the moderator!

Big smile

johnywhy
johnywhy's picture
Offline
Regular
Last seen: 1 year 6 weeks ago
Timezone: GMT-7
Joined: 2010-03-11
Posts: 25
Points: 34

if i could, i would mark this

if i could, i would mark this thread 'solved', and my own post as the best solution. woo-hoo!

now i'm moving onto the next stage of my little project, which is explained here.

cheers!