I want to remove the padding between the icons, but having a hard time positioning at flex-start. I've tried removing padding and margins but doesn't seem to work. I want the icons to be closer together.
I want to build it using flexbox but while I can add the icons I can't seem to work with the space in between each icon.
CODEPEN: https://codepen.io/tylerisfatal/pen/bGgWpYY
.main-nav{
display: flex;
flex-direction: row;
background-color: #00008b;
}
.main-nav .main-nav-list{
display: flex;
}
.main-nav .main-nav-list img {
display: flex;
flex-direction: row;
width: 8%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<nav role="navigation" class="main-nav">
<ul class="main-nav-list">
<li>
<a href="#facebook">
<div>
<img src="img/facebook.png" alt="">
</div>
</a>
</li>
<li>
<a href="#yelp">
<div>
<img src="img/yelp.png" alt="">
</div>
</a>
</li>
<li>
<a href="#linkedin">
<div>
<img src="img/linkedin.png" alt="">
</div>
</a>
</li>
</ul>
</nav>
</body>
</html>
Your problem is that you've set the img element to be 8% of the width of its parent. That parent is not the nav bar. The result is that the image is only occupying a small area of the list item, and forcing a lot of extra space beside. You also don't need the image inside a div, or the extra flex display properties on the image. Remove all that.
In general, you should have a rule that sets images to be a maximum of 100% of their containing element width, like this:
img {
max-width: 100%;
height: auto;
}
Once you have that in place, you can just set the width on the parent element and remove the image width:
nav li {
margin-right: 0.5rem;
width: 2rem;
}
Keeps your code more logical and avoids having rules that are unnecessarily many elements deep.
You'll also want to remove the bullet points created by using the ul and li elements:
nav ul {
list-style: none;
}
Here's an example of this using your code.
Please try this:)
.main-nav{
background-color: #00008b;
}
.main-nav .main-nav-list{
display: flex;
flex-direction: row;
}
.main-nav .main-nav-list img {
width: 8%;
}
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
I designed this using adobe XD, I am trying to set up a page where I have a picture and a card side by side under a navbar, I've already set up my navbar, but I cant manage to find a helpful answer online as to how I can achieve my goal, any help would be very much appreciated, thank you.
best way to solve this case is using flexbox, here good article to learn about it
first wrap both card and image on the one div with container class
then style the card or image to make it fit like your design
for navbar you can use yours but in my case. position, z-index and inset top is necessary
.navbar {
z-index: 10000;
position: fixed;
top: 0px;
width: 100vw;
background-color: white;
}
.navbar ul {
display: flex;
justify-content: space-between;
list-style-type: none;
}
.menus {
display: flex;
margin-right: 50px;
}
.container {
display: flex;
justify-content: center;
margin-top: 70px;
gap: 20px;
}
.card {
width: 200px;
height: 200px;
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox | Ex</title>
<link rel="stylesheet" href="flexbox.css" />
</head>
<body>
<nav class="navbar">
<ul>
<li>Logo</li>
<ul class="menus">
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</ul>
</nav>
<div class="container">
<div class="card">Card</div>
<img src="http://placekitten.com/g/500/300" alt="banner" />
</div>
</body>
</html>
Theres many ways to achieve this with html/css but the most popular would be using flexBox.
The question is too vague to give a specific answer but i recommend reading up on https://web.dev/learn/css/flexbox/
Header with logo
i want to align home, etc with the logo, but i think the logo is occupying all the space on top of the menu-headers and i dont know how to reduce it, i've already tried the margin-left or right and also padding but it doesnt help.
i also want to know if it is a bad practice to have negative CSS rules or if there is any bad practices in my code so far.
sorry for the bad english, i`m not a native
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="main-header">
<div class="Logo">
<img src="photos/Logo.png.png" alt="Makeup" class="center">
</div>
<div class="social">
</div>
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
</header>
<section>
</section>
</body>
</html>
body{
background-color: #137B77;
margin: 0;
padding: 0;
}
header{
background-color: #45a29e;
margin: 0;
padding:0;
justify-content: baseline;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
margin-bottom: -124px;
margin-top: -65px;
}
.main-header{
margin-top: 0px;
margin-bottom: 62px;
}
.header-menus{
padding-top: 0;
}
.header-menus ul li {
list-style: none;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
Since div elements are block elements, they take all available horizontal space of the parent element, i.e. a complete "line".
See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
I would recommend using display: flex on the .main-header class. By default the child elements will be arranged in a row (flex-direction: row).
The align-items property can be used to arrange the elements vertically.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.main-header {
display: flex;
align-items: center;
}
Demo: https://jsfiddle.net/u3gv6s7f/
Give the logo a width of x px. That will give it a set size. You can do width=100% and make sure you style the container div as a inline-block or use flex-box in order to set its size straight.
.main-header {
display: flex;
}
img {
width: 100%;
}
That should make every element inside the header display on a row.
Look more into flex-box in order to understand it well. https://flexboxfroggy.com/ is a good resource.
You can use flexbox in main div which wraps logo and links
.main-header{
margin-top: 0px;
margin-bottom: 62px;
display: flex;
justify-content: center; //you can do also space-between or space-evenly
align-items: center;
}
I'm trying to place my logo nicely on the top left corner of the navbar. However, when I do that the brand name gets placed in a weird position.
I would appreciate it if someone could tell me how I could place the logo and brand nicely on the navbar.
This is the HTML:
<nav id="navbar">
<div className="nav-wrapper">
<Link
to={this.props.auth ? "/dashboard" : "/"}
className="left brand-logo"
>
<img src={Logo} alt="logo" className="photo" />
<div id="logo">Logo</div>
</Link>
<ul className="right">{this.renderContent()}</ul>
</div>
</nav>
And this is the css:
#navbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
#logo {
display: inline-block;
height: 100%;
padding-left: 20px;
}
.photo {
width: 64px;
height: 64px;
}
I am currently using materialize CSS for the navbar.
Just add this css line and you are good to go.
.brand-logo {
display: inline-flex !important;
}
CodesandBox:
Logo Issue
You can declare nav-wrapper as display:"flex" and use align-items:"center".
Then it should work fine.
Do let me know if this was something you were looking for.
If not we can try few more things.
#Nav_Bar {
height: 45px;
background-color: salmon;
display: flex;
align-items: center;
}
#Nav_Bar>div {
margin: 10px;
}
img {
max-height: 35px;
}
<!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>Static Template</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<nav id="Nav_Bar">
<div id="Logo_Wrapper">
<a href="https:google.com">
<img src="./Logo.JPG" />
</a>
</div>
<div>
<h2>Logo</h2>
</div>
</nav>
</body>
</html>
Use flex-box
#navbar{
display:flex;
align-items:flex-start;
justify-content:center || space-around || space-evenly;
}
This should do it, flex-box makes it effortless to create navbars.
Add margin padding where you see fit.
this is my index.html
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
display: flexbox;
flex-direction: column;
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
}
nav{
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
</div>
</header>
</body>
</html>
Now, I want them to go side by side . How?
I'm just a beginner so I can't understand much.
It would be good to get the solution with some explanation
thank you.
I was working on VS Code and using Chrome and Microsoft Edge to run the code
The issue is that the display: flex property ONLY applies to the DIRECT children of the flex container In this case you need to apply display flex- not to the header (which has only one child - but to the container that houses all the otgher parts - and then also to the ul as well to get the li's to be flexed.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
display: flex;
}
nav{
flex-grow: 1;
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
</div>
</header>
</body>
</html>
There are multiple issues with your code.
First: there is no display: flexbox -> should be display: flex
Also, you should use flex-direction: row to make it work.
But it still not enough because it has to be done on the parent element so you should add those to .logo-container instead of header.
EDIT:
The best way to understand flexbox is definitely https://flexboxfroggy.com/ -> you will get it in no time :-)
add this css
.nav-links{
display:flex;
flex-direction:row;
}
You might need to add margin yourself
I have tried explaining the areas which you could improve to obtain the desired layout. Highlighting some key pointers for better understanding the CSS flexbox behavior:
CSS flexbox behaves as the parent-child relation between items to be kept in flex, when parent element/tag is assigned display: flexit executes the flex behavior on it's direct children and not on the children of children, for that you will need to give display:flex to the child container.
The syntax for executing CSS flexbox on an element is display:flex only, other values shall not work and in some areas throw a syntax error.
The flex-direction concept works like when you need a side-by-side layout horizontally, the value that works is row and when you need a down-by-down layout vertically the value that works is column. Hope this throws a light on the concept of CSS Flexbox!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
/* display: flexbox */ /* syntactical error here display: flex; is the syntax */;
display: flex;
/* flex-direction: column */ /* in order to get a side-by-side layout value for flex-direction is row and if you want to set layout one below the other then it is column */;
flex-direction: row;
/* you could or could not give justify-content attribute as needed */
justify-content: space-between;
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
}
nav{
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!--<div class="logo-container"> -->
<!-- flexbox works nicely when given to parent and the parent contains direct children element in it's scope which needs to be flexified, introducing any other child container inside the parent to which flex is gievn will excute flex behaviour on it only and not on the sub children -->
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
</div>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
<!--</div> -->
</header>
</body>
</html>
I am terribly sorry guys . It was actually my mistake . The div element which is starting right after the header should have closed after the h4 but I accidently used it to cover the entire header due to which the problem occured .Once again I apologize for wasting your precious time. I AM REALLY SORRY.