Look, I know that there are many threads with many solutions, but none of them have worked for me. I'm a begginer and I'm just starting making websites in HTML. I've tried to make a website before, but I've had the same problem. I've deleted the previous one and made a new one and I still can't solve this.
What I've tried and doesn't really work:
setting height to 100% / 100vh (method one)
setting div min-height to 100%, giving it position absolute and doing this:
top: 0px
bottom: 0px
(method two)
When I do the method 1 my div isn't stretched to the bottom of the page when you can scroll the page, it is stretched to the 100% height of the browser window instead.
And when I do the method 2 the divs just disappear. I didn't forced the border to stretch so you can still see it but if I would do this it'd disappear.
And by the way, I'm just a begginer and I still don't even know basics of JavaScript, jQuery etc. so I'd like to just use pure HTML and CSS and not JavaScript and other stuff until I learn them.
EDIT:
The DIVs need to stretch when the text is added too, actually that's one of my main problems.
Try this… You can monkey with the styles to make it the way you want. I put your border inside .Main and changed html, body to height: 100%
Note: The positioning looks funky because of your use of absolute positioning for the margins of Main. I would change that. But if you copy the code to your page it might be what you're aiming for.
html, body {
height: 100%;
}
.page {
background: linear-gradient(#2d5aa4, #03637c);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.NavigationBar {
background: linear-gradient(to right, #636363, #4e4e4e);
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 220px;
min-height: 100%;
z-index: 2;
font-family: BloggerSans;
font-size: 1.5em;
}
.NavigationBarBorder {
background: linear-gradient(to right, #292929, #171617);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 10px;
min-height: 100%;
z-index: 3;
}
.MainParent {
position: relative;
min-height: 100%;
}
.NavigationTop {
background: linear-gradient(#636363, #4e4e4e);
position: absolute;
left: 220px;
width: calc(100vw - 220px);
height: 75px;
z-index: 1;
font-family: Jaapokki;
font-size: 2em;
}
.Main {
background: linear-gradient(#ffffff, #e8e8e8);
position: absolute;
top: 20vh;
bottom: 0px;
width: calc(100vw - 440px); /* set your width */
left: 220px;
margin-left: 90px; /*set your margin here */
min-height: 100%;
z-index: 4;
padding-left: 40px;
}
.MainBorder {
background: linear-gradient(#f79104, #e9720d);
position: absolute;
top: -10px;
left: 0;
width: 40px;
min-height: 100%;
}
h1 {
font-family: 'Jaapokki';
text-align: center;
font-size: 3em;
}
.Text {
font-family: 'BloggerSans';
font-size: 2em;
}
<body class="page">
<div class="MainParent">
<nav class="NavigationBar">
<div class="NavigationBarBorder"></div>
Table of content
</nav>
<header class="NavigationTop">
Navigation
</header>
<div class="Main">
<h1>Title</h1>
<div class="Text">
Text </br>
</div>
<div class="MainBorder"></div>
</div>
</div>
</body>
Related
This is the header, so it's all that I've written so far, but for some reason, my pictures are longer than my header.
The pic is from the lower part of the header where they overflow.
image of the overflow
<header>
<img id="bg-img" src="images/head-img.jpg" alt="bg">
<img id="logo" src="images/logo-black-bg.png" alt="logo">
</header>
header {
margin: 0;
height: 250px;
overflow: hidden;
background: #000;
position: relative;
}
#logo {
width: 18%;
max-height: 100%;
position: fixed;
top: 0;
right: 5%;
}
#bg-img {
width: 60%;
position: fixed;
top: 0;
left: 0;
}
I think you are confusing how position works, as your header is not actually useful for anything, as all elements contained within are positioned fixed, which means they take their width, height and position reference frame from the viewport and not your header element. I also do not understand why you would place a background image there if CSS provides a perfectly fine background property that can be controlled with much more ease.
For your purpose I would suggest something like the example below, but I would even go further and tell you that positioning your logo absolute is going to be a pain at some point - you add menus, text, etc... to your header and all of a sudden objects are behind your logo. In that case, a better solution might be a flexbox:
header {
display: flex;
justify-content: right;
align-items: stretch;
}
If you now add padding to your header, your logo will get it for free as well.
body {
height: 200vh;
}
header {
margin: 0;
width: 100%;
height: 25vh;
overflow: hidden;
background: #000;
position: fixed;
top: 0;
left: 0;
background: url('http://via.placeholder.com/300x200/444444');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#logo {
width: 18%;
max-height: 100%;
position: absolute;
top: 0;
right: 5%;
}
<header>
<img id="logo" src="http://via.placeholder.com/100x100" alt="logo">
</header>
I also adjusted your headers height, but only to ensure that it shows up correctly and you can visualise some scrolling and a fixed header.
We have set an image as a background image using the following code below and place text on top of it. Is there a way to display the image as a background without the "cropping" regardless of the height of the content on top of the image?
A pattern that occurs is that as the content grows so does the height of the image. If the solution requires that we get rid of that, then I am okay with that.
Note: images will not always be the same size.
Current results
Desired results
.banner {
position: relative;
display: block;
}
.banner:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.banner__image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.banner__content {
padding: 200px;
position: relative;
max-width: 900px;
text-shadow: 0 0 20px rgba(0,0,0,.6);
margin: 0 auto;
padding: 0 15px;
z-index: 2;
color: white;
}
<div class="banner">
<div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>
By using a percentage value in padding-bottom value, the percentage is calculated from the width of the element, not from height, as one might think.
Which means
padding-bottom: 42.773%; /* (438 × 100 / 1024) */
... will always have a minimum height allowing it to display the uncropped image (which, in your case has 1024px × 438px).
.min-ratio {
padding-bottom: 42.7%; /* (height × 100 / width) */
background-size: contain;
background-position: bottom center;
background-repeat: no-repeat;
width: 100%;
position: relative;
}
.banner__content {
position: absolute;
background-color: #00000065;
color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 3rem;
}
#media(max-width: 600px) {
.banner__content {
position: static;
}
.min-ratio {
background-size: cover;
padding-bottom: 0;
}
}
.banner__content>* {
align-self: stretch;
}
<div class="min-ratio" style="background-image: url(https://media.istockphoto.com/vectors/people-large-group-vector-id519533182)">
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>
However, you'll need to stop the image from repeating vertically, using background-repeat:no-repeat so that when the div gets too tall (on mobile, for example) it doesn't repeat the image.
The above technique allows you to set a minimal ratio on an element, without having to hard-code width or height values across different #media responsiveness intervals.
Since stack snippets looks down, here's the fiddle: https://jsfiddle.net/websiter/mek0chne/4/
You could use an padding in .banner
.banner {
position: relative;
display: block;
padding : 50px 0;
}
one way to do this if you don't know what's the height of the image is going to be , you can use an image instead of a div with background and set its position to absolute : Fiddle
.banner {
position: relative;
display: block;
}
.banner:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.banner__image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.banner__content {
padding: 200px;
position: relative;
max-width: 900px;
text-shadow: 0 0 20px rgba(0,0,0,.6);
margin: 0 auto;
padding: 0 15px;
z-index: 2;
color: white;
}
#bg{
position: absolute;
width: 100%;
}
<div class="banner">
<!--
<div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
-->
<img src="https://media.istockphoto.com/vectors/people-large-group-vector-id519533182" id="bg"/>
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>
You should look at the max and minimum height attributes in css for your class:
.banner
in addition you can also look at the background-repeat css attribute to prevent the image from repeating or alternatively to repeat on both or only on the x or y axis.
I can provide some code if you like but these are very self explanatory, there may be more elegant solutions but this will help you achieve what you're looking for.
Repeat:
https://www.w3schools.com/cssref/pr_background-repeat.asp
Height:
https://www.w3schools.com/cssref/pr_dim_min-height.asp
https://www.w3schools.com/cssref/pr_dim_max-height.asp
Then do not use the image as a background image. Use it as an normal image.
<div class="banner__image">
<img src="url of the image">
</div>
<div class="banner__content">
<!-- Your content here -->
</div>
And for the CSS
.banner__image img{
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.banner__image{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
}
.banner__content{
z-index: 3;
}
Now this should work
This is driving me crazy I cannot work out why my footer appearing at different heights even though it is defined in the _Layout view. I have the following css:
.footer {
position: absolute;
bottom: 0;
background-color: #ffd800;
width: 100%;
text-align: center;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
HTML:(_Layout)
<div class="container body-content">
#RenderBody()
<div class="footer"><p>Quote</p> </div>
</div>
How can I get the div to stay at the very bottom of the page. I want it to be under below all content. not covering any so if I add another div the foot will always be a footer. Example of my problem:
What I want:
Please help me get this consistent across my multiple pages. I have looked at lots of questions on stackoverflow but none or resolving the issue.
You would need to position your footer fixed, then offset its height (110px) from the bottom of the body or containing element (since it is taken out of the normal document flow), e.g: .container.body-content {padding-bottom: 110px;}
.container.body-content {
padding-bottom: 110px;
height: 1000px; /* Force height on body */
}
.footer {
position: fixed;
bottom: 0;
background-color: #ffd800;
text-align: center;
right: 0;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
<div class="container body-content">
<div class="footer">
<p>Quote</p>
</div>
</div>
Varying Footer Height (Responsive Concern)
If the footer height varies based on the width of the screen, refer to this answer: Keeping footer at bottom of responsive website
And the solution demonstrated in this CodePen: https://codepen.io/anon/pen/BoNBZX
No Fixed Footer
But if you need an absolute positioned footer, add position: relative to the containing element (.container.body-content), so that the bottom: 0 value of .footer is always relative to .container.body-content.
.container.body-content {
height: 1000px; /* Force height on body */
position: relative;
}
.footer {
position: absolute;
bottom: 0;
background-color: #ffd800;
text-align: center;
right: 0;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
<div class="container body-content">
<div class="footer">
<p>Quote</p>
</div>
</div>
Edit: position: absolute alternative version included
Another way is to give the main wrapper a minimum height, which will push the footer down. That minimum height should be the height of the screen minus other heights (footer's, nav's etc. heights). Fiddle here.
HTML:
<body>
<div id="header">Nav area</div>
<div id="main">Main content to be here</div>
<div id="footer">Footer be here</div>
</body>
CSS:
#header{
height:30px
}
#main{
min-height:calc(100vh - 60px);
}
#footer{
height:30px;
}
use position: fixed instead of position: absolute for the .footer css
change the position to
.footer {
position: relative;
bottom: 0;
background-color: #ffd800;
width: 100%;
text-align: center;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
The best thing to do is to put your header,main content and your footer in a div tag as a place for your elements in a web page than put them in a it's normal flow like working on footer tag at end of the page.
I've designed a new email layout for my website. it consists of three parts, header,body and footer. so 3 divs. the header background is done with an img tag cause there won't be anything on top of it. the body is a repeating thin line, and the footer as you see will have background and 4 img buttons for social networks. so it has to be background image not img but it must have a height cause as I searched A LOT! you can't control a div height by background image. but the problem is as the height is fixed, the background image will resize but the div won't, so I get background color on the extra part of the div. here's the file . any help will be appreciated. or even if you got an easier solution that would much much more appreciated. I know the coding is dirty I don't have much experience in it. keep in mind it's for an email so no hard stuff that mail clients can't handle. :D
Update : Well I decided to go with bottom padding, it almost fixes my problem Thank you.
This Is The Working Code:
<html>
<head>
<title>MissLand</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}
#Container{
text-align: center;
height: 100vh;
width: 100vh;
position: relative;
display: inline-block;
}
#Header{
background: url("./h.jpg");
min-height: 208px;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
#Body{
background: url("./b.jpg");
max-width: 600px;
min-height: 50px;
width: 100%;
float: left;
clear: both;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
z-index: 0;
}
#Footer{
background: url("./f.jpg");
min-height: 380px;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
#Header, #Footer{
background-repeat: no-repeat;
background-size: contain;
background-clip: border-box;
width: 100%;
float: left;
clear: both;
margin: 0;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header"></div>
<div id="Body"></div>
<div id="Footer"></div>
</div>
</body>
</html>
i think you need to put the footer always in bottom position, bcause there's no content again, so that's why it makes extra space in bottom,
add this style on your footer :
position: absolute;
bottom: 0;
width: 100%;
I am developing a web app that is supposed to have the feeling of a desktop app. I want my layout to make use of the entire browser window height (no more, no less). I've made an image that show the intended structure of the page.
Intended layout
In other words, I don't want the user to be able to scroll the entire page, but rather the different sections of the page. Similar to how most desktop applications work.
I've read everything about how to create columns with equal height etc., but non of the solutions I've found adds scrolling to the different sections instead of the entire page, and still makes use of the entire window height.
I hope someone has a solution to this, it would be awesome. I've been googling for hours.
If you are familiar with jQuery, please see http://layout.jquery-dev.net/demos.cfm .
They are also more plug ins like this out there.
This should get you 90% of the way there:
http://jsfiddle.net/aEdc7/
However, have you considered using a JavaScript framework such as Ext JS? Take a look at some of the demos: http://dev.sencha.com/deploy/ext-4.0.1/examples/
html, body {
margin: 0;
padding: 0
}
#container > div {
position: absolute
}
#header {
top: 0;
width: 100%;
background: cyan;
height: 40px
}
#nav {
top: 40px;
bottom: 0;
left: 0;
width: 150px;
background: #ccc;
overflow-y: auto
}
#content {
top: 60px;
bottom: 0;
left: 150px;
right: 0;
background: #eee;
overflow-y: auto
}
#error {
top: 40px;
left: 150px;
right: 0;
height: 20px;
background: #444
}
<div id="container">
<div id="header"></div>
<div id="nav"><br /></div>
<div id="error"></div>
<div id="content"></div>
</div>
There's a CSS trick that can be usefull in your case :
declare an element's position as absolute
set the top position at 0
set the bottom position at 0
The height of the element should not be defined, or defined to auto.
Than the element is full height of its parent.
this can probably help to build the layout you're looking for.
example code :
<html>
<head>
<style type="text/css">
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.header {
height: 40px;
background: #aabbff;
}
.contentLeft {
position: absolute;
top: 40px;
bottom: 20px;
left: 0;
width: 40%;
overflow: auto;
background: #eeeeff;
}
.contentRight {
position: absolute;
top: 40px;
bottom: 20px;
right: 0;
width: 60%;
overflow: auto;
background: #ddddff;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border: 3px solid blue;
height: 14px;
background: #9999ff;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="contentLeft"></div>
<div class="contentRight"></div>
<div class="bottom"></div>
</div>
</body>
</html>
Ciao,
Nico