My flex-items in the header (flex-parent) are refusing to center both vertically & horizontally. This is quite strange as I am an avid user of flex-box and I have never run into this problem before. I thought it was something to do with the absolute positioning, but even after removing this - the items are still not centered. I've tried everything and would appreciate some help please. Thank you.
EDIT: OK, so it seems the content is truly centered, and it is actually the distribution of letters in my list items that make it appear non-centered. Still very annoying though and not pleasing to the eye.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
<title>Page Title</title>
</head>
<body>
<header>
<h2>LOGO</h2>
<nav>
<ul>
<li>HOME</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="section1">
<h1>INDIGO NIGHTS</h1>
</section>
</body>
CSS:
* {
margin:0;
padding: 0;
box-sizing: border-box;
}
/* HEADER */
header {
position: absolute;
width: 100%;
color:white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top:50px;
}
nav {
display: flex;
justify-content: center;
align-items: center;
}
ul li {
display: inline;
font-family: 'Raleway', sans-serif;
list-style-type:none;
padding-left:0.9em;
padding-right:0.9em;
font-size: 0.9em;
}
/* SECTION 1 */
#section1 {
height:100vh;
background-image: url("billboard.jpg");
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size:5em;
color:white;
text-align: center;
}
#media only screen and (max-width: 795px) {
#section1 h1 {
font-size: 3.5em;
}
}
#media only screen and (max-width: 630px) {
#section1 h1 {
font-size: 3em;
}
}
Demo link
You can fix it by adding a min width to list items and aligning text to center:
ul li {
min-width: 100px;
text-align: center;
}
Or you can specify a flex-basis as 15% (will allow 100/15 = 6 menu items in one line) to the list items with setting their container widths as 100%:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 1px solid red;
}
/* HEADER */
header {
position: absolute;
width: 100%;
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 50px;
}
nav {
width: 100%;
text-align: center;
}
nav>ul {
display: flex;
justify-content: center;
width: 100%;
}
ul li {
font-family: 'Raleway', sans-serif;
list-style-type: none;
font-size: 0.9em;
flex: 0 0 15%;
text-align: center;
}
/* SECTION 1 */
#section1 {
height: 100vh;
background-image: url("billboard.jpg");
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 5em;
color: white;
text-align: center;
}
#media only screen and (max-width: 795px) {
#section1 h1 {
font-size: 3.5em;
}
}
#media only screen and (max-width: 630px) {
#section1 h1 {
font-size: 3em;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
<title>Page Title</title>
</head>
<body>
<header>
<h2>LOGO</h2>
<nav>
<ul>
<li>HOME</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="section1">
<h1>INDIGO NIGHTS</h1>
</section>
</body>
Related
I have currently added a navigation bar to a webpage I'm coding. The problem is, the links within the bar are unresponsive. I'm pretty sure it has to do with the display: flex;
in the CSS for the nav links; however, I can't get rid of it as I need the nav links to be in a straight line. This is what it currently looks like (image) . I have a navigation bar with a link in the home button but the link isn't responsive. When I take out the display: flex;, the link becomes responsive however the list ends up looking like this (image). They become stacked one atop the other. I would really appreciate it if someone could take a look at my code and point me in the right direction
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.title {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: -60px;
left: 400px;
}
.image-container {
height: 768px;
width: 768px;
border: 10px solid black;
position: relative;
top: -165px;
}
.image-container img {
width: 100%;
height: 100%;
}
.transition-image {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
transition: opacity 0.5s ease;
}
.transition-image:hover {
opacity: 1;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<h4>[Ayanfe]:)</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Next</li>
</ul>
</nav>
<h1 class="title">Example Text</h1>
<div class="image-container">
<img src="./Images/Image.jpg" alt="">
<img class="transition-image" src="./Images/Gif.gif" alt="">
</div>
</body>
</html>
Bear with me here since I'm still learning how to code fully. I'm trying to write a code that, on desktop, will display a navigational bar on the right side of the screen. When displayed on something smaller than 800px, however, I want it displayed as a column instead of a row. Whenever I try setting this up though, it only displays in a row and won't turn to a column form below 800px.
Any and all help is appreciated!
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
You need to add display:flex and flex-direction:column to your nav element to display a elements in column.
So if your div have only one child it's normal to see any changes except if you look at the main axis ( https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction )
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
So you can remove all flexbox's properties in div's media query and set navbar location using justify-content ( for the horizontal axis ) or align-items ( for vertical axis ). Make sure you have a large enough container if you want to move your navbar on the vertical axis.
If you have properties defined outside of your media queries you don't need to rewrite them. Media queries are just a sort overwriting system which depend on media. ( screen size usually )
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
justify-content:center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
}
nav{
display:flex;
flex-direction:column;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
you need to turn a tag to block from default inline
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
display:block /* added this rule */
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
I'm trying to get a navigation bar to work. I have <a> tags in <p> tags, I want the <a> tags to be taking up the entire width of the navigation bar, in a way that it is clickable in all the vertical space of that specific element.
My Code:
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
}
.navlink {
margin: auto 10px;
height: 40px;
text-align: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
But my problem is that the text inside the a tag isn't vertically centered. I can't put it down with
transform: translateY(), as that would offset the link way too low.
I am really new to both CSS and HTML, so don't judge me if I don't have the most efficient code, or not the best way of doing something.
How do I get this to center align vertically? And if my code is bad, I would appreciate it if any improvements could be suggested.
Instead of implicitly defining the height of the links, use padding to get the desired height:
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
position: relative;
}
.flexmaker {
display: flex;
}
.navlink {
padding:16px 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
align-items: center;
}
.navlink {
margin: auto 10px;
height: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
Add 'align-items: center;' to '.flexmaker'
And navlink stay clear.
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
align-items: center;
}
.navlink {
margin: auto 10px;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
update your css code to this for center align vertical.
* {
margin: 0;
padding: 0;
}
#navbar {
background-color: dodgerblue;
height: 50px;
position: relative;
}
.navlink {
margin: auto 10px;
text-align: center;
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%,-50%);
}
for both horizontal and vertical center change left to 50% and translate(-50%, -50%).
I'm just building a mini test project in an online HTML/CSS course I'm doing for beginners and I don't understand why my navbar content doesn't respond to screen width. The header border goes right through my content if you keep reducing screen width (I've left borders on so you can see that happening).
I have copied my code and the course instructor's code below so that so you guys can tell me why his works but mine doesn't. The only major difference I see is that I used anchor tags whereas he used button tags for navigation but I still don't get why that is a problem (I set my anchor tags to display:block; in case their inline display was the issue).
My code:
/*mycss.css*/
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header {
border: 1px solid hotpink;
height: 100vh;
width: 10vw;
display: flex;
flex-direction: column;
justify-content: space-around;
border-right: 1px solid #D7DBDD;
}
div#top-nav {
border: 5px solid green;
height: 25%;
width: 100%;
display: flex;
flex-direction: column;
}
ul {
border: 1px solid gold;
list-style-type: none;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
li {
border: 1px solid red;
width: 100%;
/* text-align: center; */
}
li a {
border: 1px solid blue;
display: block;
padding: 20px 0 20px 20px;
text-decoration: none;
color: #16A2D7;
font-size: font-size: 2vw;
}
li a:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<header>
<div id="top-nav">
<ul>
<li>Inbox</li>
<li>Contact</li>
<li>Accounts</li>
</ul>
</div>
<div>
<ul>
<li>Legal</li>
</ul>
</div>
</header>
</body>
</html>
Instructor's code:
/*main.css*/
html,
body,
div,
nav,
button {
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box;
}
html {
color: #16A2D7;
font-size: 2vw;
}
#sidebar {
height: 100vh;
/* arrange child elements */
display: flex;
flex-direction: column;
justify-content: space-between;
/* format */
border-right: 1px solid #D7DBDD;
width: fit-content;
/*the width*/
}
.sidebar-child {
/* arrange child elements */
display: flex;
flex-direction: column;
}
.sbc-top {
/* format */
padding-top: 2rem;
}
.sbc-btm {
padding-bottom: 2rem;
}
button {
/* format */
color: inherit;
background-color: white;
font-size: 1rem;
height: 3rem;
width: 10rem;
/*the width*/
text-align: left;
padding-left: 2rem;
cursor: pointer;
}
button:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<!--<link rel="stylesheet" href="main.css">-->
</head>
<body>
<div id="sidebar">
<nav class="sidebar-child sbc-top">
<button>Inbox</button>
<button>Contact</button>
<button>Accounts</button>
</nav>
<div class="sidebar-child sbc-btm">
<button>Legal</button>
</div>
</div>
</body>
</html>
The chief thing that is causing you issues is this rule:
header {
width: 10vw;
}
This means, no matter what, make my <header> have width equal to 10% of the width of the viewport. This doesn't account for size of the content within. Take a look at your professor's rule for the #sidebar, it uses width: fit-content which doesn't limit the size of the container.
An additional issue is that you are using:
li a {
display: block;
}
Which means the <a> are going to try and eat as much space as they. Normally, they are inline which causes them not to try to fill out width. Depending on what presentation you are trying to make, you should remove the width: 10vw; and the display: block; to start.
Could not yet find this exact issue that I am having addressed, so it here goes:
I am trying to create a nav bar with a heading on the left-hand side, and some nav items on the right. I also want the nav to be centered on the page, with a width of 960px. I am trying to accomplish 2 additional things:
1.) The nav bar should be fixed to the top so that it does not disappear when you scroll.
2.) The spacing between the heading and the nav items should be the first to disappear when you minimize the screen. Currently, the items do not flex at all.
I am able to get one of these two things accomplished at a time, but not both at the same time. Any help would be most welcome, thank you.
html {
font-family: helvetica;
font-size: 18px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.banner {
background-color: aqua;
opacity: .5;
border-radius: 10px;
position: fixed;
}
.header {
display: flex;
justify-content: space-between;
height: 4rem;
align-items: center;
width: 960px;
}
.container .banner .header h1 {
margin-left: 2.5rem;
}
.container .banner .header .nav ul {
display: flex;
width: 200px;
justify-content: space-between;
text-decoration: none;
margin-right: 2.5rem;
}
.container .banner .header .nav ul a {
color: black;
list-style-type: none;
text-decoration: none;
}
<div class="container">
<div class="banner">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</div>
You can use align-items: left for your heading and align-items: right instead of using margin
* {
padding: 0;
margin: 0;
}
html {
font-family: helvetica;
font-size: 18px;
}
.container .header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
height: 4rem;
align-items: center;
width: 100%;
position: fixed;
background: aqua;
opacity: .7;
border-radius: 10px;
}
.container .header .nav ul li {
display: inline-flex;
}
<!DOCTYPE html>
<html>
<head>
<title>My Puppy</title>
<link href="./resources/reset.css" type="text/css" rel="stylesheet">
<link href="./resources/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</body>
In your css file:
remove in .header
.header {
width: 960px;
}
add in .banner
.banner {
max-width: 960px;
width: 100%;
}