My page is perfect with a doctype, and breaks horribly when one is applied. (More specifically, it breaks with any HTML4 doctype. An HTML3 one works fine, but that's clearly not acceptable.)
As is typical, I have cut the page down to only include the minimum needed to demonstrate the problem, but the main problem remains.
Without doctype, desired:
With doctype, horribly broken:
And the code, of course. Add a doctype to break it.
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container1">
<div id="main"></div>
</div>
<div id="container2">
<div id="test1">
<p style="text-align: center;">content goes here</p>
</div>
<div id="test2">
<p style="text-align: center;">more content goes here</p>
</div>
</div>
</body>
</html>
And style.css:
body
{
margin: 0px;
overflow:hidden;
color: white;
background-color: black;
text-transform: lowercase;
height: 100%;
}
#container1
{
background-color: black;
width: 100%;
height: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
}
#main
{
width: 800px;
height: 480px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: blue;
}
#container2
{
background-color: black;
width: 100%;
height: 22%;
margin-left: auto;
margin-right: auto;
position: relative;
}
#test1
{
position: absolute;
width: 50%;
height: 100%;
background-color: blue;
}
#test2
{
position: absolute;
width: 50%;
margin-left: 50%;
height: 100%;
overflow: auto;
background-color: green;
}
Live demo: http://jsfiddle.net/ZcYwQ/
html { height:100%; }
left:0; bottom:0; and right:0; bottom:0; on the #test1 and #test2 elements
Related
I used the below codes to create a HTML page where I kept header and footer tags in body tag. The height of header is 16% and footer is 5%. Now I inserted a div tag in body and gave a height of 79%(100-16-5%) but when I ran the code the height of the div tag is zero, why is it and how to align the div tag between header and footer.
Code:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<header>
<div id='hd_div1' class='hd_div'></div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
Image:
.body_1 has hight 0 because you body has height 0.
Both header and footer are positioned absolutely which ignores body in this case.
Simple solution will be to tell body to have a height of 100vh (whole window height) but you will have to apply margin from top to .body_1 so it will not be placed under header
Using position: absolute when it is not necessary is overall a bad approach to problem.
A god solution will be to set body to display: grid which has been created for this type of job.
more about grid
In this snipper I have added grid to body element and removed heights from header, .body_1 and footer (their height is now set with grid-template-rows so there is no point to set them in those elements).
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16% auto 5%;
height: 100vh;
}
header{
background-color: red;
width: 100%;
position: relative;
}
.body_1{
background-color:blueviolet;
}
footer{
background-color: red;
width: 100%;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
This is exactly your code, and the body_0 is blueviolet:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,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' />
<title>Search</title>
</head>
<body>
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class = 'hd_div'>Hello This a test text </div>
<div id='hd_div3' class = 'hd_div'></div>
<div class ='logo'>
<img id='head_img' src ='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'> </div>
<footer>
<div id='foot1'></div>
</footer>
</body>
</html>
I have a problem with my brand new html & css sites : I want to have a that opens when hovering on a floating element of itself. The problem is not on animation but on layout. When it's empty, it works well, but when I add content into the , it goes under the floating element. To solve this, I've tried different overflow values as explained here, but of course the part of the whitch is "outside" of it got impacted.
(in this sample, the "menu" is already opened)
section
{
background-color: white;
margin: 10px;
}
.scroll_aside{
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left{
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top:0;
}
.aside_left .cote{
position: relative;
top:0px;
right: -80px;
width: 80px;
background-color: orange;
margin-top: 100px;
margin-left:0;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TEST2.css"/>
</head>
<body>
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
</body>
</html>
Another thing I've noticed is that when the content is thin enough, it goes to the top....
But what I want, is to have the content taking all the , so going at the top and with width=100%.
Is there a way to do that ?
Thank you in advance....
Instead of float use absolute position:
section {
background-color: white;
margin: 10px;
}
.scroll_aside {
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left {
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top: 0;
}
.aside_left .cote {
position: absolute;
left: 100%;
width: 80px;
background-color: orange;
top: 100px;
}
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
I would like to have an element looking like a navbar at the top of my website:
It should be fixed, like a navbar. However, as soon as the user scrolls down, it should disappear under the rest of the content:
I tried something like that, where the #title element is the "navbar":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="title" class="center-align">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase" class="center-align">
</div>
</body>
<style>
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
}
#showcase {
margin-top: 50vh;
height: 75vh;
background-color: #212121;
}
</style>
</html>
However this is not working, the #title seems to be also affected by the 50vh margin-top (you can see it by setting its z-index to 1 instead of -1).
No need to use z-index
By default sibling are stacking by the order from bottom to top so the 1st child will at the bottom, the last child at the top. See example here:
Example of sibling z-index:
.div1 {
width: 100px;
height: 100px;
background: red;
}
.div2 {
margin-top: -50px;
margin-left: 50px;
width: 100px;
height: 100px;
background: green;
}
.div3 {
margin-top: -50px;
margin-left: 100px;
width: 100px;
height: 100px;
background: aqua;
}
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
Solution to your problem:
#title {
width: 100%;
height: 100px;
text-align: center;
position: fixed;
top: 0;
}
#showcase {
margin-top: 120px;
height: 90vh;
background: black;
}
<div id="title">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase">
</div>
Try change your style with the following css . I made some changes for test purpose.
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
background: red ;
top:0;
}
#showcase {
margin-top: 50vh;
height: 275vh;
background-color: #212121;
}
Hope it helps
Here's an example using a fixed navabr and a normal div for the content having a margin-top:
body {
margin:0;
height:100%;
}
.navbar {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
background-color: lightblue;
z-index:-1;
}
.content {
width: 100%;
float: left;
height: 1000px;
margin-top: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div class="content">
Content
</div>
</body>
</html>
Add top: 0 to the title id. Like:
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: 1;
top: 0;
}
I'm trying to build a website with 4 main divs (more to come later), 3 of which are fixed, so they dont move when i scroll, and one of them is not fixed. i've been going at it for around 6 hours and 30 minutes straight, googled for possible answers, checked youtube and spent atleast 2 hours looking at stackoverflow posts, none of which really pointed me in the right direction.
design im looking to get:
design
source (html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
<title>Title</title>
</head>
<body>
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
</body>
</html>
source (css):
/**/
html,body{
height: 100%;
}
body {
background-image: url("background.jpg");
}
div {
margin: 0px;
}
.menu {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top:200px;
right: 0;
text-align: center;
position:fixed;
}
.contact {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position:fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position:fixed;
top:0px;
left:0px;
}
.main {
background-color: green;
width: 100%;
margin-top:200px;
height: 200vh;
left: ;
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
i tried changing the width of the .main div, but regardless of what i try the div either goes under the .contact or .menu div
the .paragraph divs go into to the .main div, to hold some text and images once the .main div is properly positioned. the sizes of the divs in my source arent completely like they are in my design yet cus i kept trying thing to maybe solve my problem.
the .js file is currently still empty so i didnt post any source of it.
Any help is welcome: links; sources; comments; if you know something that might point me into the right direction, please post it!
edit: i tried using a wrapper, but that didnt work out too wel for me, i probably did something wrong, i posted the source that looks the most like my design when i open in in browser.
jsfiddle: http://jsfiddle.net/zt1Lyaop/
I ignored your existing code and made a new, HTML5 and responsive way of creating such a layout. I hope this helps you in understanding this concept better
http://jsfiddle.net/7k9vhk4r/2/
The key is using fixed and relative positioning, together with creating offsets based on percentages.
I just changed this:
added margin:0 to body
Change .main rules to :
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px; /* to make it big */
/*left: ;*/
See the demo FULL PAGE
body {
background-image: url("background.jpg");
margin:0;
}
div {
margin: 0px;
}
.menu {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
right: 0;
text-align: center;
position: fixed;
}
.contact {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position: fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
}
.main {
background-color: green;
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px;
/*left: ;*/
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).