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.
Related
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>
I loaded an image to my html page. I set its opacity to 0.5 using jquery css property. Now
I want to write a text based sentence on the top of this image. I mean to say that the image I loaded I want it to be in background and the text to appear on top.
It is just like quoted image.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
div{
position:absolute;
top:40px;
left:40px;
width:500px;
height:500px;
}
#imgDiv{
width:500px;
height:500px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("img").css("opacity", 0.5);
});
</script>
</head>
<body>
<div align="center">
<img src="936371_607068789305456_425546376_n.jpg" id="imgDiv"/>
</div>
</body>
</html>
You can set the css of the image by to set the image below all other DOM elements :
#imgDiv{
position: absolute;
width:500px;
height:500px;
z-index: -1;
}
Add this to imgDiv CSS code:
position:relative;
z-index:0;
This makes the image act like a layer so we can put text on top of it the same way.
Now for the text make a new <div> or <p>, give it an ID, and write this CSS code to it:
position:relative;
z-index:1;
This will make the text on top of the photo. Now use top: bottom: left: right: in the same CSS if you needed to move the text around.
HTML
<div class="img-container">
<img class="transparency" src="img.jpg" />
<div class="img-text">
Image is loaded.
</div>
</div>
CSS:
.transparency {
opacity: 0.5;
z-index: 1;
}
.img-text {
z-index: 2;
position: absolute;
}
This should be sufficient. It tells the img-text class to be on top of the transparency class.
Just put you image as a div background in CSS.
background-image: url(images/yourimage.jpg);
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 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; }