The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Simple question: where does the extra whitespace come from?, 1 of my images suddenly has extra whitespace
profoundDmd
post Dec 3 2020, 08:55 AM
Post #1





Group: Members
Posts: 5
Joined: 3-December 20
Member No.: 27,666



https://jsfiddle.net/rgz90kc3/

As you can see on the fiddle, there are 2 images (laptops), the first image is more right-aligned that the 2nd one, why/how?

Thnx in advance!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 3 2020, 03:23 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No, I don't see that. What browser do you use?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
profoundDmd
post Dec 4 2020, 03:20 AM
Post #3





Group: Members
Posts: 5
Joined: 3-December 20
Member No.: 27,666



Hm, browser should be irrelevant, occurs on Chrome and FF.
So you're saying those 2 images are vertically aligned? That is strange (well, actually it isn't, because they should), what browser are you using?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2020, 10:32 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It should, but often isn't when something goes wrong.

But I misread, I thought you said horizontally aligned. Apologies. blush.gif

So is the goal that one image should totally cover the other?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
profoundDmd
post Dec 4 2020, 10:38 AM
Post #5





Group: Members
Posts: 5
Joined: 3-December 20
Member No.: 27,666



I just want them vertically aligned, they are both in another div and should not overlap/cover or anything like that. They reside in different parts of the website.
I'm strictly speaking about their position on the x-axis, so to speak. They need to be on the same position x, not the same position y. Hope i'm making myself clear.
Like our avatars next to our posts (if i had one). They have they same x-position, not the same y-position.
And without specifying the css property 'left', that is not the case for the images in the fiddle.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2020, 10:59 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



So one over the other? Over as in above, not on top of.

I'll try to get your HTML and CSS out of the fiddle thing and have a look.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2020, 11:18 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Have you looked at it directly in a browser? The images aren't on top of each other when the window isn't that small. But they do move around when the browser window is resized. It has to do with your positioning scheme.

To begin with remove what I've commented out below.
CODE
.workTemplate img {
    width: 210px;
/*     position: relative;
    top: 250px; */


And to avoid browser discrepancies, do use a doctype.

I'm not sure how you want it to look, so I'm confused about what to suggest. Positioning everything is generally not a good idea though. And if you don't do it right, the result can be just this, things move around when the window is resized and look good only in the window size the page was designed in.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
profoundDmd
post Dec 4 2020, 03:47 PM
Post #8





Group: Members
Posts: 5
Joined: 3-December 20
Member No.: 27,666



QUOTE(pandy @ Dec 4 2020, 10:59 AM) *

So one over the other? Over as in above, not on top of.



Yes, correct.
It seems like one image is behaving unlike the other, and i don't know why...
And that fiddle is merely to reproduce the problem i'm having on my site, so yes i checked in a browser, used doctype, ...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
profoundDmd
post Dec 5 2020, 02:58 AM
Post #9





Group: Members
Posts: 5
Joined: 3-December 20
Member No.: 27,666



I would like to add a question, since you seem to know your way around css/html.
As the sidebar scrolls in, you'll notice it gets sticky. The green and yellow div don't get sticky but show normal behavior. What I would like is for the sidebar to start scrolling again, as the footer comes in, is this possible without js you think?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 5 2020, 08:48 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't know. I haven't looked into position: sticky, really.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:54 PM