I have finally achieved making a nav bar with text aligned left with small spaces between. I think using flex items is not the best way. Please show me how to align the nav bar with spaces between on the left
<link rel="stylesheet" href="styles.css" type="text/css">
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
I assume your navbar has links so the best semantic tag for the link is <a>.
If you put <a> instead of <p> you don't need to add flexbox styling as a is an inline element.
* {
margin: 0%;
padding: 0%;
}
.container {
border: solid black 1px;
background-color: aqua;
color: blue;
padding: 12px;
}
.container a {
text-decoration: none;
margin: 0 4px;
}
<nav class="container">
<a class="item1" href="page1">Events</a>
<a class="item2" href="page2">Results</a>
<a class="item3" href="page3">Partnering Restaurants</a>
</nav>
Is this what you are looking for?
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
nav p {
padding: 0 10px;
}
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
Since nav have links, use <a> instead of <p>. So you nav markup should be something similar to this:
<nav class="container">
<a class="item1" href="#">Events</a>
<a class="item2" href="#">Results</a>
<a class="item3" href="#">Partnering Restaurants</a>
</nav>
please clear your question
but here is solution i find
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
</html>
here is css
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
padding: 10px 2%;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.container > *{
width: auto;
padding-right: 5%;
}
what i changes i maked
padding on top and bottom
no need of this
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
use this >*
here is the sample
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
I am trying to make an home page for my website and its not sticking to one page and expands to around 120% height, when I set it to 100% height. I am trying to set my h1 and p tags in the middle of the page. When i use inspect and try to shrink the width as if I was on a mobile device the footer doesn't stay at bottom:0; as written in the css but instead it moves up as if footer position was set to bottom: 20%.
html, body{
margin: 0;
padding: 0;
width: 100%;
font-family: sans-serif;
height: 100%;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container {
padding: 10% 5%;
justify-content: center;
align-content: center;
text-align: center;
height: 70%;
margin-left: auto;
margin-right: auto;
}
.headerNav {
background-color: rgb(0, 0, 0);
color: white;
font-weight: bold;
text-transform: uppercase;
z-index: 100;
max-width: 100%;
right: 0;
top: 0;
left: 0;
padding: 10px 0px;
font-size: 20px;
display: grid;
grid-template-columns: auto auto;
}
.homePG{
text-decoration: none;
text-align: left;
padding: 10px 10px;
}
.headerLogin{
text-align: right;
grid-gap: 5px;
}
footer {
position: relative;
text-align: center;
background-color: black;
color: white;
padding:10px;
font-size:15px;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Brandon's Login System</title>
<link rel="stylesheet" href="includes/header.css">
<link rel="stylesheet" href="includes/footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="headerNav">
<nav>
HOME
</nav>
<div class="headerLogin">
<form class="headerForm" action="includes/login.inc.php" method="POST">
<input type="text" name="mailuid" placeholder="Username/E-mail...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
Sign Up
</form>
</div>
</nav>
<section class="container">
<h1>HOME PAGE</h1>
<p>
Welcome to the home page.
</p>
</section>
<footer>
© 2020 Brandon Ng
</footer>
</body>
</html>
Best way for auto expansions is to use flex or grid.
Here I have wrapped them inside a <div class="main-container"></div>
Main Changes
.main-container {
display: flex;
flex-direction: column;
height: 100%;
}
section {
flex: 1;
}
<section> -> flex: 1 will auto adjust itself inside header and footer.
html, body{
margin: 0;
padding: 0;
width: 100%;
font-family: sans-serif;
height: 100%;
}
.main-container {
display: flex;
flex-direction: column;
height: 100%;
}
section {
flex: 1;
}
.container {
padding: 10% 5%;
justify-content: center;
align-content: center;
text-align: center;
height: 70%;
margin-left: auto;
margin-right: auto;
}
.headerNav {
background-color: rgb(0, 0, 0);
color: white;
font-weight: bold;
text-transform: uppercase;
z-index: 100;
max-width: 100%;
right: 0;
top: 0;
left: 0;
padding: 10px 0px;
font-size: 20px;
display: grid;
grid-template-columns: auto auto;
}
.homePG{
text-decoration: none;
text-align: left;
padding: 10px 10px;
}
.headerLogin{
text-align: right;
grid-gap: 5px;
}
footer {
position: relative;
text-align: center;
background-color: black;
color: white;
padding:10px;
font-size:15px;
bottom: 0;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<head>
<title>Brandon's Login System</title>
<link rel="stylesheet" href="includes/header.css">
<link rel="stylesheet" href="includes/footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-container">
<nav class="headerNav">
<nav>
HOME
</nav>
<div class="headerLogin">
<form class="headerForm" action="includes/login.inc.php" method="POST">
<input type="text" name="mailuid" placeholder="Username/E-mail...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
Sign Up
</form>
</nav>
</body>
<body>
<section class="container">
<h1>HOME PAGE</h1>
<p>Welcome to the home page.</p>
</section>
<footer>
© 2020 Brandon Ng
</footer>
</div>
</body>
</html>
Expand the snippet to see the change.
My first time posting and am looking for some help. I am currently taking an assessment and am stumped on the last part. I am making a picture card with an image above and a circle image to the side as well as some text next to the circle image and below this is what it looks like: https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png
this is how it needs to look:
https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
#media screen and (min-width: 600px) {
form {
display: grid;
position: relative;
width: 600px;
margin: 0 auto;
}
}
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
Any help would be awesome! Thank you!
Check out the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<div class="container1">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="container2">
<div><h4>Title goes here</h4></div>
<div><p>Secondary text</p></div>
</div>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
Here we used 2 containers, one for row and one for column elements. You can achieve this easily and more effectively with HTML tables.
Next here is the css:
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
border-radius: 25px;
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
height: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
.container1{
height: 40px;
display: flex;
flex-flow: row nowrap;
}
.container2{
display: flex;
flex-flow: column nowrap;
}
/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
/* ************These styles are junk************ */
Here I added border-radius property to the card to make its corner round. Use border-top-left-radius, border-top-right-radius with image to make its top borders round which gives card a neat look. It is important to give height n width to image, thus I added height property to avatar pic. Lastly, both container classes are set to contain rows and column without wrapping respectively, using flex-flow property. Hope it will help you. Peace.
Add a float property to the .avatar_img class
.avatar_img {
float: left;
}
Wrap title__text and secondary__text inside div,
and then wrap avatar__img and title inside flexbox div.
<div class="card-info">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="card-info-title">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
</div>
</div>
.card-info {
display: flex;
align-items: center;
}
.secondary__text > p {
margin-bottom: 0;
}
Here's CodePen link https://codepen.io/azhkuro/pen/WNrXxpd. Hope it helps you
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.
I am new to CSS and have been learning it.
I cannot seem to figure out how to make the 2 elements in the Div to perfectly vertically align with one another. I have been reading lots and lots of articles but I still cannot get my head around what I am doing wrong.
I have attached my code - your help would be great in my journey of learning.
Thank you!
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
To vertically align the contents of the boxes, you need to add align-items: center to their CSS.
Try flex-direction: column; it will make them appear on top of each other.
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
flex-direction: column;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
For your main div block, here .container1, set display attribute to block. It'll work!
.container1 {
width: auto;
display: block;
flex-direction: column;
padding: 10px;
height: auto; }