Log in form on top right corner

Hello,
How can I add css to my html code in order to have somthing like this:


This is the html code :

		<nav class="nav-header-main">
			<a class="header-logo" href="#">
				<img src="logo.png" alt="logo">
			</a>
			<ul>
				<li><a href="index.php">Home</li>
				<li><a href="#">Portfolio</li>
				<li><a href="#">About me</li>
				<li><a href="#">Contact</li>
			</ul>
			<div class="header-login">
				<form action="" method="post">
					<input type="text" name="email">
					<input type="password" name="password">
					<button type="submit" name="login">Login</button>
				</form>
				<a href="">Signup</a>
				<form action="" method="post">
					<button type="submit" name="logout">Logout</button>
					
				</form>
			</div>
		</nav>
</header>

thank you in advance for any help

Hi rab_del!

For a start, look at the source of the page you took that snapshot of. :slight_smile:

Post the css here and somebody might help you to find the rules that styles the nav bar.

1 Like

hi Erik_j,
I took this snapshot from a youtube video tutoriel so I can’t post the css code, any way the css code won’t show on source code as the html page is linked to a style.css file wich is availible for purchase on patreon as mentioned in the video

If you can’t look at the demo and get the idea how to style it, then there isn’t much to do. I can’t help when you haven’t tried anything yet and you can’t expect anyone to code it from scratch for you.

May I ask how much you know of html/css before I try to suggest anything?

hi,
I have an idea how to style this but it’s not clear in my mind although I managed to put the log in form inline and in the right corner using float: right and display: stretch but it’s still a bit ugly as the ul menu is still vertical, I am not very good in css but I think this is an opportunity to learn more complex features in css.

Could you post what you’ve got so far?

The whole working page that can be tested locally, please.

html code :

<header>
		<nav class="nav">
			<a class="logo" href="#">
				<img src="img/logo.png" alt="logo">
			</a>
			<ul>
				<li><a href="index.php">Home</li>
				<li><a href="#">Portfolio</li>
				<li><a href="#">About me</li>
				<li><a href="#">Contact</li>
			</ul>
			<div class="login">
				<form action="includes/login.inc.php" method="post">
					<input type="text" name="mailuid" placeholder="Username or Email...">
					<input type="password" name="pwd" placeholder="Password...">
					<button type="submit" name="login-submit">Login</button>
				</form>
				<a href="signup.php">Signup</a>
				<form action="includes/logout.inc.php" method="post">
					<button type="submit" name="logout-submit">Logout</button>
					
				</form>
			</div>
		</nav>


	</header>

CSS code I have tried so far:

.nav {
    background-color: white;
    color: black ;
    padding-top: 30px;
}

.logo {
float:left;
    display: inline;
}

.login {
   float: right;
   display: stretch;
  flex-flow: row wrap;
  align-items: center;
}

login input {

}

ul {

}

li {

}

I still don’t figure out what to put in ul and li and login input classes

Here’s a start :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
form,ul{margin:0;padding:0;}
.nav ul{list-style:none;}
.nav ul a{color:#999;text-decoration:none;}
.nav {
	background-color: white;
	color: black;
	padding-top: 1em;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
.login{margin-left:auto;display:flex;}
.login input,
.login a,
.login button{margin-left:10px;}
.nav ul{display:flex;text-transform:uppercase;margin:1em 0 1em 1em;}
.nav ul a{margin-left:15px;}
.login button{
	-webkit-appearance:none;
	background:#000;
	color:#fff;
	padding:5px 10px;
	border-radius:10px;
	border:none;
}
.login form{display:flex;flex-wrap:wrap;align-items:center;}
.login a{padding:5px 2px;text-decoration:none;color:#000;}
.login input{background:#eee;color:#333;border:none;padding:5px;}

</style>
</head>

<body>
<header>
  <nav class="nav"> <a class="logo" href="#"> <img src="img/logo.png" alt="logo"> </a>
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="login">
      <form action="includes/login.inc.php" method="post">
        <input type="text" name="mailuid" placeholder="Username or Email...">
        <input type="password" name="pwd" placeholder="Password...">
        <button type="submit" name="login-submit">Login</button>
      </form>
      <a href="signup.php">Signup</a>
      <form action="includes/logout.inc.php" method="post">
        <button type="submit" name="logout-submit">Logout</button>
      </form>
    </div>
  </nav>
</header>
</body>
</html>

You will have to put in media queries for smaller screen displays etc and tidy the elements up to suit.

1 Like

Thank you PaulOB, that’s exactly what I was looking for
it gives exactly the same result as the tutoriel :+1:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.