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>
Related
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 want to have a centered box with two images on each side of a box, overlapping. Later, I'll move top image for each box with jquery animate function away from bottom image.
This is my code so far:
html,
body,
#wrapper {
height: 100%;
min-height: 100%;
}
#wrapper {
align-items: center;
display: flex;
justify-content: center;
}
#center {
width: 800px;
border: 1px solid black;
text-align: center;
position: relative;
}
img {
width: 100%;
height: auto;
float: left;
}
#left {
//border:1px solid red;
width: 400px;
float: left;
//position:absolute;
}
#right {
//border: 1px solid green;
width: 400px;
float: right;
//position:absolute;
}
#top {
z-index: 1;
}
#under {
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style1.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="center">
<div id="left">
<img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top">
<img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
</div>
<div id="right">
<!--<img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under">-->
<img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
I have managed to center this box and add one picture for each side (left, right), but when I want to add another picture on either side, that has z-index: -1 it breaks into new line..
Fiddle that is showing problem: https://jsfiddle.net/bjgydLvo/
You need to give your second image a class and position it absolute.
<img class="second" src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
.second {
position: absolute;
top: 0;
z-index: 2;
left: 0;
width: 100%;
}
Make sure you position your left element relative too
#left {
width: 400px;
float: left;
position: relative;
}
Remove #under
Working example
https://jsfiddle.net/46pk1vdf/4/
z-index wont work without assigning position..
Updated fiddle : https://jsfiddle.net/bjgydLvo/2/
#under{
z-index:-1;
float: none;
height: auto;
left: 0;
position: absolute;
width: 400px;
z-index: -1;
}
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>
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
See attached image. How is this accomplished? Gosh, I've been going CSS for 8 years but somehow never had to do this!
Thanks!
This is how I do it:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
Example here
I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:
The HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
And here's the CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.
Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)
Good luck!
This new approach doesn't break the layout as the content box (right) organically grows. Also it allows to safely apply backgrounds and borders to the container box.
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
See demo.
You can always use table display layouts (sigh).
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}
<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
This is the most straight forward solution I could think of.
Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar.
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}