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%;
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.
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>
I have currently got a footer in my website that I want to have at the bottom of the page at all times. It is only one line on most screens so I thought it would be a good idea to have it always there. I want to stay away from JavaScript too.
CSS
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div class="footer">
<p class="footer">Design by <a class="footer" href="http://www.tropilac.com">Tropilac</a></p>
</div>
Use position: fixed if you need to show at all times.
html,
body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: lightgray;
color: black;
}
<html>
<body>
<div class="footer">
<p class="footer">Design by Tropilac
</p>
</div>
</body>
</html>
Try positioning your element to fixed. This is useful for elements such as a footer as if you do something like this:
.footer {
position: fixed;
height: 50px;
border: 1px solid #ccc;
position: fixed;
bottom: 0;
left: 10%;
right: 10%;
}
This will give you a footer that stays at the bottom of the viewport. One drawback is that if the content is longer than the page the footer will still show positioned at the bottom of the page. This code will also give you your 80% width.
Fiddle: http://jsfiddle.net/p16rwgnn/
Use position:fixed and bottom:0 to get what you want
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
I have a div that I'm trying to position by percent in order for it to stay in place (it kind of floats around not centered on an empty part of the page), while still making it accessible and look good across different screen sizes and not really off to one side.
The problem is that, while I can use left: x% to adjust it accordingly, trying to use top does not do anything unless I'm specifying pixels, not percent. If I try to alter bottom in any way, it latches the div I'm trying to position to up near my header, and altering bottom with px makes it go up the screen from the header area.
Absolutely positioning the content_wrapper actually makes the top attribute work just fine, but it pushes a bunch of space below my footer and adds a scrollbar, pretty much ruining the design beyond the footer.
Here's the HTML:
<body>
<div id="container">
<div id="content_wrapper">
<div id="header">
</div>
<div id="content">
<div class="marquee">
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
</div>
</div>
</body>
And here is the CSS:
html, body {
height: 100%;
}
#content {
height: 100%;
position: relative;
width: 100%;
float: left;
}
body {
margin: 0;
padding: 0;
color: #FFF;
/* background: image.jpg; */
background-size: cover;
}
.marquee {
position: absolute;
height: auto;
padding: 10px 5px;
background-color: #F8F8F8;
width: 30em;
left: 15%;
}
#footer_wrapper {
width: 100%;
height: 43px;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -43px 0px;
}
#content_wrapper {
width: 100%;
margin: 0px 0px -41px 0px;
padding-top: 40px;
height: 100%;
}
#footer {
position: relative;
z-index: 10;
height: 4em;
margin-top: -4.07em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
border-top: 2px solid #F8F8F8;
}
(There is a float or two in there, like in #content, not necessary to the layout, but which are attempts to fix the issue.)
Any help in this matter would be hugely appreciated. Sorry about all the code, but I feel like the footer bits are necessary simply because of the aforementioned issue with scrolling.
Take out the
height: auto !important;
in #container.
That lets you use % for top or bottom.
Hey guys I'm building my first website and I cannot figure how to get rid of the extra space on the right which brings up the horizontal scrollbar. The site is http://qtsocial.com/accounts/login/ ... If you can look at the css and give me a clue I would really appreciate it. Thanks!
body {
background: url(http://qtsocial.com/static/images/body-bkg.png) repeat scroll;
margin: 0;
padding: 0;
}
.container {
margin: 0pt auto;
width: 100%;
}
#header {
background: url(http://qtsocial.com/static/images/hdr-bkg.png);
background-repeat: repeat-x;
height: 181px;
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
background-image: url(http://qtsocial.com/static/images/QTlogo.png);
background-repeat: no-repeat;
height: 88px;
position: absolute;
top: 40px;
left: 25px;
width: 100%;
}
#navigation{
height:40px;
z-index: -1;
}
You have the DIV with id of logo set to 100% width (which is setting it to the page width) then you're indenting it by 25px. Change the width of #logo on line 25 of login.css to be the width of the background image you're using (299px).
Logo is too wide
Inside #logo Change width: 100%; to width: 299px; (the actual width of the image)
Your logo div is whats causing it.
It is 100% of the width, but this does not include the 25px of the left of it, thus it is overflowing 25px to the right of your window.
Change the width of the logo div to the width of your logo image, and it won't overflow to the right.