/    Sign up×
Community /Pin to ProfileBookmark

position:absolute hides text

Copy linkTweet thisAlerts:
Jan 03.2007

My html page is built of top banner, middle area content text and bottom banner. Middle area content size might change: sometimes it might show 10 lines, sometimes 150 lines, depends on php script output.

I am using position:absolute, here is an example:

<div id=”textarea” style=”position:absolute; overflow:hidden; left:293px; top:1358px; width:406px; height:32px; z-index:4″>

So basically, its a text box where the content shown with banners above it and below it.

Problem is, i need this box to be without bottom limitation. If the content is only 10 lines, there is lots of blank space above the bottom banner. If the content text is 150 lines long, the text gets hidden above the bottom banner and it looks bad.

Removing “height” value did not help, in that case the text overflows the bottom banner and continues all the way down.

I would need the content to “push” the bottom banner down if there is lots of content, so the content wont get hidden.
If there is almost no content, i would need the bottom banner not to stay all the way down on the page but to be shown right after few lines of content, so it wont show all that blank space.

Any ideas?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpJan 04.2007 — I do not quite have the whole picture but here are my thoughts on this issue.

By defining "textarea" positioning as absolute, it becomes independent from the other boxes (top and bottom banner). Therefore unless it z-index is above that of the bottom banner, it will flow underneath the bottom banner after a given amount of its content.

The other part is since the height is specified (not set to auto) and the overflow set to hidden, the content will be hidden for sure whenever the number of lines x line-height is greater than the height defined: 32px. In my opinion it's rather small barely covering 3 lines of text.

My advice would be to set textarea to :

position:relative;

height: auto;

you can even define a minimum height with min-height:32px;

maybe a 10 pixels margin on the top and bottom to push it away from the top and bottom banners: margin: 10px 0px;

The top and bottom banner should also be set to position: relative;

Let me know how it goes
Copy linkTweet thisAlerts:
@SnorchauthorJan 04.2007 — holyhttp, you got the exact idea. Were very close here. I changed the values but it didnt work out. Here is the code i use:

content area text box:

&lt;div id="text1" style="position:absolute; overflow:hidden; left:23px; top:301px; width:754px; height:287px; z-index:7"&gt;<br/>
&lt;div class="wpmd"&gt;<br/>
&lt;div&gt;DYNAMIC AMOUNT OF TEXT OUTPUT DYNAMIC AMOUNT OF TEXT OUTPUT DYNAMIC AMOUNT OF TEXT OUTPUT DYNAMIC AMOUNT OF TEXT OUTPUT&lt;/div&gt;

bottom banner:

&lt;div id="image16" style="position:absolute; overflow:hidden; left:0px; top:1346px; width:974px; height:50px; z-index:2"&gt;&lt;img src="images/line-9.gif" border=0 width=974 height=50&gt;&lt;/div&gt;

So, id say they both must be changed. Content area will have auto height, so dynamic amounts of text will show all the way. Bottom banner must not have fixed location so it will:

  • 1. move down if there is lots of text content

  • 2. move up if there is hardly any text content


    • That way bigger text output wont get hidden "behind" the bototm banner and small ammount of text output wont have blank space before the bottom banner shows up.

    How do i alter my code for text area and bottom banner to achieve that?
    Copy linkTweet thisAlerts:
    @holyhttpJan 04.2007 — Please change the positioning from absolute to relative as I suggested in my previous post. You also need to set the height to auto.

    [I]<div id="text1" style="position:absolute; overflow:hidden; left:23px; top:301px; width:754px; height:287px; z-index:7">

    <div class="wpmd">

    <div>DYNAMIC AMOUNT OF TEXT OUTPUT DYNAMIC AMOUNT OF TEXT OUTPUT DYNAMIC AMOUNT OF TEXT OUTPUT DYNAMIC AMOUNT OF TEXT OUTPUT</div>[/I]

    Let's be consistent in order to get some results here.

    I have no idea about the CSS style of the container with class name "wpmd". So it's need to be shown for us to have the whole picture.

    Make sure the tags are well nested.

    By the way what's the point of having another div inside <div class="wpmd">..

    and what is the role played here by "wpmd" anyway.
    Copy linkTweet thisAlerts:
    @SnorchauthorJan 04.2007 — Ive changed the positioning from absolute to relative and set the height to auto. Now the content is fully shown but it overflows the bottom banner. The banner stays fixed in its place and the text continues above it all the way down. Now only the bottom banner location must be changed, so it wont stay fixed in the same place but dynamically go up or down, according to text amounts.

    wpmd CSS:

    .wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;color: #000000;text-decoration: none;}

    The text content is fully shown now (when its too long), so we only have to "unlock" fixed bottom banner placement.

    Maybe there is a dynamic value for "top:" so it will not stay fixed all the time but move up and down according to amount of lines in content.
    Copy linkTweet thisAlerts:
    @holyhttpJan 04.2007 — The bottom banner should also have a relative position so it can move according to the content of the preceding text container.

    Give it a top value just enough to stay away from the bottom edge of the text container.
    ×

    Success!

    Help @Snorch spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.27,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...