Here's my code
header img{
width:10%;
vertical-align: middle;
}
header h1{
text-align: right;
display:inline;
position: absolute;
}
header {
width : 100%;
height: 1% ;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href = "css\main.css" >
<link rel="stylesheet" href="css\responsive.css">
</head>
<body>
<header>
<div class = "container-fluid">
<img src="https://pixabay.com/static/uploads/photo/2015/12/15/09/31/badge-1093966_640.png" alt="">
<h1>KUNAL MEHTA</h1>
</div>
</header>
<section>
</section>
<footer>
</footer>
<script src = "js/main.js"></script>
</body>
</html>
What i am talking about is that i want the h1 to go to right and they both should align in the center of the parent Element.i am using BOOTSTRAP so answers with bootstraps are encouraged
Well, you can always use flex for that- And I truly recommend using it, since it makes the solution much cleaner and easier to maintain. Please note I only had to change the container element for making this solution, and clean the h1 margin.
.container-fluid {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px
}
.container-fluid h1 {
margin: 0
}
header {
background: red;
}
header img{
width:10%;
}
You can read more about it here
Related
any content that I add inside a overrides the css reset and adds a 1em margin on the right side on the website (the bottom bar doesn't show but if you click with the mouse wheel you can slide it to the side).
/*Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
width: 100vw;
}
p {
margin:0;
margin-block-end: 0;
margin-block-start: 0;
}
header{
background-color: blueviolet;
}
section.sec1{
display: block;
background-image: url('assets/bg1.avif');
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
section.sec2{
background-color: cornflowerblue;
}
section.sec3{
background-color: green;
}
section.sec4{
background-color: gold;
}
<!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="style.css">
<title>html page</title>
</head>
<body>
<header>
<p>header</p>
</header>
<section class="sec1">
<p>sec1</p>
</section>
<section class="sec2">
<p>sec2</p>
</section>
<section class="sec3">
<p>sec3</p>
</section>
<section class="sec4">
<p>sec4</p>
</section>
</body>
</html>
How can i solve this issue? Thank you.
PS: the "bg1.avif" is 2158 x 1798px, but even without it you can see the problem.
You don't have to use width:100vw on html, body and section elements.
But if you want to, use 'width:100%;' instead of 'width:100vw;'
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.
I am working on a project and for some reason I cannot get the banner placed in the position I want. There is code I am looking at hat has it set how I want to be:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<header>
<h1>
<a href="index.html">
<img src="images/logo.png" alt="logo">
<!--<div>-->
They're Animals
<!--</div>-->
</a>
</h1>
</header>
</div><!--.container-->
</body>
</html>
and the CSS that works for my ideal banner is:
/* *************************************
Base
************************************* */
body {
background-color: #dfeff0;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}
header a { color: #ad235e;}
header a:hover { color: #000000;}
h1 {
color: #ad235e;
font-size: 14px;
}
h1 a:hover img { opacity: 0.7;}
/* *************************************
Modules
************************************* */
.container {
margin: 0 auto;
width: 90%;
max-width: 960px;
position: relative;
}
I have tried copying the CSS to put in my project (and the html) and it still does not work.
With actual text and more information in there it flows perfectly.
I guess something that might be more helpful is the code I have tried on my own:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
<!--<body background="images/banner.png" alt="banner" >-->
Home Page
</h1>
</header>
</div>
and my attempt at CSS:
h1
{
text-decoration:underline;
text-align:center;
}
h1 img
{
height: 40%;
width: 40%;
margin: 0px 10px;
padding: 5px;
float: left;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
I guess the simplest way to put this is I am trying to get my banner to be an appropriate size (though I can manage that by editing the width and height) to the left of my h1 without pushing everything making it seem that it is "alone".
I am not sure exactly what you want to do. But I am guessing as you are using float:left you are maybe facing problem with the class "container".
I believe you can add one line in your .container CSS and fix the problem.
overflow: auto;
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}