How do you make the position: absolute; position: relative; stay together but have an auto height
I am trying to make profile cards in the style of Discord (latest design). When trying to show both the banner and a banner color it isn't aligned correctly. If anyone could help me, please?
Screenshot 1
Screenshot 2
To debug I tried to use CSS data selectors (\[data-??='true'\])
.preview-card.pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
Yesm this will work but not for everything.
I think you have a space missing. Try this maybe:
.preview-card .pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
Related
So, I'm moving from Wix to Neocities. And I can't really just take the pages from Wix and paste them into Neocities, so I need to remake a few things by hand now.
I already asked google about this and got this as an answer:
How do I position one image on top of another in HTML?
Which, for only TWO images works, sort of fine, aside from the fact that it literally just breaks if I add align="center" to the div.
It also just... doesn't really allow me to put more than the first two on top?
Here's the full code in the page:
<title>Work in progress...</title>
<link rel="icon" type="image/x-icon" href="/pages/images/favicons/main.png">
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- CSS and div to make the site logo look the same as the Wix version, modified from https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html
I might just put this into the main style.css, not sure.-->
<style>
.logo {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: relative;
top: 0;
left: 0;
}
.image3 {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<div class="logo">
<img class="image1" src="/pages/images/general/logo/1.gif" />
<img class="image2" src="/pages/images/general/logo/2.gif" />
<img class="image3" src="/pages/images/general/logo/3.gif" />
</div>
Since this stupid dumb site needs me to have 10 rep to even post images, you'll just have to take these links instead. At least I don't have to break the links like on GBATemp back when I was new there. I get that it's to prevent spam, but isn't there a better way?
Expected result:
https://i.stack.imgur.com/suFVh.png
Actual result:
https://i.stack.imgur.com/suXC7.png
(screenshot left slightly uncropped to show that it's starting at the top-left of the page, not the absolute-regardless-of-window-size center like I want. plus the 3rd image (filename 3.gif) is completely outside of the div!)
I feel like a valve developer working on TF2. This shit doesn't work!! Why? Has I ever?
In all seriousness, I'm still new to CSS and just want to know what the hell is wrong because doing it the HTML way would be WAY WAY easier for me than the "just put them all into one gif" way.
What I want in the end is for the div to just control the position of all 3 images inside of it, so that I can just put align="center" into the div's opening tag and have it just work.
Oh, and I'll put a live preview of the site at https://catboybeebop.neocities.org/pages/main_new.html, so you guys can see this all in action to better help me through this.
.logo {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: absoulute;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 0;
left: 0;
}
.image3 {
position: absolute;
top: 0;
left: 0;
}
<div class="logo">
<img class="image1" src="https://catboybeebop.neocities.org/pages/images/general/logo/1.gif" />
<img class="image2" src="https://catboybeebop.neocities.org/pages/images/general/logo/2.gif" />
<img class="image3" src="https://catboybeebop.neocities.org/pages/images/general/logo/3.gif" />
</div>
So, I made a sister thread about this on gbatemp and actually got a working answer pretty quickly!
To quote shaunj66:
Get rid of the center property on each CSS declaration. It's not valid.
Remove position from image1 so it gives the parent logo div a calculated height so that any following content added later will be below the logo div.
Add left and right rules to image2 and image3 so the browser knows there to position them then add margin 0 auto (0 margins top and bottom, automatic margins left and right) to centrally position them.
CSS:
.logo {
position: relative;
}
.image2, .image3 {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
I using react-bootstrap <Form.Control type="date"> and the calendar icon or date picker is automatically set to the right side/end of the form field. I would like to move the calendar icon/date picker to the left/beginning of the form field or so it immediately follows the date. I tried to find the proper node_module to change the CSS code for the calendar icon's position but I cannot find it.
So does anyone know where I should look to alter the CSS or is there a better fix for this?
Here is what the form looks like now:
Are there any style options for the HTML5 Date picker?
I saw this thread and their solutions/suggestions worked for me. My specific solution follows:
I created a new css file with the following code --
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
left: 0;
}
input::-webkit-datetime-edit {
position: relative;
left: 15px;
}
input::-webkit-datetime-edit-fields-wrapper {
position: relative;
left: 15px;
}
Then I imported it into my form file and it worked.
Following answer of #Cody, it worked, however date value of input box were floating right, out of box like this:
Made a small change in left for edit, which worked perfectly:
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; }
input::-webkit-datetime-edit { position: relative; left: 0; }
input::-webkit-datetime-edit-fields-wrapper { position: relative; left: 0; }
Here is the look after this change:
I also used the style options found here:
Are there any style options for the HTML5 Date picker?
And found this to be the simplest way to position the calendar to left:
input[type="date"] {
display: flex;
flex-flow: row-reverse;
padding: 8px;
height: auto;
}
I'm working on making a Squarespace page with custom CSS to be mobile responsive. In a mobile screen, my page has a drop down menu with the different links for the page. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. I know this has to do with using position: absolute, but i have not found a way to have the placement of the menu button and drop down list as I want it by using position: relative. This is my CSS for the menu:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
}
#mobileNav .wrapper {
border-bottom-style: none;
border-bottom-color: none;
}
You can view the page at richiequake.com using the password Help123. Is there another way I can have the placement of the menu button and the drop down list and have the list "push" the content of the page down so the link list is visible?
Basically, are you are missing is the z-index property. Which will place the container #mobileNav in a higher layer.
By making this change (adding z-index property to your CSS selector):
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
I can now see the menu links in all pages. You can read more about the z-index spec here.
UPDATE - To also push the content down while using absolute positioning:
As you are already using a custom class to toggle the menu links, you can use that to also toggle the content section.
Add a selector rule as following to your stylesheet:
.menu-open~section#page {
transform: translateY(355px);
}
What this will do is, when the menu-open class is in the document, the sibling section with id of page, will be pushed down 355px.
You can also add a some kind of animation if you want a smoother effect on pushing the content down, like so:
#page {
margin-top: 100px;
margin-bottom: 100px;
opacity: 1;
position: relative;
transition: transform .3s linear;
}
I just added the transition, where the .3s is the time that the transition will take.
One problem with using absolute positioning, even if you use transforms to compensate for it, is that on some devices and browser widths, the logo will overlap the navigation. Observe what the current solution renders:
Another problem is the delay between when the navigation collapses and when the text is no longer visible:
Because this is Squarespace and you don't have access to edit the underlying DOM, I would use flexbox to solve this. To do that, first get rid of this:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
And add this:
#media only screen and (max-width: 640px) {
#canvas {
display: flex;
flex-direction: column;
}
#mobileMenuLink {
order: 1;
}
#mobileNav {
order: 2;
}
#header {
order: 3;
}
#header ~ * {
order: 4;
}
}
Note that the above is not vendor-prefixed, so if you want to support older browsers, you'd correspondingly want to add vendor prefixing.
i am using a template from AMP Start.
i have used the amp-carousel.
the arrow images for next image and previous image buttons are on top of the screen and are not visible.
how can i fix this?
image one
image two
Do following things :
.amp-carousel-button .amp-carousel-button-prev {
position: absolute;
top: 50%;
left: 0;
}
.amp-carousel-button .amp-carousel-button-next {
position: absolute;
top: 50%;
right: 0;
}
or else replace default indicators to custom indicators using following link :
https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md
To dont let hide arrows try to add type=slides in amp-carousel
So the problem is as the title states... I have a small drop-down that when shown, hides itself under the scrollbar...
CSS for the dropdown:
.dropdown-content {
#extend .z-depth-1;
background-color: $dropdown-bg-color;
margin: 0;
display: none;
min-width: 100px;
max-height: 650px;
overflow-y: auto;
opacity: 0;
position: absolute;
z-index: 999;
will-change: width, height;
}
Also here is the .js code from Materialize framework in case anyone thinks that there is something that can be done in the .js:
// Position dropdown
activates.css({
position: 'absolute',
top: origin.position().top + verticalOffset + scrollOffset,
left: leftPosition
});
I have tried changin the overflow in the css but nothing happens...
So doeas anyone have any idea how to resolve this issue or is there a way to overlay the scrollbar??
NOTE: Im using Materialize framework and Meteor
EDIT Is is possible to write a function in javasacript that would calculate the position of the click event and display the dropdown where the click event happened?