When I decrease the height of the browser and the footer goes out of its area, the scroll does not appear but remains at the height of 20px all the way at the bottom? I found out this is becouse i have height:calc(100%-60px); but when it is set to the 100% the browser adds a scrollbar event even if it is not needed.Here is the code of the footer.
<footer>
<div>
Website crafted and designed by
</div>
</footer>
<style>
footer {
position: relative;
bottom:20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
div {
padding: 0 var(--margin);
font-size: var(--font-size-base);
color: var(--color-gray);
}
div a {
color: #fff;
font-weight: 600;
</style>
and there is the example site when proble occours
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="About ">
<main>
<h1>A lit bit about me</h1>
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</main>
</Layout>
<style>
main {
padding: max(140px, 5%) var(--margin) 0 var(--margin);
height: 100%;
}
main h1 {
font-weight: 600;
font-size: var(--font-size-xxl);
}
main p {
padding-top: var(--margin);
font-size: var(--font-size-base);
}
</style>
And the layout conponent:
---
import "../styles/index.css";
import "../components/Navbar.astro";
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<Navbar />
<slot />
<Footer />
</body>
</html>
<style is:global>
:root {
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
--font-size-xxl: clamp(2.4rem, 2.25vw + 1.6rem, 5rem);
--color-text: #f3f3f3;
--color-dark: #111111;
--color-bg-logo: #b86202;
--color-gray: #d9d9d9;
--margin: clamp(25px, 7vw, 125px);
--margin-spacing: clamp(5px, 1vw + 0.5rem, 15px);
}
html,
body {
color: var(--color-text);
font-family: "Lato", sans-serif;
height: 100%;
width: 100%;
}
body {
background: url("/background.webp") center / cover no-repeat fixed;
}
</style>
Related
This question already has answers here:
flexbox space-between and align right
(3 answers)
Closed 2 years ago.
I am trying to avoid float, and have some trouble moving the image to the right.
Trying my best to use flexbox but nothing is working. The thing is used here is a flex direction row. I can't come up with any idea's to do it.
Could someone please help me with this?
Thank you so much.
Here is an example of the code in codepen.io
https://codepen.io/wingho/pen/oNYXoLR
.why-us-column {
margin-left: 10px;
width: 90%;
flex: 1 0 65%;
position: relative;
display: flex;
flex-direction: row;
}
.car-home {
width: 30%;
margin-top: 30px;
display: flex;
flex: 1 0 55%;
position: relative;
}
.text-column {
position: relative;
}
.text-home {
margin-left: 30px;
margin-top: 50px;
line-height: 1.4;
}
.text-afq {
color: dodgerblue;
font-weight: bold;
}
.why-title {
font-weight: bold;
}
.contact-button {
color: white;
font-weight: bold;
background-color: dodgerblue;
border: 1px solid dodgerblue;
padding: 7px 9px 7px 9px;
border-radius: 5px;
}
.title-graph-first {
color: dodgerblue;
margin-top: 10px;
display: block;
font-weight: bold;
font-size: 18px;
}
.offer-title-second {
margin-top: -3px;
color: rgb(74, 75, 75) !important;
font-weight: bold;
font-size: 30px;
}
.bg2 {
background-color: #f1f1f1;
}
<div class="bg-1">
<div class="why-us-container">
<div class="why-us-column">
<img src="img/car-home.jpg" alt="test auto" class="car-home">
<div class="text-home">
<h5 class="title-graph-first"> Lorem ipsum </h5>
<h3 class="offer-title-second"> Lorem ipsum </h3>
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum.
</p>
<div class="button-container">
<button class="contact-button"> Lorem ipsum </button>
</div>
</div>
</div>
</div>
</div>
You can use position:absolute and text-align:right as an alternative of float.
div{background:red; text-align:right; position:relative}
#ab1{ position:absolute; left:0; background:yellow;}
#ab2{background:yellow; }
#ab3{background:yellow; }
<div><span id="ab1" style="display: inline-block;">A</span>
<span id="ab2" style="display: inline-block;">B</span>
<span id="ab3" style="display: inline-block;">C</span>
</div>
I am trying to add a background image to my website, I have set it so that the image will be in fullscreen, the problem is that I can't scroll down to see the rest of the page. Why?
<head>
<title>hemsida</title>
</head>
<body>
<img src="bilder/hemsidan.png"
style='position:fixed;top:0px;left:0px;width:100%;z-index:-1;'>
</body>
</html>
Use this :
After head and before body
<style>
body {
background-image: url("bilder/hemsidan.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
Remove your tag img
You simply need to do this :
/* this will add background to your site and below content*/
body {
background-image: url(https://lorempixel.com/800/800/);
background-size: cover;
}
/* Then put the CSS related to your page*/
.content {
background: rgba(255,255,255,0.8);
margin: 30px;
padding:30px;
}
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
If you want to use the image as a background image then you should add it as such on the body tag. You can also user it as cover if you want it to fit the whole screen.
body {
background: url('bilder/hemsidan.png') 0 0 no-repeat transparent;
// background-size: cover;
}
Why not use a real background image? Do it like this:
body {
background: url(bilder/hemsidan.png) no-repeat 0 0;
background-size: cover;
}
The image in your case is fixed top left and overlays everything.
You can attach the image to the html body as an background image. The following html content is now in front of the background image.
<head>
<title>hemsida</title>
</head>
<body style='background: url("bilder/hemsidan.png") 0 0 no-repeat;'>
</body>
</html>
So I have a web page the content of which I would like to be focused in a center portion with a white background, some 800 pixels wide. The side of the page will be in blue.
The problem is that I don't seem to be able to extend this center div consistently down to the bottom of the page. (The page in question is here.)
<html>
<head>
</head>
<body bgcolor = "#1DAEEC">
<div class = "bodyDiv">
<div class = "accueilBanner">
Logo and navigation items
</div>
<div class = "belowBanner">
<div class = "searchBar">
Search bar content
</div>
<div class = "barredContent">
<div id = "rssNews">
News Feed
</div>
<div id = "descriptif">
Text description here - very long and extends down below the lowest item on the searchBar
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The blue cuts off after the end of the content of the searchBar. I suspect the problem arises from the fact that the searchBar floats left and the barredContent is in absolute position. But there isn't much I can do to tinker the descriptif, since the rssNews floating off to the right and I need to continue having the descriptif wrap around as such :
____________ ___________________________________________________________
| Search Bar |Lorem ipsum lorem ipsum lorem ipsum lorem | RSS NEWS |
| C |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| O |lorem ipsum lorem ipsum lorem ipsum lorem | |
| N |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| T |lorem ipsum lorem ipsum lorem ipsum lorem | |
| E |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| N |lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum|
| T |ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem|____________________<--the white doesn't extend below this point (and it should) and everything below has a blue background (which it shouldn't, apart from the sides)
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
Here's my CSS:
html {
max-width: 800px;
height:100%;
margin: 0 auto;
}
body {
height:100%;
font-family: "Lucida Grande", Tahoma;
font-size: 14px;
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}
.bodyDiv {
min-height:100%;
width:800px;
background-color:#FFFFFF;
margin:0px;
padding: 3px;
}
.accueilBanner {
max-width: 800px;
text-align: center;
position: relative;
}
.belowBanner {
position: relative;
max-width: 800px;
}
.searchBar {
float:left;
width:25%;
font-size: 13px;
}
.barredContent {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 73%;
}
#rssNews {
float:right;
width: 33%;
margin-left: 2%;
margin-bottom: 5px;
font-size: 10px;
}
#descriptif {
text-align:justify;
}
PICTURE:
Is it possible to fix this using only CSS? Or is JavaScript necessary? If so, then what script?
The problem is that .barredContent is absolute positioned.
If you change the style of .barredContent to
.barredContent {
float: right;
width: 73%;
}
it should work as you want.
You can then also remove the height and min-height style properties from your body tag and its first child element.
I hope to have helped you :)
Here is a quick example of how you could achieve this. What you need to do is to add this to your css:
html, body {
width: 100%;
height: 100%;
}
Once you have added this you can now set the height of your divs to 100% so to take the full height of the page.
Here is a FIDDLE show this in practice.
You could more easily solve this problem by putting #rssNews outside and next to .barredContent instead of inside, and adding static width to them, but, if you want a CSS-"hack", this is the only one I know of
.html, .body, .mydiv { height: 100%; }
I'm not sure if it works anymore, but if it does, remember that it used to force the scrollbar to appear because 100% height is more like 102% of what you can actually see in the browser, so you will have to reduce the height to about 98%, if not 97%. It depends on the browser.
I'm coding a webpage that should have a header on top, a footer on bottom, and a side column on the right side. I'm having trouble with getting the footer to be on the bottom of the page. I don't want it to be position: fixed (that'd get annoying), but I do want it to appear at the bottom of the page when you scroll all the way down. (In the case that no scrolling is needed, it should appear at the bottom of the window)
Here's what I'm using. There's probably a pretty simple fix but I don't see what it is. Copy/paste this and you'll see.
<html>
<head>
<style type="text/css">
body {
font-size: 200%;
}
#side {
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: #0A0;
z-index: 100;
}
#header {
height: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #A00;
z-index: 200;
}
#header_push {
clear: both;
height: 40px;
}
#footer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
#footer_push {
clear: both;
height: 50px;
}
</style>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="header_push"></div>
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
</div>
<div id="side">
SIDE COLUMN
</div>
<div id="footer_push"></div>
<div id="footer">
FOOTER
</div>
</body>
Working correctly:
Working incorrectly when scrolling down (see scrollbar on side of page):
You need change the position to fixed
See my comment for an example of how to do this.
But in you situation, just put position:relative on the body.
JSBin
Them the absolute position footer will be in the relative positioned parent and will use its space, so putting bottom:0 will put the footer on the bottom of its _parent.
Some examples of elements with different positions
Hey i made a fiddle using your code. from what i understand this is what you're looking for. let me know if this helps.
Changes done:
CSS
#footer {
height: 50px;
background-color: #00A;
z-index: 150;
}
Link to fiddle : http://jsfiddle.net/daltonpereira/q7Dqg/
Here is JSBIN
Please modify your CSS as below
#footer {
height: 50px;
position: absolute;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
Remove bottom: 0; from #footer{..}
Just want to ask a few questions about this example:
What is the best way to do this 3 column layout these days? Of course there were tables and now there are divs etc etc. What the latest greatest way to accomplish this? If it was totally up to me I'd have a container div, containing 3 other ones. Set to width: 33%; and display: inline;
Also, how does one get those vertical dividers? Again as far as I know you use that in a table and only display certain borders by which you get a vertical rule effect.
But what's the best way these days to get this effect? Having html5 and css3 in your toolbox..
Thanks in advance!
Try this
HTML
<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
CSS
.outer {
background: #734e91;
padding: 12px;
}
.wrap {
margin: 0 auto;
}
.sub {
padding: 12px;
width: 32%;
height: 150px;
background: #734e91;
display: table-cell;
border-right: solid #a175c4 1px;
}
.sub:last-child {
border: 0px;
}
DEMO UPDATED
jsFiddle demo: http://jsfiddle.net/yDXLp/3/
<style>
footer {
background-color: #eee;
margin: 10px auto;
}
footer h2 {
font-size: 1.5em;
font-weight: bold;
}
footer > div,
footer > .divider {
display: inline-block;
vertical-align: middle;
}
footer > div {
padding: 1%;
text-align: center;
width:30%;
}
footer > .divider {
font-style: normal;
height: 240px;
border: 1px solid #888;
-webkit-box-shadow: 1px 2px 1px #ccc;
box-shadow: 1px 2px 1px #ccc;
}
</style>
<footer>
<div>
<h2>Our Client</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>Pay Rates</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>About US</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
</footer>
I recommend using box-sizing: border-box; (an alternative way to the standard css box model).
What does box-sizing: border-box; do? If you define the width of a div (e.g. 33%) and add borders and paddings it longer affects the calculated with of your div. It remains 33% of the parent with (33% - (borders + paddings)).
The standard box model adds them to the calculated with of 33% (33% + borders + paddings in our case).
HTML markup:
<div class="footer">
<div class="footer-item item1"></div>
<div class="footer-item item2"></div>
<div class="footer-item item3"></div>
</div>
CSS:
.footer {
box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}
.footer-item {
width: 33%;
float: left;
}
.footer-item + .footer-item {
border-left: 1px solid black;
}
Checkout Twitter Bootstrap(http://twitter.github.com/bootstrap/), Gumby Framework(http://gumbyframework.com/)
These frameworks may provide you readymade functionality for the horizontal bar. Else use borders. Set all borders except right as transparent in color
The css3 way of doing columns is using "column-*" family of properties
They are now supported by all major browsers and there should be no problems with them.
Personally I use these styles in my home site and they provide pretty flexible (perhaps with some small shortcomings) layout formatting.
The best way depends on what you want to achieve. How should the columns behave to resizing of the window etc.
If I was doing something like in the picture I would probably use a fixed width so I could have control of the line width for the text.
By using inline-block you can achieve columns that are collapsed and put under each other on a smaller screen (like a phone)
Try to figure aout the desired behavior first.
EDIT: Oops, I misread and confused horizontal with vertical ;-) I think the other answers explains his enough though.
Correct me if I'm wrong but I think that the css3 column property is for multiple columns for the same text body.