Is that the correct path to the image? That says that logo.png is in the same folder as the css file.
The path to the image would be relative to the css file not the html page (assuming you haven’t dumped everything in one folder).
I created a css folder and the logo.png file is at the root I have to put a \ to go up I think?
Here’s a quick refresher for you 
2 Likes
Good morning,
Thank you for your link I understood to indicate the path the problem is that I cannot manage to have to side my text logo the image just to side in reduced size here is what I obtain as rendered.
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 2rem 9%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
background-image: url('/logo.png');
}
.Logo {
font-size: 2.1rem;
color: #fff;
text-decoration: none;
font-weight: 700;
cursor: pointer;
}
Why don’t you place the HTML image in the .logo element rather than as a background?
In that way you can position it much easier next to your text. Or is there some special requirement?
Remember that a background image generally means it’s for decoration only but something like a logo is important content and should be an img tag in the html.
I tried like this in .logo in the css and I got no rendering
.Logo {
font-size: 2.1rem;
color: #fff;
text-decoration: none;
font-weight: 700;
background-image: url('/img/logo.png');
cursor: pointer;
}
That’s still a background image.
A background image will only show in the space of the background. If there is no content or no sizing then there is no background.
What you should be doing for the logo is to use an actual img tag in the html and not the css.
<img class="mylogo" src="img/logo.png" width="50" height="50" alt="logo">
Or whatever size it is.
Then you can move it around with css as required.
It works but is it possible to align the logo with the text with the other elements of the navbar? (home, about, price and contact)
You should be able to add align it like this:
.Logo {
font-size: 2.1rem;
color: #fff;
text-decoration: none;
font-weight: 700;
cursor: pointer;
display:flex; /* I ADDED THIS */
align-items:center; /* I ADDED THIS */
}
.Logo img{margin:0 10px;} /* I ADDED THIS */
1 Like
Good morning,
Great, it works, thank you.
Good evening,
I tried to get an additional button and I don’t get the result I would like 2 buttons next to each other aligned
html
<div id="popup3" class="popup-container">
<div class="popup-box">
<h1>Popup 3</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eius itaque molestiae sit
quidem ullam,
quis ut molestias quas dolores cum ratione, sint quibusdam iusto.</p>
<button class="close-btn">OK</button>
<form action="https://fr.w3docs.com/" method="get" target="_blank">
<button class="close-btn" type="submit">Cliquez sur moi</button>
</form>
</div>
</div>
css
form .button-area {
margin: 25px 0;
display: flex;
align-items: center;
}
.button-area button {
color: #fff;
border: none;
outline: none;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
padding: 13px 25px;
background: #f07a26;
transition: background 0.3s ease;
}
.button-area button:hover {
background: #ef6e12;
}
.button-area span {
font-size: 17px;
margin-left: 30px;
display: none;
}
The css doesn’t seem to go with the html as you have no button-area element in the html!
If you want the buttons side by side then you’ll need to wrap them in a div and use flex to align them.
e.g.
<div class="button-wrap">
<button class="close-btn">OK</button>
<form action="https://fr.w3docs.com/" method="get" target="_blank">
<button class="close-btn" type="submit">Cliquez sur moi</button>
</form>
</div>
Then you’d need this css (based on your previous css).
.button-wrap{
display:flex;
gap:20px;
}
.button-wrap > *{flex:1 0 0;}
That will end up looking liker this:
I’m not sure I understand what you are doing though and why you are submitting the form when there is no data to submit?
Thank you for your reply.
In fact I would simply like one button to close the window and the other button that when we click on it opens another window to a link.
Good morning,
To be more precise I would like that when the user clicks on log in to be directed to a page if the user name and password are correct otherwise it indicates on the same window that it is incorrect with an error message
I made a few attempts without success
Do you have an idea of some simple things to put in place?
Some things easier without JS or I could easily integrate an existing script.
index.html
<div id="popup2" class="popup-container">
<div class="popup-box">
<h1>SE CONNECTER</h1><br>
<form>
<label for="username">Nom d'utilisateur:</label>
<input type="text" name="username" placeholder="Entrer votre nom d'utilisateur">
<label for="password">Votre mot de Passe:</label>
<input type="text" name="password" placeholder="Entrer votre mot de passe ">
<div class="check">
<input type="checkbox" name="remember">
<label for="remember">Se souvenir</label>
</div>
</form>
<div class="button-wrap">
<form action="https://fr.w3docs.com/" method="get" target="_blank">
<button class="close-btn" type="submit">Se connecter</button>
</form>
<button class="close-btn">Fermer</button>
</div>
</div>
</div>
css
/* Form Login */
form {
display: flex;
flex-direction: column;
}
label {
font-size: 14px;
margin-bottom: 9px;
color: #000;
}
input[type="text"],
input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
font-size: 16px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.check {
margin-bottom: 10px;
}
.check label {
margin-top: 5px;
}
input[type="submit"] {
padding: 10px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
background-color: #ef6e12;
cursor: pointer;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
input[type="submit"]:hover {
background-color: #f07a26;
}
js
const showPopup = document.querySelectorAll(".show-popup");
const closeBtn = document.querySelectorAll(".close-btn");
showPopup.forEach(function (popup) {
popup.addEventListener("click", function () {
var modalTarget = this.getAttribute("href");
document.querySelector(modalTarget).classList.add("active");
});
});
closeBtn.forEach(function (close) {
close.addEventListener("click", function () {
this.closest(".popup-container").classList.remove("active");
});
});
That sounds like a question for the php forum (assuming that’s what you are using) as password authentication can’t be done on the front end.
It’s not really an html or css question as such. Css can handle what things look like but for something like a login you would need to communicate with the back end logic such as php or server side scripts.
A post was split to a new topic: Trying to locate text