Append element to right without shifting existing elements? |
Append element to right without shifting existing elements? |
CharliePrince |
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/ |
pandy |
Nov 23 2020, 11:16 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
CharliePrince |
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 |
pandy |
Nov 24 2020, 02:05 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
|
CharliePrince |
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! |
CharliePrince |
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 |
pandy |
Nov 25 2020, 12:56 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
CharliePrince |
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 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! |
pandy |
Nov 25 2020, 10:43 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yes, exactly. Or almost anyway. 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 |
Lo-Fi Version | Time is now: 18th April 2024 - 06:08 AM |