How do I make these buttons flush with everything?

HTML & CSS
1

I am making a website, and I want the menu buttons to be flush with both the sides of the screen, and each-other. Css and HTML below the picture.

#.button {
	display: inline-block;
    padding: 1em;
    background-color: red;
    text-decoration: none;
	text-align: center;
    color: white;
	width: 30%; }


#html, body {
	margin: 0;
}

#header {
	background-color: black;
	height: 250px;
}

#header-image {
	text-align: center;
}

#header-buttons {
	margin: 0;
}

<body>
<div id="header">
	<p id="header-image">
		<br>
		<br>
		<br>
		<br>
		<img src="images/Aimee-Logo.png">
		<br>
		<br>
		<br>
		<br>
		<br>

	</p>

		<a href="Index.html" class="button hvr-fade hvr-grow-shadow" class="header-buttons">Home</a>
		<a href="services.html" class="button hvr-fade hvr-grow-shadow" class="header-buttons">Services</a>
		<a href="contact.html" class="button hvr-fade hvr-grow-shadow" class="header-buttons">Contact me</a>

</div>
</body>
2

I don’t think you meant to add the # before .button and html, did you?

3

oh, that’s there just in this post. The preview for the post make it seem like i needed that to make those styles appear like the others. it isn’t like that in the actual code.

1 Like
4

Hi there quinndelano,

here is one basic example…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html, body {
    margin: 0;
 }
ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
 }
li {
    width: 33.333%; 
 }
a {
    display: block;
    padding: 1em;
    background-color: #f00;
    text-decoration: none;
    text-align: center;
    color: #fff;
 }
</style>
</head>
<body> 
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="services.html">Services</a></li>
 <li><a href="contact.html">Contact me</a></li>
</ul>
</body>
</html>

Note

You should not use a “p element” to contain an “img element”.

coothead

5

Alright, that worked, but i am also trying to use the Hover.css pre made effects, and that seems to be messing with the width of the buttons. Is there anyway to fix this?

<html lang="en">
<head>
  <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
  <title>Aimee LeVally</title>

  <link rel="stylesheet" href="Styles.css">
  <link href="hover.css" rel="stylesheet" media="all">
  <link rel="shortcut icon" href="images/favicon.ico">

  <style>
      .hvr-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #8C2F1D;
  color: white;
}

#header {
	background-color: black;
	height: 300px;
	text-align: center;
}

html, body {
    margin: 0;
 }
ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
 }
li {
    width: 33.333%; 
 }
a {
    display: block;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background-color: #B03D24;
 }
  </style>
</head>

<body>
<div id="header">
<img src="images/Aimee-Logo.png">
	<ul>
		<li><a href="index.html" class="hvr-fade hvr-grow-shadow">Home</a></li>
		<li><a href="services.html" class="hvr-fade hvr-grow-shadow">Services</a></li>
		<li><a href="contact.html" class="hvr-fade hvr-grow-shadow">Contact me</a></li>
	</ul>
</div>
</body>
</html>

it looks like this:

6

Hi there quinndelano,

try it like this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html, body {
    margin: 0;
 }
ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
 }
li {
    width: 33.333%; 
 }
a { 
    display: block;
    padding: 1em;
    background-color: #f00;
    text-decoration: none;
    text-align: center;
    color: #fff;
    transition: 0.3s;
 }
a:hover, a:focus, a:active {
  background-color: #8c2f1d;
 }
</style>
</head>
<body> 
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="services.html">Services</a></li>
 <li><a href="contact.html">Contact me</a></li>
</ul>
</body>
</html>

coothead

2 Likes
7

It worked great! Thank you!

8

 
 
       No problem, you’re very welcome. :sunglasses:

       coothead

9

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