central div
0 views
Skip to first unread message
Macsig
Jul 14, 2009, 2:19:56 AM7/14/09
to Elastic CSS Framework
hI there,
is it possible to create with elasticss a layout where a div is always
center on the page and it has width and height equal 90% of the
browser window even if when this one is resized?
if so how?
it is long time I'm trying to achieve so but I can't find a way to
achieve my goal so far.
THANKS
Sig
is it possible to create with elasticss a layout where a div is always
center on the page and it has width and height equal 90% of the
browser window even if when this one is resized?
if so how?
it is long time I'm trying to achieve so but I can't find a way to
achieve my goal so far.
THANKS
Sig
Sergio de la Garza
Jul 14, 2009, 10:44:56 AM7/14/09
to Elastic CSS Framework
Sure it can be done:
<style type="text/css" media="screen">
div.centered{
width : 90%;
margin : 0 auto;
}
</style>
<div class="unit">
<div class="container centered" style="">
All the content here is centered on the screen and 90% of the
window width
Then you can add here columns or whatever you want
</div>
</div>
If you have more questions don't hesitate to ask.
Cheers
Sergio
<style type="text/css" media="screen">
div.centered{
width : 90%;
margin : 0 auto;
}
</style>
<div class="unit">
<div class="container centered" style="">
All the content here is centered on the screen and 90% of the
window width
Then you can add here columns or whatever you want
</div>
</div>
If you have more questions don't hesitate to ask.
Cheers
Sergio
Macsig
Jul 14, 2009, 3:41:00 PM7/14/09
to Elastic CSS Framework
Hi Sergio,
thanks for your reply.
the 90% width is quite simple. but how can I achieve 90% height ???
Have a good 1!
On Jul 14, 7:44 am, Sergio de la Garza <sergio.delaga...@gmail.com>
wrote:
thanks for your reply.
the 90% width is quite simple. but how can I achieve 90% height ???
Have a good 1!
On Jul 14, 7:44 am, Sergio de la Garza <sergio.delaga...@gmail.com>
wrote:
Fernando
Jul 14, 2009, 4:50:09 PM7/14/09
to Elastic CSS Framework
well well, actually you dont need elastic to accomplish this, but here
is my approach prepared for an elastic layout based on 90% global, and
centered.
i havent tested it on all browsers though, so let me know how it goes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="production/
elastic.css" />
.full{
position : absolute;
height : 90%;
width : 100%;
top : 5%;
left : 0;
}
/* ]]> */
</style>
<script src="jquery.js" type="text/javascript" language="javascript"
charset="utf-8"></script>
<script src="production/elastic.js" type="text/javascript"
language="javascript" charset="utf-8"></script>
</head>
<body>
<div class="unit full">
<div class="container horizontal-center full-height" style="width:
90%; background-color:grey;">
put your content here
</div>
</div>
</body>
</html>
is my approach prepared for an elastic layout based on 90% global, and
centered.
i havent tested it on all browsers though, so let me know how it goes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="production/
elastic.css" />
<style type="text/css" media="screen">
/* <![CDATA[ */
.full{
position : absolute;
height : 90%;
width : 100%;
top : 5%;
left : 0;
}
/* ]]> */
</style>
<script src="jquery.js" type="text/javascript" language="javascript"
charset="utf-8"></script>
<script src="production/elastic.js" type="text/javascript"
language="javascript" charset="utf-8"></script>
</head>
<body>
<div class="unit full">
<div class="container horizontal-center full-height" style="width:
90%; background-color:grey;">
put your content here
</div>
</div>
</body>
</html>
Macsig
Jul 16, 2009, 1:18:45 AM7/16/09
to Elastic CSS Framework
Thanks Fernando for your reply.
I say i don't need elastic to accomplish it so how can I do that
without using elastic?
In the meantime I will try your code.
Thanks, I appreciate it.
Sig
I say i don't need elastic to accomplish it so how can I do that
without using elastic?
In the meantime I will try your code.
Thanks, I appreciate it.
Sig
Macsig
Jul 16, 2009, 3:25:13 PM7/16/09
to Elastic CSS Framework
PS
I forgot to mention that I'd like to have (if possible) an image as a
div background
Many thanks
Sig
I forgot to mention that I'd like to have (if possible) an image as a
div background
Many thanks
Sig
Fernando Trasvina
Jul 16, 2009, 4:59:27 PM7/16/09
to elastic-cs...@googlegroups.com
well, as long as you set the bg image on the container you are good to go.
try the code, its prepared for you to use elastic for the rest of the layout--
People can not gain something without sacrificing something else,
one must present something of equal value to gain something,
These is the principle of equivalent trade in alchemy.
try the code, its prepared for you to use elastic for the rest of the layout
People can not gain something without sacrificing something else,
one must present something of equal value to gain something,
These is the principle of equivalent trade in alchemy.
Reply all
Reply to author
Forward
0 new messages