英文:
Element misaligns on small width
问题
我的网站上的一个元素在整体宽度足够小时会出现错位,逐渐在宽度较小的情况下偏离所需位置。这个元素是Discord按钮,一个带有#dcicon
id的div。意图是,一旦点击按钮,它会改变形态,显示一个Discord用户标签。整个元素的宽度用vw描述,所以我认为这不应该是问题。到目前为止,我尝试过:
- 将子元素设置为inline-block;
- 在一个position: relative的div容器内绝对居中元素(当前站点的状态);
- 移除flex属性;
- 更改字体。
另外,其他按钮似乎无法调整它们的宽度和高度参数,最终导致溢出其容器(div.footerblock(2)
),这也是一个问题。
请参考下面的代码片段。
这是原始链接。
PS 如果可能的话,请告诉我CSS代码是否符合美观标准,我可以做出哪些改正。谢谢!
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<footer>
<div class="footerblock">
<p class="english">
© 2023 Jakub Namyślak. All rights reserved.
</p>
<p class="polish">
© 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
</p>
</div>
<div class="footerblock">
<a href="mailto:kawkayt7@gmail.com" target="_blank">
<img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
</a>
<div class="discordicon" id="dcicon" onclick="discordAnim()">
<img id="footerimagediscord" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
<p>soup can#7318</p>
</div>
<a href="https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q" target="_blank">
<img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
</a>
<a href="https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w" target="_blank">
<img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
</a>
<a href="https://steamcommunity.com/id/wechanged" target="_blank">
<img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
</a>
<a href="https://github.com/jakubekgranie/projecthub.github.io" target="_blank">
<img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
</a>
</div>
</footer>
</body>
</html>
英文:
An element on my site misaligns once the overall width is small enough, it gets under the desired, gradually further the smaller the width. The element it the Discord button, a div with #dcicon
id. The intention is, that once the button is clicked, it changes its form, revealing a discord user tag. The whole thing has width described in vw, so I don't think that is or should be the problem. So far, I had tried:
- making the child elements inline-block;
- Absolutely centering the element inside a position: relative div container (current site's state);
- Removing the flex property;
- Changing fonts.
Also, other buttons seem to not regulate their width and height parameters, eventually resulting in overflowing from their container (div.footerblock(2)
), which is a problem too .
Refer to the snippet below.
Here is the original.
PS If possible, please, tell me if the CSS code is esthetical and what I can correct. Thank you!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function discordAnim()
{
if(document.getElementById('dcicon').classList.contains('discordicontransformed') == false)
{
document.getElementById('footerimagediscord').classList.add('invert');
document.getElementById('dcolor').classList.remove('colora');
document.getElementById('dcolor').classList.add('colorb');
document.getElementById('dcicon').classList.remove('discordicon');
document.getElementById('dcicon').classList.add('discordicontransformed');
}
else
{
document.getElementById('footerimagediscord').classList.remove('invert');
document.getElementById('dcolor').classList.remove('colorb');
document.getElementById('dcolor').classList.add('colora');
document.getElementById('dcicon').classList.add('discordicon');
document.getElementById('dcicon').classList.remove('discordicontransformed');
}
}
<!-- language: lang-css -->
footer {
display: flex;
width: 100%;
min-height: 3vw;
background-color: antiquewhite;
}
div.footerblock:nth-of-type(1) {
justify-content: left;
}
div.footerblock:nth-of-type(2) {
justify-content: right;
}
div.footerblock {
min-height: inherit;
}
*[class*="footer"] {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
border-left: 0.1vw
}
div.footerblock:last-child {
margin-right: 3vw;
}
a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
display: contents;
text-decoration: none;
color: #4C00FF;
}
#dcicon {
cursor: pointer;
}
div.footerblock:nth-of-type(2) div.discordicon {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
}
div#dcolor {
width: 1.75vw;
height: 1.75vw;
border-radius: 50%;
}
.imagery1:hover,
main div.contents a,
*[class*="marker"],
*[class*="footerimage_"],
*[class*="footerimage_"]:hover,
#banner p a,
#banner p a:hover,
div.england,
div.poland,
div.england:hover,
div.poland:hover,
div.colora,
div.colora:hover {
transition-duration: 0.15s;
transition-timing-function: ease-out;
}
div.footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
border-radius: 50%;
}
div.footerblock:nth-of-type(2) div.discordicon img {
margin-right: 0;
}
div.discordicon p {
display: none;
}
div.footerblock p {
margin: 0;
margin-left: 6vw;
font-family: monospace;
font-size: 0.75vw;
}
div.discordicontransformed {
display: flex;
justify-content: left;
align-items: center;
width: initial;
height: 1.75vw;
background-image: url('https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png');
background-size: 100% 100%;
padding: 0.25vw;
margin-right: 1.75vw;
border-radius: 5vw;
}
div.colorb {
width: 1.725vw !important;
width: 1.725vw !important;
}
div.discordicontransformed img {
width: 1.725vw;
height: 1.725vw;
margin-right: 0;
border-radius: 50%;
}
.invert {
filter: invert(1);
}
div.footerblock:nth-of-type(2) div.discordicontransformed p {
display: block;
font-family: monospace;
font-size: 0.75vw;
color: white;
margin: 0 0.4vw;
}
<!-- language: lang-html -->
<html>
<head>
<meta charset="UFT-8">
</head>
<body>
<footer>
<div class="footerblock">
<p class="english">
© 2023 Jakub Namyślak. All rights reserved.
</p>
<p class="polish">
© 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
</p>
</div>
<div class="footerblock">
<a href="mailto:kawkayt7@gmail.com" target="_blank">
<img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
</a>
<div class="discordicon" id="dcicon" onclick="discordAnim()">
<img id="footerimagediscord" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
<p>soup can#7318</p>
</div>
<a href="https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q" target="_blank">
<img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
</a>
<a href="https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w" target="_blank">
<img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
</a>
<a href="https://steamcommunity.com/id/wechanged" target="_blank">
<img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
</a>
<a href="https://github.com/jakubekgranie/projecthub.github.io" target="_blank">
<img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
</a>
</div>
</footer>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
我在这里进行了很多我认为相当直观的更改。基本上,努力通过简化的目标来做一些事情:
-
不要过度应用样式。您的星号选择器存在问题,因为它们涵盖的元素比它们应该的要多。
-
努力使您的CSS可重用。这意味着避免使用超特定的选择器,如
:nth-child(2)
和 IDs。改为使用自定义类。 -
对于JavaScript中选择超过一次的元素,请创建变量。
function discordAnim() {
const footerimagediscord = document.getElementById('footerimagediscord');
const dcolor = document.getElementById('dcolor');
const dcicon = document.getElementById('dcicon');
if (!dcicon.classList.contains('discordicontransformed')) {
footerimagediscord.classList.add('invert');
dcolor.classList.remove('colora');
dcolor.classList.add('colorb');
dcicon.classList.remove('discordicon');
dcicon.classList.add('discordicontransformed');
} else {
footerimagediscord.classList.remove('invert');
dcolor.classList.remove('colorb');
dcolor.classList.add('colora');
dcicon.classList.add('discordicon');
dcicon.classList.remove('discordicontransformed');
}
}
/* ... */
.discordicon-btn {
border: 0;
background: 0;
padding: 0;
display: flex;
}
/* ... */
<!-- ... -->
<body>
<footer>
<div class="footerblock justify-left">
<p class="english">
© 2023 Jakub Namyślak. All rights reserved.
</p>
<p class="polish">
© 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
</p>
</div>
<div class="footerblock justify-right">
<!-- ... -->
<button class="discordicon-btn" id="dcicon" onclick="discordAnim()">
<img id="footerimagediscord" class="discordicon" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
</button>
<!-- ... -->
</div>
</footer>
</body>
<!-- ... -->
英文:
I made a lot of changes here which I think are fairly intuitive. Basically, strive to do a few things with the goal of simplification:
-
Don't over-apply styles. Your asterisk selectors are problematic because they cover more elements than they should.
-
Strive to make your CSS reusable. This means avoiding hyper-specific selectors like
:nth-child(2)
and IDs. Use custom classes instead. -
Use a button for action elements, not divs.
-
Create variables for elements which you select more than once in your JavaScript.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function discordAnim() {
const footerimagediscord = document.getElementById('footerimagediscord');
const dcolor = document.getElementById('dcolor');
const dcicon = document.getElementById('dcicon');
if (!document.getElementById('dcicon').classList.contains('discordicontransformed')) {
footerimagediscord.classList.add('invert');
dcolor.classList.remove('colora');
dcolor.classList.add('colorb');
dcicon.classList.remove('discordicon');
dcicon.classList.add('discordicontransformed');
} else {
footerimagediscord.classList.remove('invert');
dcolor.classList.remove('colorb');
dcolor.classList.add('colora');
dcicon.classList.add('discordicon');
dcicon.classList.remove('discordicontransformed');
}
}
<!-- language: lang-css -->
footer {
display: flex;
width: 100%;
min-height: 3vw;
background-color: antiquewhite;
}
.justify-left {
justify-content: left;
}
.justify-right {
justify-content: right;
}
.footerblock {
min-height: inherit;
display: flex;
align-items: center;
}
.footerblock:last-child {
margin-left: auto;
margin-right: 3vw;
}
a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
display: contents;
text-decoration: none;
color: #4C00FF;
}
.discordicon-btn {
border: 0;
background: 0;
padding: 0;
display: flex;
}
.footerblock:nth-of-type(2) .discordicon {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
}
#dcolor {
width: 1.75vw;
height: 1.75vw;
border-radius: 50%;
}
.imagery1:hover,
main div.contents a,
*[class*="marker"],
*[class*="footerimage_"],
*[class*="footerimage_"]:hover,
#banner p a,
#banner p a:hover,
div.england,
div.poland,
div.england:hover,
div.poland:hover,
div.colora,
div.colora:hover {
transition-duration: 0.15s;
transition-timing-function: ease-out;
}
.footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
border-radius: 50%;
}
.footerblock:nth-of-type(2) div.discordicon img {
margin-right: 0;
}
.discordicon p {
display: none;
}
.footerblock p {
margin: 0;
margin-left: 6vw;
font-family: monospace;
font-size: 0.75vw;
}
.discordicontransformed {
display: flex;
justify-content: left;
align-items: center;
width: initial;
height: 1.75vw;
background-image: url('https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png');
background-size: 100% 100%;
padding: 0.25vw;
margin-right: 1.75vw;
border-radius: 5vw;
}
.colorb {
width: 1.725vw !important;
width: 1.725vw !important;
}
.discordicontransformed img {
width: 1.725vw;
height: 1.725vw;
margin-right: 0;
border-radius: 50%;
}
.invert {
filter: invert(1);
}
.footerblock:nth-of-type(2) div.discordicontransformed p {
display: block;
font-family: monospace;
font-size: 0.75vw;
color: white;
margin: 0 0.4vw;
}
<!-- language: lang-html -->
<body>
<footer>
<div class="footerblock justify-left">
<p class="english">
© 2023 Jakub Namyślak. All rights reserved.
</p>
<p class="polish">
© 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
</p>
</div>
<div class="footerblock justify-right">
<a href="mailto:kawkayt7@gmail.com" target="_blank">
<img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
</a>
<button class="discordicon-btn" id="dcicon" onclick="discordAnim()">
<img id="footerimagediscord" class="discordicon" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
</button>
<a href="https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q" target="_blank">
<img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
</a>
<a href="https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w" target="_blank">
<img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
</a>
<a href="https://steamcommunity.com/id/wechanged" target="_blank">
<img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
</a>
<a href="https://github.com/jakubekgranie/projecthub.github.io" target="_blank">
<img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
</a>
</div>
</footer>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论