I am newbie with CSS; so, I do not want to use CSS frameworks.
After reading some questions about fixed header and footer with CSS (on StackOverflow), I tried to create a HTML layout, as this:
In this layout, both header and menu are fixed.
I have created an HTML file with 2 column: left for menu, right for content. But, it comes with an scrolled-menu:
#menu {
width: 33%;
height: 100%;
float: left;
}
#page {
width: 66%;
height: 100%;
float: left;
}
#header {
width: 100%;
height: 100px;
position: fixed;
}
#content {
width: 100%;
position: absolute;
top: 100px;
}
#footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
<div id="menu">
MENU
</div>
<div id="page">
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
</div>
When I add this line: position: fixed; in #menu, the layout will be broken. Could help help me to fix it?
Currently you could use the Tag directly as <header> <body> <footer> you need to establish position : block. I would like to recommend that you uses a Framework like Bootstrap, today is commonly uses for design webpages, if you are new un webpages it Will be useful for you
http://getbootstrap.com/
<!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">
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.header{
min-height: 90px;
}
.footer{
min-height: 60px;
}
.header, .footer{
background: #2f2f2f;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sidebar"></div>
</div>
<div class="col-sm-9">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
Related
Code sandbox:
https://codesandbox.io/s/polished-browser-d5qrr?file=/index.html:0-1902&fbclid=IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH-4UB8QIbPdb_hZKL1G0
How to fill image to 100% height of the parent div? Ratio width: height should stay the same.
Here is a possible solution for your question I hope it can help
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<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>
html,
body {
height: 100%;
}
.custom-container {
position: relative;
max-width: 800px;
max-height: 400px;
width: 70%;
height: 60%;
border: 2px solid red;
}
.mid {
border: 2px solid green;
}
.flex-grow-1 {
position: relative;
min-height: 100px;
max-height: 100%;
}
.img-container {
position: relative;
height: 100%;
}
.flex-grow-1,
.img-container,
img {
width: 100%;
max-height: 300px;
object-fit: cover;
}
div>img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1">
<div class="img-container">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1"
alt="img" />
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
You want the img to fill the height of its container which has class .img-container.
At the moment you have set the width and height of the img element to 100px. This gives a small image and one that may be distorted if the original is not square.
To make the image fill the full height but keep its original aspect ratio replace the .img-container img CSS settings with:
.img-container img {
height: 100%;
width: auto;
}
This may not be what you want if some of your images are more landscape than portrait for example. Depending on the image aspect ratios compared to the container's you may get the image cut off at the sides.
If you want to ensure that you always show exactly the whole image then investigate object-fit: contain This may give you white space either top and bottom or at the sides if the ratios don't match.
If you want to always fill the container, but without image distorion then investigate object-fit: cover. This will cut off top and bottom or the sides if it has to. You will need also to look at positioning, often center will do what is needed but may not work for all your images.
This is correct answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<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>
html,body{
height: 100%;
}
.custom-container{
max-width:800px;
max-height:400px;
width:70%;
height:60%;
border: 2px solid red;
}
.mid{
border:2px solid green;
min-height:0;
}
img{
max-height:100%;
max-width: 100%;;
}
#problem{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1 d-flex">
<div id="problem" class="w-100" >
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1" alt="img">
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I'm working on learning bootstrap and I would like to have a website with a header, a footer, and three middle columns. So far I have the header and columns, but I'm not fully understanding how to make the the footer, and I'm pretty sure I did it the wrong way, but I would like some assistance figuring it out. I tried putting it in a div and changing the width to 100 vw and I'm just not fully understanding it. The header is basically just the container fluid part on top and I made a div for the footer but the edges still are the color of the container, So I guess my question is: what is the exact purpose of container and container-fluid and how do I make the footer div take up the whole space? Thanks, Code is:
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: calc(100vh - 200px);
}
#main {
background-color: lime;
}
#main_head {
height: 200px;
color: red;
margin: 0;
}
#main_foot {
height: 200px;
background-color: pink;
margin: 0;
color: red;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
container-fluid takes the full width of the screen while container has fixed size for each resolution.
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: calc(100vh - 200px);
}
#main {
background-color: lime;
}
#main_head {
height: 200px;
color: red;
margin: 0;
}
#main_foot {
height: 200px;
background-color: pink;
margin: 0;
color: red;
position: absolute;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
I want to overlap the two images such that the bottom image comes up to the top image.
Here is the code
<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"/>
<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>
<style>
.col-md-6{
margin: 1px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6"><img src="top-header-1.png"></div>
<div class="col-md-6"><img src="Base-BG_4.png"></div>
</div>
</div>
</body>
</html>
here is the attached screenshot
I want to be like this
You need to just add position:absolute; with position:relative as i used
.col-md-6{
margin: 1px;
}
.picContainer {position:relative;}
.pic2 {position:absolute; top:0px; left:0px;}
<href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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>
<div class="container-fluid picContainer">
<div class="row">
<div class="col-md-6"><img src="http://www.qygjxz.com/data/out/114/4676052-image.png"></div>
<div class="col-md-6 pic2"><img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"></div>
</div>
</div>
</body>
</html>
Even though you can use absolute positioning for your requirement, I don't think it is the best way now. You can achieve it using simple margin adjustments.
I hope this is something that you are looking for.
HTML
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="image-container">
</div>
</div>
CSS
.header {
width: 800px;
height: 200px;
background-image: url('http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg');
background-size: cover;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
.image-container {
width: 600px;
margin-left: 100px;
margin-top: -50px;
height: 200px;
background-image: url('https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg');
background-size: cover;
background-position: center;
}
Refer the codepen sample
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>
I have a fiddle with a right and a left sidebars. The bootstrap container class works great with the left side bar with text wrapping and all that.
But the Right Sidebar doesn't work quite right. Text gets tucked underneath it and doesn't wrap correctly. I also want to hide the sidebars at certain media points as well and want the container to work correctly at that point as well...
Can someone give me some pointers on getting my right sidebar and container to work correctly with each other?
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sidebar test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
.sidebar-fixed-left {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
}
.sidebar-fixed-left + .container {
padding-left: 220px;
}
.sidebar-fixed-right {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
right: 0;
}
.sidebar-fixed-right + .container {
padding-left: 220px;
}
</style>
</head>
<body>
<div class="navbar-inverse sidebar-fixed-left">
</div>
<div class="navbar-inverse sidebar-fixed-right">
</div>
<div class="container">
<div class="row">
<h2>Left and Rigth sidebars (Fixed)</h2>
<p>Left and Right sidebars</p>
</div>
</div>
</body>
</html>