I have a new problem that bugs me ...
I am making a web page that I want to be fixed with no scrolling and most important I want my main Div to fill aaaaaaaaall my available space...
I made this code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>There is a ##!¤*-ing blank !</title>
<style type='text/css'>
html {margin:0px;padding:0px;height:100%;overflow:hidden;border: 3px solid green}
div {margin:0px;padding:0px;}
</style>
</head>
<body onload="document.getElementById('mydiv').style.height=document.getElementsByTagName('html')[0].offsetHeight+'px'"><div id="mydiv" style="margin:0px;padding:0px;width:100%;border: 2px solid red"></div></body>
</html>
As you can see I get a white space between my body element border and my div element border even though my body padding and div margin are set to 0...
I had once read "More Eric Meyer on CSS" that contains a solution to this issue but it was a long time ago and I don't remember ...
Any help would be greatly appreciated ^^.
You didn't set the body's style:
body {margin: 0px; padding: 0px; height: 100%;}
Your body margin isn't set to 0px, just that of html.
Set the margin to 0 on the body tag.
body {margin:0;}
In addition - rather than adding:
padding: 0; margin: 0;
to every selector do it globally at the top of your CSS file:
* { padding: 0; margin: 0; }
Related
So i'm making a online profile for myself, and i was doing research on how to make the landing page as attractive as possible. Came across HTML5 Canvas, did some research and experimentation on making an interactive background, and this is the result (in codepen).
Now, i would like to write my name in the middle of the canvas with the text infront of the animation.
The animation gets called in a recursive loop and the initialization function gets called when the page is resized or refreshed.
Problem is, i can't get the text infront, and for some odd reason, my text shrinks when the page is resized.
Here is my pen
https://codepen.io/hamza-tariq-khan/pen/mzKMNd
<!doctype html5>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas Resize</title>
<style>
canvas{
/* border: 1.5px solid black; */
/* background-color: red; */
display: block;
}
body{
margin: 0;
overflow-x: hidden;
}
.wrapper{
margin : 20px;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="script.js"></script>
<div class="wrapper">
<h1>This is a sample sentence</h1>
</div>
</body>
</html>
and this is an idea of what i want to achieve. (the writing of Mathew williams infront of the moving background)
http://findmatthew.com
If I were you, I would skip rendering text in the canvas and apply some CSS rules to the div to make it show up on top instead. The CSS approach improves performance and also improves accessibility. A blind person using a screen reader will be able to figure out what's in the div, but reading text in the canvas is not supported. Most importantly, it's a lot easier to reason about HTML and CSS than it is to reason about text rendering in a canvas element. How often will you do that? When you come back to change the code in a month, six months, or a year, it will be easier to change the HTML/CSS than it will be to think through the canvas rendering logic all over again!
To do this, use the following CSS for div wrapper:
.wrapper{
position: absolute;
top: 0px;
color: red;
font-size: 60px;
margin : 20px;
}
position: absolute allows the div to overlap the canvas, and properties top, bottom, left and right allow you to control how far the div is offset from the edges of its parent (in this case wrapper is a child of body). I adjusted color and font-size just to make it obvious that it works.
And here is a link to a working example: https://codepen.io/anon/pen/LqoroR
var canvas = document.getElementById("dm_graphs");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
<style>
body,
canvas,
html {
font: 24px sans-serif;
height: 100hv;
width: 100%;
margin: 0;
padding: 0;
background: #888;
color: #135;
overflow: hidden
}
#fs {
position: relative
}
#txt,
canvas {
position: absolute
}
#txt {
color: yellow;
margin: 50px;
font: 24px subpixel-antialiased Noto Sans Samaritan;
background: transparent
}
</style>
<body>
<div id="fs">
<canvas id="dm_graphs" width="400" height="300"></canvas>
<div id="txt">This is a text over a canvas.</div>
</div>
</body>
I got the code from here, the main solution by rossipedia:
fixed sidebar until a div
Here's my Tumblr page and the part of the code the script is influencing (main is replaced with content):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
<style type="text/css">
#sidebarwrap {
margin: 0 0 1.5em;
width: 16.2em;
float: left;
position: relative;
}
#sidebar {
margin: 0 0 1.5em;
width: 16em;
height: 570px;
position: absolute;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer {
border-top: 4px solid {color:Footer Border};
background: {color:Footer Background};
color: {color:Background};
clear: both;
margin: 0;
overflow: auto;
padding: 0 0.5em;
}
#content {
margin-bottom: 4.5em;
margin-left: 18.5em;
min-width: 500px;
min-height: 550px;
}
</style>
</head>
Body
<body>
<div id="contain">
<div id="sidebarwrap">
<div id="sidebar">
...Stuff...
</div>
</div>
<div id="content">
...Stuff...
</div>
</div>
<div id="footer">
<div id="footer-container">
...Stuff...
</div>
</div>
I then included the the script right before the /body as so:
<script type="text/javascript">
...Script...
</script>
I keep spell checking and making sure everything is in order, but it all just won't work. At least not for that JS. The other JS's I used work just fine... The script is supposed to make my side bar scroll with the user and then stop right before overlapping the footer. Yet, the script acts likes its not even there, the sidebar doesn't move a single inch...
Heck, I even tampered with the original on its Fiddle page to make it the same layout and ordering as my page, and it still worked just fine.
Am I missing something? Everyone keeps talking about JQuery, and I'm not entirely sure what that is or if I'm supposed to use it... If someone could help me see what I'm doing wrong, I'd really appreciate it! :'D
It looks like you do need to load jQuery on your page to use the code you added. jQuery is a JavaScript library; it provides the "$" function.
To load jQuery in your page, add this before your fixed sidebar code:
<!-- Note that we have a closing tag right after the opening tag here. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Your code here
</script>
here is jsFiddle: http://jsfiddle.net/arJEx/
Here's what I got so far:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Waiting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<style>
* { margin:0;padding:0; }
#wait {
background:#ABC7D9;
border-top:4px solid #597F99;
border-bottom:4px solid #597F99;
padding:50px;
text-align:center;
font:23pt Georgia;
color:#1C5378;
display:none;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function() {
$(".act").live("click",function() {
$("#wait").slideDown("slow");
});
});
</script>
</head>
<body>
<button class="act">Activate effect</button>
<div id="wait">Please wait...</div>
</body>
</html>
I want it so the blue div when I press that button slides down to the middle of the page... but I juts can't seem to find out how to do it. Please help?
edit: ok, it doesn't HAVE to be middle of screen but near the top of part. like.. anywhere near middle to top of page.
Everything is just fine with Your JS. You need to change CSS. First of all div's container must fill all window:
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
Than change div's css. First approach (not sure about IE):
#wait {
/* remove padding and append those */
position: absolute;
top: 5%; /* change it */
bottom: 50%;
width: 100%
}
Second one:
#wait {
/* remove padding and append those */
height: 50%;
}
There is one problem You will need to solve. You will need to verticall align Your text without using padding and this is another question (just search for it in stackoverflow or goole).
Is this what you want?
$("#wait").height(0).animate({height: $(window).height() / 2});
Is this what you're looking for?
$(function() {
$(".act").click(function() {
var h = $("#wait").height()/2;
var t = $(window).height()/2;
var pos = t - h - 50;
$("#wait").slideDown("slow").css('top', pos);
});
});
You'd have to add position:relative; and width: 100% to your css though.
This will show the div and push it down the page by extending the top margin 200px. It uses Jquery's animate, which lets you change a numeric property over time (read: move stuff). SlideDown is basically shorthand for calling an animate function that increases the height of an element to move it down the page. Instead of increasing the height, this keeps the same height and just moves the element to a lower part of the page.
Is this anything close to what you wanted? :D
$(function() {
$(".act").live("click",function() {
$("#wait").show().animate({ marginTop: "+=200" }, 600);
});
});
I am trying to make a portfolio where if you click on ‘scroll page’, the page will scroll completely until the footer image is one with the top image. So you can see one complete image when header and footer are merged.
I have searched Google and Stack Overflow, but unfortunately I couldn't find anything that did the trick.
EDIT
i have updated the style.
On IE9 it scrolls until footer hits header and it fits good, but in google chrome it does not.
Anyone have any idea? Thank you
EDIT 2
I have managed to make the page scroll but now i have height property problems in web crossing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio | S.H. MOKHTAR | 2011</title>
<link rel="stylesheet" type="text/css" href="layout/styles.css" />
<script>
function pageScroll() {
window.scrollBy(0,60); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
</head>
<body>
<div id="header"></div>
<div id="content"><input type="button" onClick="pageScroll()" value="Scroll Page">
Stop Scrolling<br>
<br>
</div>
<div id="footer"><img src="layout/images/bot.png" style="width:auto; height:auto" /></div>
</body></html>
body, html, div, input, footer{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
width:100%;
}
#header{
background:url(images/top.png); height:auto; width:auto; background-repeat:no-repeat;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 43px;
}
#content{
margin-top:50px;
}
#footer{height:870px;
}
EDIT 3
With help i managed to resolve the height problem, The new code is up and running and for download at http://www.sushitaksteeg.nl/secret/Port.rar or live at http://www.sushitaksteeg.nl/secret/template.html for now.
My other question where i could solve this problem with help is: Height different in IE FF Chrome
Thank you
Haven't tested it, but something like this:
$("body").scrollTop($("#yourimage").position().top);
(With jQuery ofcourse for XB (Cross Browser))
i want to make a login page but it is hidden in the center of the main page.
and then i use jquery to make the div that surrounds it visible and it will be like the login page at www.bytes.com.
but i cant figure it out how to center it with css. it doesnt work without affecting the main pages div positions.
i just want it to float over the main page. someone?
Is this what you want? Note the CSS comment. It's important to get the div centered. The "trick" that make the float above the other parts of your site, is position: absolute.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Centering a DIV with CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style type="text/css">
.center_center {
position: absolute;
background-color: #ccc;
border: 1px solid #000;
width: 300px;
height: 200px;
/* notice: margins are -(value/2) */
margin-left: -150px;
margin-top: -100px;
top: 50%;
left: 50%;
display: none;
}
</style>
</head>
<body>
<div id='login' class="center_center">
Login content
</div>
<p><input type="button" value="Login" onclick="$('#login').show()" /></p>
</body>
</html>
You could try using a modal form for your login. jquery ui do a nice one http://jqueryui.com/demos/dialog/#modal-form which will open up a form for you to use in the centre of the page.