I want to have a div that grows when you add more content in it, has at least the height of the viewport and has a header and a footer sticking to the top and bottom. I came up with the following which works fine in IE7 but doesn't work in ff3.5.
This is the HTML (add repeated 'Lots of text' for main_body to grow out of the viewport):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Testing 123</title>
<link rel="stylesheet" href="css/testing.css">
</head>
<body>
<div id="main_body">
<div id="header"></div>
<div id="content">
Lots of text<br>
</div>
<div id="footer"></div>
</div>
</body>
<html>
This is the css:
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
z-index: 10;
font-family: Arial;
font-size: 20px;
text-decoration: none;
text-align: left;
}
html, body {
height: 100%;
background-color: rgb(255, 255, 255);
}
#main_body {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 20px 0px 20px;
}
#header {
position: absolute;
top: 20px;
left: 0px;
height: 50px;
width: 100%;
background-color: rgb(40, 40, 40);
}
#content {
margin: 80px 10px 50px 10px;
}
#footer {
position: absolute;
bottom: 20px;
left: 0px;
height: 20px;
width: 100%;
background-color: rgb(40, 40, 40);
}
I think this should work according to specs. And it does in IE but not in ff3.5. Pleae help.
EDIT:
I found out (thanks to Jeepstone) that it works fine when I change margin to padding in #content.
100% height is not straight forward. You need to do something like http://www.xs4all.nl/~peterned/examples/csslayout1.html.
Incidentally, where you are resetting *, you should look at Eric Meyers CSS Reset http://meyerweb.com/eric/tools/css/reset/ as resetting everything can cause problems.
In fact it doesn't work for me in IE8, FF3.5 and Webkit browsers and Opera.
I can't recall the actual reason but if you add a something e.g. after the "main_body" div, it works.
<div id="main_body">
It works for me in FF 3.5.7.
You can try to set the positioning from relative to static as well, which might solve it.
Let me know!
Related
Total noob to HTML/CSS here. I'm having difficulty getting my website to look correctly when the window is resized. This is what happens:
Gross:
I set the body background blue. Then the white background is created with two divs (one called "body" the other called "body-text") containing all the body elements, styled as such:
.body {
margin: 35px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
padding-bottom: 50em;
padding-right: 15px;
}
.body-text {
margin: 15px;
padding-bottom: 10px;
}
So how can I get the images to stay inside the white div when I resize the screen? I'm sorry if this question has been asked before, I'm not exactly sure how to word this. Thank you very much for your help!
Here try this code it will make your DIV responsive
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
margin: auto;
width: 80%;
border: 3px solid #73AD21;
padding: 10px;
background-color:blue;
}
img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<div>
<img src="https://images.news18.com/ibnlive/uploads/2021/07/1627377451_nature-1600x900.jpg">
<p>Responsive DIV</p>
</div>
</body>
</html>
Let me know if this will work for you or you want something else.
You could try adding this to your CSS.
img {
display: block;
}
.body {
margin: 35px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
padding-bottom: 50em;
padding-right: 15px;
}
.body-text {
margin: 15px;
padding-bottom: 10px;
}
how to create this type of CSS div box[![enter image description here][1]][1]
[1]:
Here's what I came up with:
<!DOCTYPE html>
<html>
<head>
<title>Gradient Div</title>
</head>
<style>
div.Outer
{
width: 200px;
border: 2px solid #00df82;
border-radius: 5px;
font-weight: bold;
padding-left: 15px;
font-family: sans-serif;
}
div.Inner
{
position: absolute;
z-index: 1;
left: 155px;
top: 8px;
width: 70px;
height: 54px;
border-radius: 25px 5px 5px 25px;
background-image: linear-gradient(#00df82, #34ef52);
}
#para
{
text-align: center;
font-family: sans-serif;
color: white;
}
</style>
<body>
<div class="Outer">
<p>Full Filled</p>
<div class="Inner">
<p id="para">95</p>
</div>
</div>
</body>
</html>
I've answered this to the best of my CSS knowledge. There may be better ways of solving this problem. Here is an explanation of the parts:
position: absolute; allows HTML elements to be placed anywhere on the HTML page.
z-index: 1; specifies in what order HTML elements will be displayed along the z-axis. For example, if an HTML element has a z-index of 0 and another HTML element has a z-index of 1, the HTML element with a z-index of 1 will be drawn on-top of the HTML element with a z-index of 0.
I made a fixed header div to my site and added a shadow under it but it doesn't fit my browser (100% width) ??
here is my css:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px -5px #000000;
position: fixed;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
Here is a screen capture:
You have a negative spread radius; for it to be full width you want this:
box-shadow: 0 10px 17px 0px #000000;
Demo:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
margin-right: auto;
margin-left: auto;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
The most waterproof solution: make your element longer (either with the width or padding property) than the viewport, and set negative margins (note: the margins are only really required to make this work with non-fixed elements). Your new #head css:
#head {
width: 110%;
margin: 0px -5%;
height: 60px;
top: 0;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
}
As other answers have mentioned: it is advised to set the border-radius spread property to a non-negative value. Or you could use separate box-shadows for each side.
Give the fixed element a position using left top ``right```
header{
position:absolute;
left:0px;
top:0px;
right:0px;
height:60px;
background-color:#00f;
box-shadow:0px 0px 17px #000;
}
Added a fiddle: https://jsfiddle.net/hpdymvqg/
The issue is beause you have a negative value for your box-shadow. Changing it to the following fixes the issue:
box-shadow: 0 10px 17px 0px #000000;
Tested here
I have a very basic web page using the below code.
The title block is allowing scrolling which I do not want.
I'm certain it will be my poor HTML code. Could anyone point out what is wrong causing the scroll?
The code is actually being used inside tasker for android inside a scene web elemen .
<!--full page style--!>
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
</body>
<style type="text/css">
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}
</style>
<h1 class="otto">Enter fuel fill up date</h1>
</head>
</html>
Caution : If you use height: 100%; or width: 100%; (and you should définitely avoid using this one, blocks are automatically taking all the horizontal space they can), don't use padding.
Padding and borders aren't part of specified width and height, so your h1 is actually 100% + 20px height.
Example with width : http://codepen.io/Manumanu/pen/ryhaC
This is why you get the scroll : You use height + padding + margin (h1 has automatic margins), so it's definitely taller than the view.
You should also apply your background to body, it has no sense on h1.
So, your code should be like this :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
background: #03a9f4;
}
.otto {
text-align: center;
font: bold 20px Roboto;
margin: 0;
line-height: 1.5em;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1 class="otto">Enter fuell fill up date</h1>
</body>
</html>
But now this point is set, what were you trying to do ? Viewing your initial code, didn't you try to vertically align your h1 in the view ?
If so, this is how you go for it :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
background: #03a9f4;
text-align: center;
}
.otto {
font: bold 20px Roboto;
margin: 0;
line-height: 1.5em;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
.strut, .otto {
display: inline-block;
vertical-align: middle;
}
.strut {
height: 100%;
}
</style>
</head>
<body>
<div class="strut"></div><!--
--><h1 class="otto">Enter fuell fill up date</h1>
</body>
</html>
Tell me if explanations are needed about this.
I just tidied it up! try this: everything is fine.
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)
}
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
<h1 class="otto">Enter fuel fill up date</h1>
</body>
There are some errors in the HTML that you would want to fix first. The browser will do its best to try to show the page anyway, but it was most likely causing the browser to work in quirks mode, which is basically to try to be compatible with the oldest browser imaginable.
You have a comment with the wrong ending delimiter --!> instead of -->
You have the body element inside the head element
If you fix that you end up with this code:
<html>
<head>
<style type="text/css">
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}
</style>
</head>
<!--full page style-->
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
<h1 class="otto">Enter fuel fill up date</h1>
</body>
</html>
You might want to put the style for the body tag in the style sheet also, but that is just to make the code nicer to work with.
I have managed to create an HTML page layout that emulates a paper document page, with a white paper page casting a shadow over a gray background, pretty similar to Acrobat Reader, MS Word and even Firefox's very own Print Preview visualization.
I followed a lot of suggestions found in SO about proper use of CSS3 (in which I am a total beginner), and the last feature were the #media rules.
So, I got to the present document, where the browser's print preview should display only the "printable_area" div and its content, but print preview is showing blank, and I don't know that I am doing wrong (I am using Firefox):
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>A Page to Print</title>
<style type="text/css">
#media print {
html, body, .paperpage {display:none}
.printable_area * {display:block}
}
#media all {
html, body {
margin:0; padding:0; height: 100%;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 20px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.8);
overflow-y: hidden;
}
.printable_area {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
#cabecalho {
padding: 0;
height: 100px;
border-style:solid;
border-width:1px;
border-color:black;
}
#main {
position: absolute;
top: 100px;
width: 100%;
}
h3 {
text-align: center
}
#rodape {
position: absolute;
bottom: 0;
width: 100%;
font-weight:bold;
font-size:50%;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
background-color: hsl(185,60%,90%);
text-align: center;
}}
</style>
</head>
<body>
<div class="paperpage">
<div class="printable_area">
<div id="cabecalho" style=" background: -moz-linear-gradient(top, #4DCDD6 0%, #fff 50%);"/>
<img src="MarcaMiotecNova.svg" height="40%" />
</div>
<div id="main">
<h3>Eletromiografia de Superfície</h3>
<p align="center">Exame realizado em condições ideais de temperatura e eletrovoltagem.</p>
</div>
<div id="rodape">
<p>My Company</p>
<p>Address St, 1234 - Don't Drive - Nice City</p>
<p>www.mycompany.com.br</p>
</div>
</div>
</div>
</body>
</html>
Any help would be much appreciated.
Thanks for reading!
An element will not be rendered if it, or any of its ancestors, is display: none.
You have set html to display: none so no element in the document will be rendered.
You need to be more selective about the content you hide.