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>
Related
This question already has answers here:
Why doesn't "margin: auto" center an element vertically?
(5 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I want to center the text of my anchors (both horizontally and vertically) within their li container.
I've read that I can trivially center them orizzontally by using text-align: center; on the container.
But to center them vertically I would need to display li as a table and a as a table cell.
I didn't like this method so I put the text of the anchor into a div and tried to center the div with margin: auto;. For some reason this works only horizontally, even though the div is a block element with a defined height. Anyone knows the reason why?
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><div>Menu</div></li>
<li><div>News</div></li>
<li><div>About</div>
<li><div>Contact</div></li>
</ul>
</nav>
</header>
</body>
</html>
You can use a flexbox again - like you did with the ul!
Display .nav ul li a as a flexbox, then use align-items: center;, to vertically center your link.
Your fixed code:
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: flex;
align-items:center;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><div>Menu</div></li>
<li><div>News</div></li>
<li><div>About</div>
<li><div>Contact</div></li>
</ul>
</nav>
</header>
</body>
</html>
Another option is to remove the absolute height and width of the links and use padding instead.
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
color: goldenrod;
padding: .75em 2em;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><div>Menu</div></li>
<li><div>News</div></li>
<li><div>About</div>
<li><div>Contact</div></li>
</ul>
</nav>
</header>
</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%).
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 4 years ago.
I'm trying to create a footer using CSS flex, with the following conditions :
3 elements (links)
the first 2 must be at the left of the screen
the last one must be perfectly centered
Live snippet
* {
box-sizing: border-box;
text-decoration: none;
}
html, body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
width: 100%;
height: 100%;
display: flex;
flex: 1;
}
footer {
background: black;
}
a {
color: inherit;
}
ul {
margin: 0;
display: flex;
height: 66px;
list-style: none;
align-items: center;
justify-content: center;
}
li {
flex: 1;
color: white;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
li div {
padding: 1em;
}
li.centered {
justify-content: center;
}
li.centered div {
background: lightgrey;
color: black;
height: 100%;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<main></main>
<footer>
<ul>
<li>
<div>
First
</div>
<div>
Second, large, full of text element
</div>
</li>
<li class="centered">
<div>
Centered element
</div>
</li>
<li></li>
</ul>
</footer>
</body>
</html>
This is working fine, but I dislike the last empty li element (use to add a 3rd columns).
Does anyone have a solution for this, without an empty element in dom ?
This is working fine, but I dislike the last empty li element (use to add a 3rd columns).
Does anyone have a solution for this, without an empty element in dom ?
You can easily replace it with a pseudo element (ul:after) - you just need to make sure that you apply the style you have for li for that one as well then.
* {
box-sizing: border-box;
text-decoration: none;
}
html, body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
background: black;
}
a {
color: inherit;
}
ul {
margin: 0;
display: flex;
height: 66px;
list-style: none;
align-items: center;
justify-content: center;
}
/* pseudo element to replace empty LI at the end */
ul:after {
content: ""; /* content property needs to be set, otherwise pseudo element is not rendered at all */
}
/* apply general LI formatting for pseudo element as well */
li, ul:after {
flex: 1;
color: white;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
li div {
padding: 1em;
}
li.centered {
justify-content: center;
}
li.centered div {
background: lightgrey;
color: black;
height: 100%;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
<footer>
<ul>
<li>
<div>
First
</div>
<div>
Second, large, full of text element
</div>
</li>
<li class="centered">
<div>
Centered element
</div>
</li>
</ul>
</footer>
You can achieve that by using:
li.centered div {
position: relative;
left: 0;
right: 0;
transform: translateX(-50%);
}
I am aware that is not the most modern solution and I didn't use the flexbox but you don't need to create empty elements in this way.
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.
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>