On my website https://frostoase.netlify.app/ the vote and more info buttons keep getting pushed down when they are supposed to be in the container why?
hello? anyone there?
If you want to see something like this:
change the values of the width and height property of the #main selector.
I don’t I m trying to replicate this but with some changes as practice
if you look at this
the it looks as if the margin is taking up the while place but it isent
nevermind I just use position abs to fix it
What 20% on the container computes to depends on the viewport height. It is calculated from the body height of height: 100vh.
If you use min-height instead on the container it should never allow the content to overflow.
2 more questions ill just ask al them to get them done. For the particles <div id="particles-js"></div> how do I make sure they don’t over flow below the tip of the black box that says Welcome to Frost Oase.
Secondly when you hover over ##players online and the discord how Do I make sure the text and imags transform smoothly.
JS
particlesJS("particles-js", {
"particles": {
"number": {
"value": 150,
"density": {
"enable": true,
"value_area": 789.1476416322727
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.48927153781200905,
"random": false,
"anim": {
"enable": true,
"speed": 0.5,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": true,
"speed": 3,
"size_min": 0,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 100,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 83.91608391608392,
"size": 1,
"duration": 3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
function hoverLink() {
document.getElementById("crep").src = "images/creeper2.png"
document.getElementById("myText").innerHTML = " Click to Copy Ip"
document.getElementById("ip").style.textAlign = "right"
}
function unhoverLink() {
document.getElementById("crep").src = "images/creeper 1.png"
document.getElementById("myText").innerHTML = "SUBDOMAIN.NAME.IP"
document.getElementById("ip").style.textAlign = "right"
}
function hoverLink1() {
document.getElementById("disco").src = "images/discord2.png"
document.getElementById("myTexta").innerHTML = "Click to Join The Community"
document.getElementById("ip1").style.textAlign = "left"
}
function unhoverLink1() {
document.getElementById("disco").src = "images/discord1.png"
document.getElementById("myTexta").innerHTML = "DISCORD.GG/FROSTOASE"
document.getElementById("ip1").style.textAlign = "left"
}
function copyContent() {
navigator.clipboard.writeText(document.getElementById('myText').innerHTML);
}
-
You can hide the overflow on nav.
-
You can’t because of how you are replacing DOM content. If you look at the page you are trying to copy from they have the text content on the page and transition the location of the text using margins. You basically have a box that has its overflow hidden, inside that you have both text elements. When hovered you move the text up/down. The hidden overflow will make it look like the text is appearing from the top/bottom of the box with the overflow hidden.
Just as a super quick example, the values are just quickly set to something that sort of works.
<div class="wrapper">
<p class="pull-up">First text</p>
<p>Second text</p>
</div>
body {
margin: 0;
font-family: sans-serif;
font-size: 1.2rem;
}
.wrapper {
height: 40px;
overflow: hidden;
}
.wrapper p {
transition: margin-top 1s;
}
.wrapper:hover .pull-up {
margin-top: -26px;
}
But you have a few issues with your CSS. I know it is tempting to just manually place everything using position and margins but that is not how you do layout and you won’t ever get a page that will work at different screen sizes (unless you do a bunch of spaghetti media query code).
Instead of painting yourself into a corner that will be hard to get out of, I would suggest you re-evaluate how you are doing the layout. It might take a little more learning. I would start by learning Flexbox and doing a bunch of different layouts to get better at it.
I would start by googling the following:
padding, margin, flexbox, chatgpt
Hi, how are you? I was reading some of your publications and I frequently see queries like Why this does not work, or Why this code returns an error. Of course it is very good that you consult your doubts, however on the internet there are dozens of forums where you can find answers as I often find them. Also, if there is something exciting in programming is to find the faults for ourselves 
. I also think it is important to remember that the people who are here to help us do so using their own time and will, so it is always better to ask for the answers that we cannot find anywhere else, in this way we respect the time of those who help us… Best regards
2 Likes
I did the ast one it sucked
I do do that I surf the web for 20 minutes and find no results.
Sometimes it takes longer than that, but always feel free to ask a question on here if you get stuck
Ok, do you still have this problem? I’ve had many similar issues with CSS and as the leader says, it’s taken me days to fix it. The link doesn’t work https://frostoase.netlify.app/, right?
Seeing the image of your code, you would try to put the first 3 elements (img, h2, and p) in a div. And the other 2 elements (the a elements) I would put in another div. I would then give the display: flex property to the 2 divs. And also to the div with id=“main”.
I would also give it the justify-content: center; and align-items: center; properties to the 2 internal divs you just created. If you are not familiar with these properties, visit Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.