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/
Related
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.
In my HTML page, I have some social media icons at the top of the page, and a logo that's supposed to be in the middle. But, after I added the icons, they're pushing the logo to the side a bit.
Here's an image of what's happening
The question mark symbol is supposed to be in the middle of the entire page (directly in between the "updates" and "archive" in the nav bar), but it's being pushed off. Is there a way I can make the logo in the center of the entire page?
In my HTML I have:
<img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
<img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
<div class="center">
<img src="https://imgur.com/hQRzG5G.png" id="headerlg">
</div>
Then in my styles.css I have:
.center {
text-align: center;
}
#headerlg {
padding-top: 35px;
padding-bottom: 9px;
width: 80px;
position: relative;
}
.sns-icon {
width: 30px;
float: left;
margin-top: 13px;
margin-left: 13px;
padding: 1px;
}
I've also tried justify-content: center and margin: auto both of which didn't work
your source code didn't work for me, but here I write some code like yours, I solve your problem with flex box and add some visual style, I hope it's make sense to you.
.container {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container>div {
width: 33%;
height: 20px;
background-color: rgb(216, 216, 216, 0.4);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML & CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social-media">
<span>instagram</span>
<span>twitter</span>
</div>
<div class="logo">
icon logo
</div>
<div class="put-nothing">
</div>
</div>
</body>
</html>
I just created 3 div 1 of them contain social media ,another contain logo , and last one left empty. all of them have same width in all device (mobile, tablet, laptop).
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.
Cannot make the logo and text appear in a row on header tag of webpage by applying flex in CSS. My code is along with this post and also attached output on web browser (Chrome) at the end..
Is this problem caused by a mistake in below code. New to webdesign, can anyone find what's wrong with my code. I want to apply flex on <header> tag so that img and <nav> content will be in a row. But that's not happening. See the webpage screenshot at the post end.
.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
background-color: #63BC7D;
min-height: 100px;
display: flex;
}
main {
/*background-color: #179E3F; */
min-height: 300px;
display: flex;
align-items: center;
/*justify-content: space-between;*/
}
.cards {
background-color: #AC1149;
min-height: 300px;
display: flex;
justify-content: space-between;
}
.card1 {
background-color: #6EB806;
min-height: 300px;
width: 30%;
}
.card2 {
background-color: #36E059;
min-height: 300px;
width: 30%;
}
.card3 {
background-color: #00FF09;
min-height: 300px;
width: 30%;
}
.herobox1 {
flex: 2;
/*background-color: #8D4E85;*/
}
.herobox2 {
/*background-color: #684F96;*/
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bike Repair Shop</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="cssReset.css">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="https://via.placeholder.com/140x100" alt="Website Logo">
</div>
<nav>
Book
Online
About
Contact
</nav>
</header>
<main>
<div class="herobox1">
<h1>Mobile bike repairs </h1>
<p>Many people have difficulty getting their bikes to a bike shop. We call to your office or home anywhere in greater Dublin.</p>
<p>Fast, convenient bike servicing with up-front pricing. All without the hassle of taking your bike into a shop. </p>
</div>
<div class="herobox2">
<img src="https://via.placeholder.com/140x100" alt="Person servicing bike in Dublin">
</div>
</main>
<div class="cards">
<div class="card1"></div>
<div class="card2"></div>
<div class="card3"></div>
</div>
</div>
</body>
</html>
Wrapping a div around the texts and adding a padding-top seems to resolve it.
<nav>
<div style="padding-top: 18%;">
Book
Online
About
Contact
</div>
</nav>
https://jsfiddle.net/sLmj568x/
header{ flex-direction: column; }
Add this code to your CSS code.
Yes, finally with the help from this forum I understand my mistake. As you people said cssreset caused the trouble. I need to first cssReset.css and then my custom styles.css to get the correct effect. Otherwise the effect made using styles.css is overriden by cssReset.css A simple mistakes. Thanks everyone.
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 2 years ago.
This is what I want:
https://i.stack.imgur.com/WTTMA.png
This is what I have:
https://i.stack.imgur.com/V7X6m.png
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic">Content</li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
CSS
.ul{
display: table;
margin: 0 auto;
list-style: none;
}
.li{
font-weight: bold;
font-size: 50px;
}
img{
width: 200px;
}
I've tried vertical align middle but it didn't do anything then I tried to center it with margins but it
didn't work out as I wanted and I also tried flex and absolute position.
Using a flexbox would be a better solution. Prerequisite is to put "content" inside a separate HTML element. In this case I used a span.
.ul {
/* display: table; */
margin: 0 auto;
list-style: none;
}
.li {
font-weight: bold;
font-size: 50px;
display: flex; /* Added */
align-items: center; /* Added */
}
img {
width: 200px;
}
<header>
</header>
<main>
<ul class="ul">
<li class="li">
<img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg" alt="pic">
<span>Content</span></li>
</ul>
</main>
<footer>
</footer>
Try using flex box
.li{
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
}
Use vertical-align: middle:
.selector {
vertical-align: middle
}
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
First of all I would like to welcome you to the Stackoverflow Community.
You can achieve the required result by using flexbox in your CSS. I am putting the same HTML over here, just putting that "content" inside a span.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic"><span>Content</span></li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
Add display:flex; and align-items: center; to your .li selector as shown below.
.ul{
display: table;
margin: 0 auto;
list-style: none;
}
.li{
font-weight: bold;
font-size: 50px;
display:flex;
align-items: center;
}
img{
width: 200px;
}
Hoping that my answer is helpful to you.