CODEWITHSUNDEEP
csshtmltext-align
Tim Poret
Tim Poret

Reputation: 3

Align <h1> with <nav> in Html5

could you help me please to adjust that lines?

I'm just trying to align ("LOGO") with ("ITEM 1 - ITEM 2 -ITEM 3") but I can't do it well. Do you know how can modify the css file in order to do it?

Here there is my code with the snippet:

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 4px 1em;
	height: 100px;
}

	#second-nav h1 {
		font-size: 150%;
		display: inline-block;
	}
		
	#main-navigation {
		float: right;
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

Thank you!

Upvotes: 0

Views: 200

Answers (6)

Red2678
Red2678

Reputation: 3297

Browsers add styles to certain elements by default. In this case, there was margin being applied to the H1. I removed it.

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 15px 1em 4px 1em; /* Add more space to top of nav */
	height: 100px;
}

	#second-nav h1 {
		font-size: 150%;
		display: inline-block;
                margin: 0; /* Remove the margin */
	}
		
	#main-navigation {
		float: right;
                padding-top: .25em; /* pad the top to align right nav */
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

Upvotes: 0

Johannes
Johannes

Reputation: 67768

Use display: flex on #second-nav with align-items: center; and margin-left: auto; on #main-navigation:

body {
  margin: 0;
  padding: 0;
  background-color: gray;
}
main {
  margin: 0 auto;
  width: 80%;
  background-color: #FFFFFF;
}
#first-nav {
  background-color: #000;
  color: #FFF;
  padding: 6px 1em;
}
#first-nav a {
  color: #FFF;
  padding-right: 1em;
}
#second-nav {
  padding: 4px 1em;
  height: 100px;
  display: flex;
  align-items: center;
}
#second-nav h1 {
  font-size: 150%;
}
#main-navigation {
  margin-left: auto;
}
#main-navigation a {
  color: #000;
  padding-left: 1em;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <main>
    <section id="navigation">
      <nav id="first-nav">
        <a href="#">element 1</a>
        <a href="#">element 2</a>
        <a href="#">element 3</a>
      </nav>
      <section id="second-nav">
        <h1>LOGO</h1>
        <nav id="main-navigation">
          <a href="#">ITEM 1</a>
          <a href="#">ITEM 2</a>
          <a href="#">ITEM 3</a>
        </nav>
      </section>
    </section>
  </main>
</body>

</html>

Upvotes: 2

Manu Obre
Manu Obre

Reputation: 2304

You could use display:table for the section element and display:table-cell for their childs.

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 4px 1em;
	height: 100px;
display:table;
}

	#second-nav h1 {
		font-size: 150%;
		display: table-cell;
	}
		
	#main-navigation {
		display:table-cell;
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

Upvotes: 0

Qwertiy
Qwertiy

Reputation: 21400

body{
  margin: 0;
  padding: 0;
  background-color: gray;
}

main {
  margin: 0 auto;
  width: 80%;
  background-color: #FFFFFF;
}

#first-nav {
  background-color: #000;
  color: #FFF;
  padding: 6px 1em;
}

#first-nav a {
  color: #FFF;
  padding-right: 1em;
}

#second-nav {
  padding: 4px 1em;
  height: 100px;
  text-align: justify;
}

#second-nav h1 {
  font-size: 150%;
}

#second-nav h1, #second-nav nav {
  display: inline-block;
  vertical-align: middle;
}

#second-nav:after {
  content: "";
  display: inline-block;
  width: 100%;
}

#main-navigation a {
  color: #000;
  padding-left: 1em;
}
<main>
  <section id="navigation">
    <nav id="first-nav">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
      <h1>LOGO</h1>
      <nav id="main-navigation">
        <a href="#">ITEM 1</a>
        <a href="#">ITEM 2</a>
        <a href="#">ITEM 3</a>
      </nav>
    </section>
  </section>
</main>

Upvotes: 1

Rohit
Rohit

Reputation: 1812

Set margin:0 to h1. By default browsers add margin to HTML elements so you need to adjust as per your requirements.

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 4px 1em;
	height: 100px;
}

	#second-nav h1 {
		font-size: 150%;
		display: inline-block;
        margin:0;
	}
		
	#main-navigation {
		float: right;
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4472

Set margin-top:0px to h1 logo.

Upvotes: 0

Related Questions