I have a complex image cutted up in alot of slice.
You can see http://jsfiddle.net/yefQR/
<!--Force IE6 into quirks mode with this comment tag-->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontentTop">
<div class="innertube">
<div id="screenshot%20tsam%20900r2c2" style=" background-color: green;position:absolute; left:4px; top:6px; width:20px; height:68px; z-index:1; visibility:visible; ">
</div>
<div id="screenshot%20tsam%20900r2c3" style="background-color: yellow; position:absolute; left:24px; top:6px;width:47px; height:68px;z-index:2; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c4" style="background-color: red; position:absolute; left:71px; top:6px;width:165px; height:68px;z-index:3; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c5" style="background-color: black; position:absolute; left:236px; top:6px;width:62px; height:68px;z-index:4; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c6" style="background-color: pink; position:absolute; left:298px; top:6px;width:147px; height:68px;z-index:5; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c7" style="background-color: orange; position:absolute; left:445px; top:6px;width:311px; height:37px;z-index:6; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c9" style="background-color: cyan; position:absolute; left:756px; top:6px;width:108px; height:37px;z-index:7; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c11" style="background-color: white; position:absolute; left:864px; top:6px;width:27px; height:37px;z-index:8; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c7" style="background-color: DodgerBlue; position:absolute; left:445px; top:43px;width:8px; height:31px;z-index:9; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c8" style="background-color: Gold; position:absolute; left:453px; top:43px;width:355px; height:31px;z-index:10; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c10" style="background-color: LightCyan ; position:absolute; left:808px; top:43px;width:83px; height:31px;z-index:11; visibility:visible;"></div>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Lorem</h1>
<p>
Lorem ipsum
</p>
<p style="text-align: center">Vestibulum </p>
</div>
</div>
</body>
</html>
Id like to make :
1) the header image autoexpanding using the repeated-y css property of DodgerBlue color and Orange div because thy are the only 2 part of image axpandible.
2) Is it possible to define a minimum size of header, and is possible to make the entire body minimum size based that size so the browser cant get smaller an if the window get smaller, scrollbar is show.
Yes, just use min-width in your css. You can also define a max-width if you need too.
Related
I need to split my screen in half horizontally, so I can have an index on one half (<aside>), and the content on another (<article>). As such, they need to have independent scroll bars, because otherwise the user would need to scroll the very extensive content (<article>) just to reach the index (<aside>) again, which I don't want to happen -- I want the index (<aside>) to be always visible.
Also, there needs to be some part on the top where the title and the description of the page is kept always visible. I managed to solve this using a position: sticky on the <header>.
This is the best I got so far, with my limited knowledge:
h1{
position: sticky;
top: 0;
background-color: lightblue;
border-bottom: 1px solid black;
}
aside {
float:right;
position: sticky;
right: 0;
top: 0;
width: 40%;
background-color: lightyellow;
border: 1px solid black;
}
<html>
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
<h1>"Page Title"</h1>
<aside>
<h2>Index</h2>
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ol>
Footnotes.
</aside>
<article>
<p>This is the very extensive content:</p>
<h2 id="item-01">January</h2>
<h2 id="item-02">February</h2>
<h2 id="item-03">March</h2>
<h2 id="item-04">April</h2>
<h2 id="item-05">May</h2>
<h2 id="item-06">June</h2>
<h2 id="item-07">July</h2>
<h2 id="item-08">August</h2>
<h2 id="item-09">September</h2>
<h2 id="item-10">October</h2>
<h2 id="item-11">November</h2>
<h2 id="item-12">December</h2>
</article>
</body>
</html>
It should give some visual orientation for you to understand what I'm trying to do here.
Here you go :)
body{
height:100%;
width:100%;
overflow:hidden;
position: absolute;
margin: 0;
padding: 0;
}
h1{
position: sticky;
top: 0;
background-color: lightblue;
border-bottom: 1px solid black;
margin:0;
height: 40px;
}
aside {
position: absolute;
height: calc(100% - 40px);
overflow-y: scroll;
float:right;
position: sticky;
right: 0;
top: 0;
width: 40%;
background-color: lightyellow;
border: 1px solid black;
}
article{
height: calc(100% - 40px);
overflow-y: scroll;
}
<html>
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
<h1>"Page Title"</h1>
<aside>
<h2>Index</h2>
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ol>
Footnotes.
</aside>
<article>
<p>This is the very extensive content:</p>
<h2 id="item-01">January</h2>
<h2 id="item-02">February</h2>
<h2 id="item-03">March</h2>
<h2 id="item-04">April</h2>
<h2 id="item-05">May</h2>
<h2 id="item-06">June</h2>
<h2 id="item-07">July</h2>
<h2 id="item-08">August</h2>
<h2 id="item-09">September</h2>
<h2 id="item-10">October</h2>
<h2 id="item-11">November</h2>
<h2 id="item-12">December</h2>
</article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display: flex;
overflow: scroll;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
In this simple example I use both padding on the parent div and margin on the child but there is no padding or margin on the far right of the container... How can I solve this problem? Ty
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display:inline-flex;
overflow: auto;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
I guess you want to keep the lightblue padding when the scroll bar appear. You will have to separate the scroll container and the padding container in order to achieve this.
I suggest you change the HTML into this:
*{
box-sizing: border-box;
}
html,body{
margin: 0;
}
.wrapper{
padding: 10px;
background-color: lightblue;
max-width: 500px;
}
.scroll{
overflow-x: scroll; /* or auto */
display: flex;
}
.content{
background-color: yellow;
margin: 5px;
}
<div class="wrapper">
<div class="scroll">
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
</div>
</div>
You can also check out this CodePen
So I have a few section with a dynamic height(Based on viewport) and I need to be able to position a img as a divider between sections. The only way I can think of to do it is to absolutely position the images. The problem is I don't always know what the fixed height of each section will be.
So is there a way to be able to add a section with positioning relative to itself without having the empty space left over from position: relative.
.section {
width: 100%;
height: 200px;
}
.divider1 {
position: absolute;
left: calc(50vw - 100px);
top: 150px;
}
.divider2 {
position: absolute;
left: calc(50vw - 100px);
top: 350px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="section blue"></div>
<div class="divider1">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section red"></div>
<div class="divider2">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section green"></div>
</body>
</html>
Set the divider as a pseudo-element (I've used ::after) on the section element. Position the pseudo element in relation to the section element's bottom. In this way, the height of the section can change, and the divider will be in the right place.
Note - you have to wrap the div's inside a container, so we can disable the ::after on the last section.
.section {
position: relative;
width: 100%;
height: 200px;
}
.section:not(:last-child)::after {
position: absolute;
width: 200px;
height: 100px;
bottom: -50px;
left: calc(50% - 100px);
background: url(http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg) no-repeat;
background-size: contain;
content: "";
z-index: 1;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div>
<div class="section blue"></div>
<div class="section red"></div>
<div class="section green"></div>
</div>
If your images have stable dimensions: width="200px" height="100px", then you can place them absolutely positioned inside colored divs and independent of parent height:
.section {
width: 100%;
height: 50vh;
position: relative;
}
.section img {
width: 200px;
height: 100px;
display: block;
position: absolute;
margin-left: calc(50% - 100px);
margin-top: -50px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div class="section blue"></div>
<div class="section red">
<img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section green">
<img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
So i have 3 box:
Box 1 = red
Box 2 = blue
Box 3 = yellow
Box 1 contains Box 2
Box 2 contains Box 3
Box3 are floated divs and have been cleared using extra div style="clear:both"
I want to have Box 2 as an absolute position to Box 1 like this :
http://i301.photobucket.com/albums/nn42/b1rk0ff/done_zpsd3cd25c0.png
I have tried like this but won't work :
Html :
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Style :
.box1 {
width:300px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
Here's the codepen :
http://codepen.io/anon/pen/Kkirs?editors=110
Anybody could help?
Thank you
what about removing position:relative from .box1, and change position:absolute to .position:relative in .box2
See snipet below, and take a look at the comments in .box2
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Why can't you just set a fixed height for .box1?
.box1 {
width:300px;
background-color: red;
position: relative;
height:250px;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Just replace position: absolute by position: relative.
since box2 is absolute box 1 does not know the height of it's children,
you will need to revert to using both relative elements (or no position definition at all) and solve this problem with margin-left and margin-top
Thank you all, this is what i want.
Hope it helps another newbie like me. :)
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
In my html file, when I write this, it is displayed correct.
<div class="event" style="top: 30px; left: 10px; width: 584px; height: 80px;">
But as soon as I set strict doctype, the styling goes away. So in firbug I see only style="".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>.....<body>
<div class="event" style=""></div></body></html>
Complete html code:
<html>
<head>
<title>calendar</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:arial;
margin:10px;
}
#canvas {
width:600px;
height:720px;
padding:0 10px;
background:#ececec;
margin-left:75px;
position:relative;
}
.event {
padding:5px;
border:solid #d5d5d5;
border-left:solid #aaa;
border-width:1px 1px 1px 5px;
position:absolute;
max-width:600px;
background:#fff;
overflow:hidden;
}
div.event .title {
font-size:1em;
colo:#4B6EA9;
}
div.event .desc {
font-size:0.8em;
color:#7a7a7a;
}
#time {
float:left;
text-align:right;
}
div#time .timeline {
height:60px;
font-weight:bold;
font-size:14px;
color:#7a7a7a;
}
div#time div.timeline span {
font-weight:normal;
margin-left:7px;
font-size:10px;
color:#aaa;
}
div#time div.timeline .last{margin-top:35px;}
</style>
</head>
<body>
<div id="time">
<div class="timeline">9:00<span>AM</span></div>
<div class="timeline">10:00<span>AM</span></div>
<div class="timeline">11:00<span>AM</span></div>
<div class="timeline">12:00<span>PM</span></div>
<div class="timeline">1:00<span>PM</span></div>
<div class="timeline">2:00<span>PM</span></div>
<div class="timeline">3:00<span>PM</span></div>
<div class="timeline">4:00<span>PM</span></div>
<div class="timeline">5:00<span>PM</span></div>
<div class="timeline">6:00<span>PM</span></div>
<div class="timeline">7:00<span>PM</span></div>
<div class="timeline">8:00<span>PM</span><div class="last">9:00<span>PM</span></div></div>
</div>
<div id="canvas">
<div class="event" style="top: 30; left: 10; width: 584; height: 80;">test</div><div class="event" style="top: 610; left: 10; width: 284; height: 50;">test</div></div> </body></html>
You aren't specifying any units in your inline styles. This will work in quirks mode (no doctype) but not in strict mode (with doctype).
<div class="event" style="top: 30px; left: 10px; width: 584px; height: 80px;">
should fix it.
ok i figured out the problem.
Instead of
style="top: 30; left: 10; width: 584; height: 80;"
it should be
style="top: 30px; left: 10px; width: 584px; height: 80px;"
Earlier it worked because it was not using strict doctype.