Log in form on top right corner


#1

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


#2

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.


#3

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


#4

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?


#5

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.


#6

Could you post what you’ve got so far?

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


#7

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


#8

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.


#9

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