The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Append element to right without shifting existing elements?
CharliePrince
post Nov 23 2020, 09:25 PM
Post #1


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623



In the fiddle below . . If you comment the <button> tag each image on the top row becomes aligned with the images on the bottom row.

Is there a way to keep the top and bottom images (aligned) and / after adding a button to the right of the top row?

https://jsfiddle.net/CharliePrince/jf1seLn9/17/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 23 2020, 11:16 PM
Post #2


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

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



One way would be to position the button absolute within its container. In case you don't know, it will then be taken "out of the flow" and takes up no space.


CODE
.imagesMain { position: relative }


.imagesMain button  { position: absolute; top: 50%;
                       height: 2em; margin-top: -1em }


I just grabbed a height for the button. It can be anything, but is needed to nudge the button up with a negative top margin that's half the button's own height. With just top 50% the top of the button is placed in the vertical center of the container, so it hangs a little low.


Glad to see you back BTW. I thought Christian had scared you off. laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post Nov 24 2020, 01:42 PM
Post #3


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623



Sitting position property to absolute worked. Thanks again pandy.

CODE
position: absolute;


see URL below
http://jsfiddle.net/CharliePrince/jf1seLn9/27/


No one scared me off. You all are very nice and seem so patient especially compared to SO if you know what I mean ha.

I was studying JavaScript for the last week or so - it seems so much easier to me than html, JS probably seems easier to me because I have several years of desktop application development (EXEs and DLLs) and am trying to learn - add html, css and JS etc to my skillset.

This post has been edited by CharliePrince: Nov 24 2020, 01:45 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 24 2020, 02:05 PM
Post #4


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

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



Well, if you just use position: absolute the button will go all over the place if the page is zoomed. Try it! There was a reason for the rest of the CSS I posted. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post Nov 24 2020, 03:02 PM
Post #5


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623



I see what you mean now. Edited on http://jsfiddle.net/CharliePrince/jf1seLn9/42/

it works perfectly when resizing viewport's (width) but the button moves around when resizing the viewport's (height)

I'll have to look at this more later. I have to work on other stuff for the next few hours. Will be back here this evening. Thanks again pandy! I truly appreciate your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post Nov 24 2020, 11:02 PM
Post #6


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623



I still can't get perfection using just the css but . . .

I was able to get the button to reposition (when browser is resized) quite nicely using this bit a JavaScript

CODE


function formatPageForResize() {

    var imgElmnt=document.getElementById("imgElmnt");
    var btnElmnt=document.getElementById("buttonElmnt");

    var num = imgElmnt.offsetLeft + imgElmnt.width +5;
    btnElmnt.style.left = num.toString() + 'px';

    var num = imgElmnt.offsetTop + (imgElmnt.height *.5);
    btnElmnt.style.top = num.toString() + 'px';

}



See the jsfiddle
https://jsfiddle.net/CharliePrince/jf1seLn9/46/

Even though this js code gives me the desired behavior (when the browser is resized) I'm still wondering if this can be done with css only?

This post has been edited by CharliePrince: Nov 24 2020, 11:24 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 25 2020, 12:56 AM
Post #7


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

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



QUOTE(CharliePrince @ Nov 25 2020, 05:02 AM) *

I still can't get perfection using just the css but . . .

I was able to get the button to reposition (when browser is resized)


If it moved you changed something in what I posted. I doesn't move a pixel for me.

Attached Image
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post Nov 25 2020, 03:44 PM
Post #8


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623



pandy you're absolutely correct.

The css does work and it works perfectly.

I created a fresh test environment and yes, it working here now too. Once again, I don't know what I was doing blush.gif when I thought it wasn't working correctly but it is now.

I now have a much better understanding the position property being set to absolute and that this absolute position is relative to it's parent's position? Thanks again pandy! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 25 2020, 10:43 PM
Post #9


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

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



laugh.gif

Yes, exactly. Or almost anyway. tongue.gif
AP is relative to what's called the box's containing block. For our purposes, with a box positioned absolute, the containing block is the closest ancestor with a position other than static (static is the default). 'position: relative' doesn't do much if you don't use top, bottom and so on. So it can be used to create a containing block and thus a positioning environment for the AP box without disturbing things.

If no other containing block is found, the root element is used. In practice that means the viewport. That's why AP positioning can be really troublesome if you don't know what you are doing. People tend to start to position everything so it looks nice on their screen - without knowing about containing blocks. When the browser window is another size than expected things are no longer where they were intended to be. 1000px from the left is 1000px from the left no matter the size of the window, so it can go really crazy.


http://www.w3.org/TR/CSS21/visudet.html#co...g-block-details
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 - 09:39 PM