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.
Related
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
Basically, I have a navigation bar in my website. In the centre of the nav bar, I want my website's name centred. This was easy of course, but now I want my website's logo positioned to the left of it. Float: left does not work, as this simply puts the logo on the far left of the nav bar.
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
}
#name {
text-align: center;
position: relative;
}
#top-left {
position: relative;
float: left;
border: 1px solid black;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name">champion</h1>
</div>
</body>
</html>
You can do this trick:
<table style="background-color:Gray; width:100%;" >
<tr>
<td style="text-align:right; width:45%">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
</td>
<td style="text-align:left; width:30%"">
<h1 id="name">champion</h1>
</td>
<td style="text-align:right; width:25%;">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
</td>
</tr>
<tr style="text-align:right;">
<td colspan="3">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
</td>
</tr>
</table>
I have it running here where the float: left appears to be working. I'm guessing there may be something I'm missing. Could you put a jsfiddle or show a live example by chance.
Here's what I see
You can do something like this. It uses :before to attach the logo to the heading text: http://codepen.io/pageaffairs/pen/bchLo
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
text-align: center;
}
#name {
line-height: 56px;
position: absolute;
width: 100%;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
h1 span {
position: relative;
display: inline-block;
padding: 0 20px;
}
h1 span:before {
content: "";
width: 109px;
height: 56px;
background: url(http://www.webmasterworld.com/gfx/logo.png);
position: absolute;
top: 0;
right: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name"><span>champion</span></h1>
</div>
</body>
</html>
I want to leave out the footer of the height of the page such as Google Chrome does when you download a file. My page looks like this:
And I want to keep out of scrolling just like:
This is the code of my footer:
<footer class="tr-emulate">
<div class="float-left" style="margin-left: 5px; padding-top: 8px;">
<button class="k-button" onclick="javascript:document.getElementById('logoutForm').submit();">Cerrar sesión: #User.Identity.Name</button>
</div>
<div class="float-right" style="margin-right: 5px; padding-top: 12px;">© #DateTime.Now.Year - DirecTV </div>
</footer>
and this is the CSS style of the tag:
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
text-align: left;
width: 100%;
bottom: 0;
position: fixed;
height: 37px;
}
How can I do that?
This should get you on the right path:
FIDDLE
HTML:
<div id="wrap">
<div id="content"></div>
</div>
<footer></footer>
CSS:
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
}
#wrap{
height:90%;
width:100%;
overflow:auto;
}
#content{
height:300%;
width:100%;
background:green;
}
footer{
width:100%;
height:10%;
position:fixed;
bottom:0;
left:0;
background:red;
}
I have a site I'm currently working on which requires a sticky footer as some of the pages content is smaller then the rest.
My Website
I have tried many resources/tutorials trying to get a sticky footer working.
Tutorial Followed
I have attempted to implement this tutorial and below is my code which goes with it. I'm hoping someone
Could anybody possibly suggest CSS changes to my code to implement this feature.
<body>
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div class="push"></div>
</div>
<div id="footer-wrap">
</div>
</div>
</body>
CSS
#footer-wrap
{
background: url("images/footer.jpg") repeat-x scroll center bottom transparent;
color: rgb(117, 139, 141);
height: 462px;
position: relative;
width: 100%;
}
#header-wrap
{
clear: both;
min-height: 100%;
margin-bottom: -462px;
}
#header-wrap:after
{
content:"";
display:block;
height:462px;
}
Not working for me. Need Help!
Also 'push' is not in use. Use it maybe?
EDIT
body {
height: 100%;
margin:0px
}
html
{
height: 100%;
margin: 0px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
}
UPD
<style type="text/css">
#footer-wrap
{
height: 462px;
position: relative;
width: 100%;
}
html, body {
height: 100%;
margin:0px;
background: #eee;
margin-bottom: -462px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
border: 1px solid red;
margin-bottom: -462px;
}
#wrapper:after
{
content:"";
display:block;
height:462px;
}
</style>
HTML
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div id="page-wrap"></div>
</div>
</div>
<div id="footer-wrap">
</div>
You can do this by css trick
css
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
html
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div style=" text-align:center; padding-top:25px;">
Place you content here as much as you like
</div>
</div>
<div class="footer">
Footer
</div>
</div>
working js Fiddle File
This works.
CSS
* {
margin: 0;
}
html, body, #wrapper {
height: 100%;
}
.header-wrap {
min-height: 100%;
margin-bottom: -462px;
}
.header-wrap:after {
content: "";
display: block;
}
#footer-wrap, .header-wrap:after {
height: 462px;
}
#footer-wrap {
background: orange;
}
HTML
<div id="wrapper">
<div class="header-wrap">
<div id="header">#header</div>
<div id="home-header">#home-header</div>
</div>
<footer id="footer-wrap">
#footer-wrap
</footer>
</div>
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.