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%;
}
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.
Hi I have simple question with example. How can I achieve automatic shrinking image inside my flexbox when height is not enought for the image?
I have to do full screen app as in my example where image should fill as most place as it possible with image original aspect ration. When the space is not enought (Height is going to be smaller) Image should start shrinking IN HIS HEIGHT.
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<style>
body,
html {
height: 100%;
}
.cust-container {
border: 4px solid red;
max-height: 800px;
height: 100%;
width: 100%;
}
.cust-container img {
max-height: 100%;
width: auto;
max-width: 100%;
}
.img-container {
border: 4px solid green;
}
.left {
background-color: yellow;
}
</style>
<title>Static Template</title>
</head>
<body>
<div class="cust-container">
<div class="d-flex h-100">
<div class="w-50 left"></div>
<div class="right d-flex flex-column">
<div class="img-container flex-grow-1">
<img
src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
alt=""
/>
</div>
<button class="btn btn-success">
hello
</button>
</div>
</div>
</div>
</body>
</html>
My code:
https://codesandbox.io/s/keen-tdd-952kv?file=/index.html
Explicitly setting the overflow property of the flex child solves this issue.
In your example, setting the overflow property of the .img-container element is what's needed.
While setting that element's max-height to 100vh would work for this isolated example, it almost certainly wouldn't be a workable solution if there were any other content on the page.
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<style>
body,
html {
height: 100%;
}
.cust-container {
border: 4px solid red;
max-height: 800px;
height: 100%;
width: 100%;
}
.cust-container img {
max-height: 100%;
width: auto;
max-width: 100%;
}
.img-container {
border: 4px solid green;
overflow: hidden; /* <-- */
}
.left {
background-color: yellow;
}
</style>
<title>Static Template</title>
</head>
<body>
<div class="cust-container">
<div class="d-flex h-100">
<div class="w-50 left"></div>
<div class="right d-flex flex-column">
<div class="img-container flex-grow-1">
<img
src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
alt=""
/>
</div>
<button class="btn btn-success">
hello
</button>
</div>
</div>
</div>
</body>
</html>
If you use view height (vh) instead of % it should work I think.
.cust-container img {
max-height: 100vh;
width: auto;
max-width: 100%;
}
Hello I would like to have a row (in blue) in a col-lg-4 div (in red) in another row (in yellow), like this:
Here is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid" style="height: 400px;background-color: yellow">
<div class="row">
<div class="col-lg-4 col-lg-offset-1" style="background-color: red;">
<div class="row" style="padding-top:20%;padding-bottom: 20%;background-color: blue;">
dddd
</div>
</div>
</div>
</div>
</body>
</html>
with this css:
.navbar {
margin-bottom: 0 !important;
background-color: white;
}
.row1 {
background: url("appart.jpg");
background-size: 100% 400px;
background-repeat: no-repeat;
}
[class*="col-"], footer {
background-color: lightgreen;
opacity: 0.5;
line-height: 400px;
text-align: center;
}
But I get this:
Despite that the colors get mixed up (if you have a solution to prevent this also It would be cool) I can't have the result that I am looking for...
much thanks
I have posted the jsfiddle code with the solution
In your css remove the class attribute rule [class*="col-"].Try targeting the rules to the specific elements using css. You are converting all the columns to have a line-height of 400px that's why your final html looks like that. And Don't use inline styles
If you remove the [class*="col-"] and add the following in the css file you will get the desired result
.container-fluid > .row, .col-lg-4.col-lg-offset-1 {
height: 100%;
}
.col-lg-4.col-lg-offset-1 > .row {
top: 50%;
transform: translateY(-50%);
position: relative;
text-align: center;
}
Fiddle demo
https://jsfiddle.net/karthick6891/4js3r3hd/
I have an HTML page where I have a div called container, I'm trying to use bootstrap here. Inside the container, I have a div called row. When I try to apply a background color to the div the color is applied only to the div content and spans only the width and not the height. I'm trying to apply the background to the hellow world to cover the whole page.
Here is the code.
.container {
padding: 10px;
}
.row {
background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/homePage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"> Hello World! </div>
</div>
</body>
</html>
Try this:
1st: The html element has a default margin that you have to deal with every time you write a page.
2nd:You may not want use jsfiddle to test code when using bootstrap css (or any other library for that sake). As the JSFiddle code is run before the bootstrap code.
3rd: Try this:
body,html{
margin:0;
width:100%;
}
html{
background-color: gray;
}
.container {
padding: 1em;
max-width:750px;
min-height:100vh;
width:90%;
margin: auto;
box-sizing:border-box;
background-color:aquamarine;
}
.row {
margin:0;
padding-left:20px;
}
<html>
<body>
<div class="container">
<div class="row"> Hello World! </div>
<div class="row"> Hello , I am World! </div>
</div>
</body>
</html>
Just apply it to the body.
body{
background-color: red;
}
Maybe this is what you need.
.container {
margin-left:-20px;
padding-left:30px;
margin-right:-20px;
background-color: darkgray;
}
.row {
background-color: darkgray;
}
body{
background-color: red;
}
<div class="container">
<div class="row"> Hello World! </div>
</div>
You can make the container to cover from top to bottom and set the gaps that you need left and right:
.container {
position: absolute;
top: 0px;
left: 10px; /* Gap left */
right: 10px; /* Gap right */
bottom: 0px;
background-color: black;
}
May this one you need:
html,body {
padding: 0;
margin: 0;
background-color: red;
}
.row {
background-color: darkgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row"> Hello World! </div>
</div>
</body>
Seems nice to me:
html {
background-color: darkgray
}
.row {
background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/homePage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">Hello World! Here goes some content</div>
</div>
</body>
</html>
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