英文:
Unable to set the correct position and width for my site
问题
Sure, here are the translated parts of your code:
HTML Code (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Disusa</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="test.css">
</head>
<main>
<header class="header">
<div class="navbar">
<div class="search-container">
<input type="text" placeholder="Que voulez vous comparer...">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="icons-container">
<a href="#profile" class="icon-link"><i class="fa fa-user"></i></a>
<a href="#panier" class="icon-link"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<nav class="nav">
<ul>
<li><a href="#home" id="home">Accueil</a></li>
<li><a href="#allproducts" id="project">Tout les produits</a></li>
<li><a href="#settings" id="about">Paramètres</a></li>
<li><a href="#contact" id="how">Nous contacter</a></li>
</ul>
</nav>
</header>
<body>
<div class="imgs_home">
<figure class="img_home">
<img class="img3" src="./Picture/pc premonter.jpg" alt="PC Prémonter" />
<figcaption>
<h3>PC <span>Prémonter</span></h3>
</figcaption>
<a href="#pc-premonter"></a>
</figure>
<figure class="img_home img_poupout">
<img class="img1" src="./Picture/pc montage.jpg" alt="PC Custom" />
<figcaption>
<h3>PC <span>Custom</span></h3>
</figcaption>
<a href="#custom"></a>
</figure>
<figure class="img_home">
<img class="img2" src="./Picture/pc portable.jpg" alt="PC Portable" />
<figcaption>
<h3>PC <span>Portable</span></h3>
</figcaption>
<a href="#pc-protable"></a>
</figure>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
CSS Code (style.css):
/* Styles for navigation bar, icons, and search container */
.navbar {
/* ... (existing CSS) ... */
}
/* Styles for icons */
.icon-link {
/* ... (existing CSS) ... */
}
.fa-user, .fa-shopping-cart {
/* ... (existing CSS) ... */
}
.fa-shopping-cart:hover, .fa-user:hover {
/* ... (existing CSS) ... */
}
/* Styles for search container */
.search-container {
/* ... (existing CSS) ... */
}
.search-container input[type=text] {
/* ... (existing CSS) ... */
}
.search-container button {
/* ... (existing CSS) ... */
}
.fa-search {
/* ... (existing CSS) ... */
}
/* Media query for smaller screens */
@media screen and (max-width: 576px) {
.search-container {
/* ... (existing CSS) ... */
}
}
/* Styles for other elements (main_title, imgs_home, etc.) */
/* ... (existing CSS) ... */
CSS Code (test.css):
/* ... (existing CSS) ... */
JavaScript Code (main.js):
// JavaScript code is not translated as it does not contain text to be translated.
Please note that I've only translated the relevant parts of your HTML and CSS code. The JavaScript code does not contain any text to be translated.
英文:
Hello I want to put the header on the whole width of the screen and the images align but I could not, how to do ?
I have already tried to add to the header width:100%; and position: static; but nothing changes
HTML Code ( index.html ) :
<!DOCTYPE html>
<html>
<head>
<title>Disusa</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="test.css">
</head>
<main>
<header class="header">
<div class="navbar">
<div class="search-container">
<input type="text" placeholder="Que voulez vous comparer...">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="icons-container">
<a href="#profile" class="icon-link"><i class="fa fa-user"></i></a>
<a href="#panier" class="icon-link"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<nav class="nav">
<ul>
<li><a href="#home" id="home">Accueil</a></li>
<li><a href="#allproducts" id="project">Tout les produits</a></li>
<li><a href="#settings" id="about">Paramétres</a></li>
<li><a href="#contact" id="how">Nous contacter</a></li>
</ul>
</nav>
</header>
<body>
<div class="imgs_home">
<figure class="img_home">
<img class="img3" src="./Picture/pc premonter.jpg" alt="PC Premonter" />
<figcaption>
<h3>PC <span>Prémonter</span></h3>
</figcaption>
<a href="#pc-premonter"></a>
</figure>
<figure class="img_home" class="img_poupout">
<img class="img1" src="./Picture/pc montage.jpg" alt="PC Custom" />
<figcaption>
<h3>PC <span>Custom</span></h3>
</figcaption>
<a href="#custom"></a>
</figure>
<figure class="img_home">
<img class="img2" src="./Picture/pc portable.jpg" alt="PC Portable" />
<figcaption>
<h3>PC <span>Portable</span></h3>
</figcaption>
<a href="#pc-protable"></a>
</figure>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
CSS Code ( style.css ) :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #ccc;
}
/* Style de la barre de navigation */
.navbar {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background: rgb(0, 0, 0);
}
/* Style des icônes */
.icon-link {
margin-left: 10px;
margin-right: 30px;
font-size: 25px;
}
.fa-user, .fa-shopping-cart {
color: rgb(255, 255, 255); /* Rendre les icônes noir */
}
.fa-shopping-cart:hover, .fa-user:hover { /* faire changer de couleur lors de son survol */
color: rgb(214, 214, 214);
}
/* ---- barre de recherche ---- */
.search-container {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
transition: width 0.5s ease; /* transition fluide de la largeur */
width: 75% ;
}
.search-container input[type=text] {
width: 450px;
padding: 12px;
border: none;
border-radius: 10px 0px 0px 10px;
}
.search-container button {
padding: 12px;
border: none;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
.search-container button:hover{
background: rgb(214, 214, 214);
}
.fa-search {
border-radius: 20px; /* Ajouter cette propriété pour rendre l'icône de recherche arrondi */
}
@media screen and (max-width: 576px) {
.search-container {
width: 60%; /* largeur réduite pour les fenêtres plus petites */
}
}
/* ---- barre de recherche ---- */
.main_title{
text-align: center;
margin-top: 15px;
}
#welcome{
font-size: 24px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.img1{
width: 370px;
height: 208px;
width: 100%;
}
.imgs_home{
text-align: center;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.img_home {
background-color: rgb(41, 46, 57);
color: #fff;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 24px;
margin: 10px;
max-width: 370px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.img_home * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.img_home:before,
.img_home:after {
background-color: rgba(46, 52, 64, 0.5);
border-top: 50px solid rgba(46, 52, 64, 0.5);
border-bottom: 50px solid rgba(46, 52, 64, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 1;
opacity: 0;
}
.img_home:before {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.img_home:after {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.img_home img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.img_home figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.1em;
opacity: 0;
z-index: 2;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.img_home h3 {
font-size: 1em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.img_home h3 span {
display: block;
font-weight: 700;
}
.img_home a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
.img_home:hover > img {
opacity: 0.7;
}
.img_home:hover:before,
.img_home:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.img_home:hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
@media screen and (max-width: 100px) {
.img_home {
width: 50%; /* largeur réduite pour les fenêtres plus petites */
}
.search-container {
width: 40%; /* largeur réduite pour les fenêtres plus petites */
}
}
CSS Code ( test.css ) base code as scss and transform to css code :
@font-face {
font-family: "Mona Sans";
src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
font-weight: 100 1000;
}
@layer properties {
@property --after-bg-position {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --after-radial-bg-position {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --after-bg-width {
syntax: "<number>";
inherits: true;
initial-value: 100;
}
@property --after-bg-opacity {
syntax: "<number>";
inherits: true;
initial-value: 20;
}
@property --after-shadow-offset {
syntax: "<number>";
inherits: true;
initial-value: 15;
}
@property --after-scale {
syntax: "<number>";
inherits: true;
initial-value: 0.85;
}
@property --li-before-opacity {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
}
:root {
/* -- Colors: */
--body-bg-color: hsl(221deg 16% 6%);
/* -- Background */
--bg-position: 0;
/* -- misc */
--debug: 0;
--trs-easing: cubic-bezier(.41,-0.09,.55,1.09);
--trs-timing: 300ms;
--trs-delay: 80ms;
}
*,
*:before,
*:after {
box-sizing: border-box;
/* debug */
outline: calc(var(--debug) * 1px) dashed rgba(255, 0, 0, 0.5);
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: var(--body-bg-color);
display: grid;
place-items: center;
font-family: "Mona Sans", sans-serif;
}
main {
width: 100%;
max-width: 700px;
color: rgb(255, 255, 255);
}
main header {
text-align: center;
margin-bottom: 6em;
}
.nav {
transition: --after-bg-position var(--trs-timing) var(--trs-easing) 0.2s, --after-radial-bg-position var(--trs-timing) var(--trs-easing) 0.2s, --after-bg-width var(--trs-timing) var(--trs-easing) 0.2s, --after-bg-opacity var(--trs-timing) var(--trs-easing) 0.2s, --li-before-opacity var(--trs-timing) var(--trs-easing) 0.2s;
background: var(--body-bg-color);
border-radius: 100px;
position: relative;
}
.nav:before {
content: "";
display: block;
position: absolute;
width: calc(var(--after-bg-width) * 1px - 8px);
height: 100%;
background: rgb(255 255 255/calc(var(--after-shadow-offset) * 1%));
border-radius: 100px;
filter: blur(20px);
left: 0;
top: 0;
transform: translateX(calc(var(--after-bg-position) * 1px)) scale(1.1);
}
.nav ul {
position: relative;
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
height: 80px;
border-radius: 100px;
background-position: center center;
background-image: radial-gradient(ellipse 150px 100px at calc(var(--after-radial-bg-position) * 1px) bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.2) 100%);
/*
&:has(li.active:hover):after {
--after-bg-opacity: 50;
--after-shadow-offset: 10;
}
*/
/*
Some :has() goodness to control the
nav:after border-radius hihihi
*/
}
.nav ul:active {
--after-scale: 0.75 ;
}
.nav ul:before {
content: "";
display: block;
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
background: var(--body-bg-color);
top: 1px;
left: 1px;
border-radius: 100px;
}
.nav ul:after {
content: "";
display: block;
position: absolute;
z-index: 1;
width: calc(var(--after-bg-width) * 1px - 12px);
height: calc(100% - 12px);
background: linear-gradient(to bottom, rgb(255 255 255/calc(var(--after-bg-opacity, 0) / 10 * 1%)), rgba(255, 255, 255, 0.1));
box-shadow: inset 0 -6px calc(var(--after-shadow-offset, 0) * 1px) rgb(255 255 255/calc(var(--after-bg-opacity) * 1%));
left: 6px;
top: 6px;
transform: translate(calc(var(--after-bg-position) * 1px), 0);
border-radius: 100px 12px 12px 100px;
transition: --after-bg-opacity var(--trs-timing) var(--trs-easing) var(--trs-delay), --after-shadow-offset var(--trs-timing) var(--trs-easing) var(--trs-delay), border-radius var(--trs-timing) var(--trs-easing) var(--trs-delay);
pointer-events: none;
}
.nav ul li {
padding: 1em;
height: 100%;
width: 100%;
position: relative;
transform-style: preserve-3d;
perspective: 800px;
}
.nav ul li:not(.active):hover {
--li-before-opacity: 0.3;
}
.nav ul li:before {
content: "";
display: block;
position: absolute;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 8px;
pointer-events: none;
user-select: none;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35));
opacity: var(--li-before-opacity);
transform: scale(var(--after-scale)) rotateY(calc(var(--tilt-bg-y) * 3 * -1deg)) rotateX(calc(var(--tilt-bg-x) * 3 * 1deg)) translateZ(15px);
transition: --li-before-opacity var(--trs-timing) var(--trs-easing), --after-scale calc(var(--trs-timing) / 2) var(--trs-easing) calc(var(--trs-delay) / 2);
}
.nav ul li:first-of-type:before {
border-radius: 100px 12px 12px 100px;
}
.nav ul li:last-of-type:before {
border-radius: 12px 100px 100px 12px;
}
.nav ul li a {
display: block;
color: inherit;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
z-index: 10;
}
.nav ul:has(li.active:first-of-type a):after {
border-radius: 100px 12px 12px 100px;
}
.nav ul:has(li.active:last-of-type a):after {
border-radius: 12px 100px 100px 12px;
}
.nav ul:has(li.active:nth-child(n+2):nth-child(-n+3) a):after {
border-radius: 100px;
}
JavaScript Code ( main.js ) :
var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
snippet.forEach(function (snippet) {
snippet.addEventListener('mouseout', function (event) {
if (event.target.parentNode.tagName === 'figure') {
event.target.parentNode.classList.remove('hover')
} else {
event.target.parentNode.classList.remove('hover')
}
});
});
}
function inverseMousePosition(element, event) {
const rect = element.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const res = {
x1: -(x - rect.width / 2) / 20, // top left
y1: -(y - rect.height / 2) / 20,
x2: -(x - rect.width / 2) / 20, // top right
y2: (y - rect.height / 2) / 20,
x3: (x - rect.width / 2) / 20, // bottom left
y3: -(y - rect.height / 2) / 20,
x4: (x - rect.width / 2) / 20, // bottom right
y4: (y - rect.height / 2) / 20
};
const resKey =
"x" + (x < rect.width / 2 ? 1 : 2) + (y < rect.height / 2 ? 1 : 3);
const tilt = res;
return tilt !== undefined ? tilt : 0; // default to 0 if undefined
}
Thanks in advance...
答案1
得分: 1
你可能在寻找类似这样的内容：
#header
{
width:100%;
height:20%; // 所需的高度
position:absolute;
top:0;
left:0;
background-color:blue;
}
我认为 position:absolute 是你所寻找的。参考链接：
https://stackoverflow.com/questions/22551730/how-to-change-header-and-footer-to-full-width
英文:
You may be looking for something like this:
#header
{
width:100%;
height:20%; // the desired height
position:absolute;
top:0;
left:0;
background-color:blue;
}
I believe position:absolute is what you're looking for. See:
https://stackoverflow.com/questions/22551730/how-to-change-header-and-footer-to-full-width
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论