/    Sign up×
Community /Pin to ProfileBookmark

keep padding

Copy linkTweet thisAlerts:
Oct 22.2007

When I’ve got a div with a padding of let’s say 80 pxs, the text starts 80 pxs down initially. Scrolling large amount of text however moves the text to the top of the div again. So e.g., when the div has a top padding of 80pxs and I use a named anchor link, it would scroll down and the starting location would be at the top of the div. As if the div hadn’t got a top padding anymore.

Is there any way to keep this top 80px whitespace when scrolling or using named anchors?

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Oct 22.2007 — Insert another wrapping div with an 80px top margin an pull the padding out of the existing one.
Copy linkTweet thisAlerts:
@digitalecartoonauthorOct 22.2007 — Tried something like it, but it doesn't work. When I scroll down the text moves up. Must have forgotten something ?

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
content {
padding-right: 80px;
padding-left: 80px;
}
#space {
margin-top: 180px;
}
-->
</style>
</head>

<body>

<div id="content">
<div id="space">
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque a est eu mi sagittis consectetuer. Suspendisse potenti. Sed et lorem. Maecenas at nisl nec augue fermentum gravida. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel nunc ut ante nonummy facilisis. Quisque at odio in purus mattis gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer scelerisque nonummy urna. Cras turpis odio, lacinia a, varius sed, euismod vitae, ipsum. Proin aliquet viverra purus. Nunc in massa in elit varius dignissim. </p>[/code]
Copy linkTweet thisAlerts:
@FangOct 22.2007 — &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
/*&lt;![CDATA[*/
&lt;!--
#content { padding-right: 80px; padding-left: 80px; border:1px solid red; width:10em; height:10em; overflow:scroll;}
#space { padding-top: 180px; margin:0;}
--&gt;
/*]]&gt;*/
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="content"&gt;
&lt;p id="space"&gt;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque a est eu mi sagittis consectetuer.
Suspendisse potenti. Sed et lorem. Maecenas at nisl nec
augue fermentum gravida. *** sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
Mauris vel nunc ut ante nonummy facilisis. Quisque at
odio in purus mattis gravida. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis
egestas. Integer scelerisque nonummy urna. Cras turpis
odio, lacinia a, varius sed, euismod vitae, ipsum. Proin
aliquet viverra purus. Nunc in massa in elit varius
dignissim.
&lt;/p&gt;
&lt;a href="#space"&gt;top&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@digitalecartoonauthorOct 22.2007 — Tried it, but it doesn't do exactly what I'm after. The text should begin initially e.g. 4 lines down. And when I move the scrollbar down, the text should scroll up like it normally does, but above the top of the text, the 4 empty lines should still be there.

Like in the attached file.

[upl-file uuid=526d9798-9700-4fac-8744-e2747d9b4e8a size=61kB]naamloos1ze9.jpg[/upl-file]
Copy linkTweet thisAlerts:
@ray326Oct 23.2007 — I was thinking more like a double wrapper.

<div id="wrapper">

<div id="content">

<p>....</p>

</div>

</div>

Where "wrapper" could have the padding. The scroll bar would then be on "content", though.
Copy linkTweet thisAlerts:
@digitalecartoonauthorOct 23.2007 — Tried it by giving wrapper a padding of 20. It initially starts 20 px down, but when I scroll the content it moves up against the top border of the wrapper div anyway
Copy linkTweet thisAlerts:
@ray326Oct 24.2007 — A variation on Fang's code illustrating what I was thinking.[code=html]
<!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">
/*<![CDATA[*/
<!--
#wrapper {
padding: 2em 0 0 2em;
overflow: hidden;
width:80%;
height:10em;
}
#content {
height:10em;
overflow: auto;
}
#content p {
margin-top:0;
margin-bottom: .5em;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque a est eu mi sagittis consectetuer. Suspendisse potenti. Sed et lorem. Maecenas at nisl nec augue fermentum gravida. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel nunc ut ante nonummy facilisis. Quisque at odio in purus mattis gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer scelerisque nonummy urna. Cras turpis odio, lacinia a, varius sed, euismod vitae, ipsum. Proin aliquet viverra purus. Nunc in massa in elit varius dignissim. </p>
<a href="#space">top</a>
</div>
</div>
</body>
</html>
[/code]
×

Success!

Help @digitalecartoon 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 6.1,
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,
)...