The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Mystery white space
danieljksn
post Oct 16 2020, 12:40 PM
Post #1





Group: Members
Posts: 5
Joined: 14-October 20
Member No.: 27,595



I feel like I'm losing my mind!

At the bottom of this page, under the copyright notice, there's a white space. I can't work out its origins - I've looked through the document thoroughly and it appears to be coming from the ether. Of course I'm missing something, but what?! blink.gif

https://julesmagazine.com/lab2/

This post has been edited by danieljksn: Oct 16 2020, 12:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 16 2020, 01:26 PM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 19,238
Joined: 9-August 06
Member No.: 6



I think it's the background color of HTML. Body ends after the copyright. What color do you want that bit to be? The greenish color or black?

You have some trickery going on with :before and :after that also seems to affect things somehow. I haven't read the whole style sheet, so not totally clear about what's going on.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
danieljksn
post Oct 16 2020, 01:31 PM
Post #3





Group: Members
Posts: 5
Joined: 14-October 20
Member No.: 27,595



QUOTE(pandy @ Oct 16 2020, 01:26 PM) *

I think it's the background color of HTML. Body ends after the copyright. What color do you want that bit to be? The greenish color or black?

You have some trickery going on with :before and :after that also seems to affect things somehow. I haven't read the whole style sheet, so not totally clear about what's going on.


Greenish, yes. Ideally I would like a sticky border around the page without any trickery, though I am willing to drop it and replace with a static one if it's causing problems. HTML really isn't my area, I'm having to muddle through out of necessity.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 16 2020, 01:50 PM
Post #4


Computer says no.
********

Group: WDG Moderators
Posts: 19,238
Joined: 9-August 06
Member No.: 6



How do you mean, sticky border? Should the bottom border be at the bottom of the page (after the copyright) or at the bottom of the window?
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
danieljksn
post Oct 16 2020, 01:50 PM
Post #5





Group: Members
Posts: 5
Joined: 14-October 20
Member No.: 27,595



QUOTE(pandy @ Oct 16 2020, 01:50 PM) *

How do you mean, sticky border? Should the bottom border be at the bottom of the page (after the copyright) or at the bottom of the window?


At the bottom of the window. By sticky border I mean that it follows the user as they scroll, so it's always present.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 16 2020, 02:43 PM
Post #6


Computer says no.
********

Group: WDG Moderators
Posts: 19,238
Joined: 9-August 06
Member No.: 6



OK, that actually makes it easier. I'd fake the top and bottom borders with two black DIV's positioned fixed.


See how this mockup looks to you. If the content is higher than the window the top and bottom borders will stay as the window is scrolled. If the content is shorter, the bottom border will be at the bottom of the window.


CODE
html               { background: red;
                     border: 15px solid black; border-top: none; border-bottom: none;
                     min-height: 100% }

#foo,#bar          { height: 15px; width: 100%;
                     background: black;
                     position: fixed }
#foo               { bottom: 0; left: 0 }
#bar               { top: 0; left: 0 }

body               { margin-top: 15px; margin-bottom: 15px }



HTML
aaaaa<br>
bbbbb<br>
ccccc<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
xxxxx<br>
yyyyy<br>
zzzzz<br>




<div id="foo"></div>
<div id="bar"></div>



The top and bottom margin on BODY is needed or the text would disappear under the positioned DIVs. You can use the margin with a wrapper DIV as well, as long as you use them with something that contains all content it will work.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th November 2020 - 10:37 PM