problems with use helper classes

18 views
Skip to first unread message

Vladimir

unread,
Jul 19, 2011, 9:57:52 AM7/19/11
to Elastic CSS Framework
Hello!

i try to use this construction

<div class="unit columns full-height">
<div class="container content">
<div class="column vertical-center horizontal-center">
<div class="message">hello</div>
</div>
</div>
</div>

but full-height and alignments don't work

what i do wrong ?

p.s. .content class contain only "border: 1px solid #efefef;"

and http://min.us/me3GhcW - screenshot


Thanks.

Sergio de la Garza

unread,
Jul 19, 2011, 12:14:54 PM7/19/11
to elastic-cs...@googlegroups.com
Try this:

<div class="unit columns full-height">
  <div class="container content full-height">

    <div class="column vertical-center horizontal-center">
      <div class="message">hello</div>
    </div>
  </div>
</div>

-- 
Sergio de la Garza
Sent with Sparrow
--
You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.
To post to this group, send email to elastic-cs...@googlegroups.com.
To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/elastic-css-framework?hl=en.

Vladimir

unread,
Jul 20, 2011, 3:18:35 AM7/20/11
to Elastic CSS Framework
Thanks Sergio, but your example also don't work (

this is full page code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8" />
<meta name="language" content="en" />
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<title>title</title>
</head>

<body>
<div class="unit columns full-height">
<div class="container content full-height">
<div class="column vertical-center horizontal-center">
<div class="message">hello</div>
</div>
</div>
</div>
</body>
</html>


and in main.css

@import url(elastic.css);

.content {
border: 1px solid #efefef;
}


any ideas ?

On 19 июл, 20:14, Sergio de la Garza <sergio.delaga...@gmail.com>
wrote:
> Try this:
>
> <div class="unit columns full-height">
> <div class="container content full-height">
> <div class="column vertical-center horizontal-center">
> <div class="message">hello</div>
> </div>
> </div>
> </div>
>
> --
> Sergio de la Garza
> Sent with Sparrow (http://www.sparrowmailapp.com/?sig)
>
>
>
>
>
>
>
> On Tuesday, July 19, 2011 at 8:57 AM, Vladimir wrote:
> > Hello!
>
> > i try to use this construction
>
> > <div class="unit columns full-height">
> > <div class="container content">
> > <div class="column vertical-center horizontal-center">
> > <div class="message">hello</div>
> > </div>
> > </div>
> > </div>
>
> > but full-height and alignments don't work
>
> > what i do wrong ?
>
> > p.s. .content class contain only "border: 1px solid #efefef;"
>
> > andhttp://min.us/me3GhcW- screenshot
>
> > Thanks.
>
> > --
> > You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.
> > To post to this group, send email to elastic-cs...@googlegroups.com (mailto:elastic-cs...@googlegroups.com).
> > To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com (mailto:elastic-css-fram...@googlegroups.com).

fernando trasvina

unread,
Jul 21, 2011, 3:14:48 AM7/21/11
to elastic-cs...@googlegroups.com
you want to have a message fully centered? on both axis?

> To post to this group, send email to elastic-cs...@googlegroups.com.
> To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.

Vladimir

unread,
Jul 21, 2011, 3:51:10 AM7/21/11
to elastic-cs...@googlegroups.com
full centered and full-height

fernando trasvina

unread,
Jul 21, 2011, 11:53:13 AM7/21/11
to elastic-cs...@googlegroups.com
but if it is full height then it cant be vertically centered right?


im trying to understand to give you the solution.

On Jul 21, 2011, at 2:51 AM, Vladimir wrote:

full centered and full-height


--
You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.

fernando trasvina

unread,
Jul 21, 2011, 12:17:43 PM7/21/11
to elastic-cs...@googlegroups.com

fernando trasvina

unread,
Jul 22, 2011, 1:40:46 AM7/22/11
to elastic-cs...@googlegroups.com

fernando trasvina

unread,
Jul 22, 2011, 4:31:48 AM7/22/11
to elastic-cs...@googlegroups.com
Sorry for the delay

here is a simple example of centering and full-height.

ill try to explain based on what you had.

column gets float:left, clearfix so horizontal-center does not affect this type of elements, it only works on lonely elements with a width becuase
internally it uses margin:0 auto;

vertical-center does not get any effect when used along with full-height because the movement will be 0, the element is already using all the vertical space.

and finally full-height needs an element bigger than itself so it can grow to fill the height of its parent.

now be careful when using this technique directly on body because body does not get window height by default, it gets content height.

hope that helps. any more questions pls send them, and a drawing of the desired result would help a lot to send the code faster.

<div style="width:500px; height:500px; border:solid 1px black;">  <!-- this acts as your container for whatever you want to center -->
     <div class="full-height horizontal-center" style="width:200px; border: solid 1px black;">  <!-- full-height does not need vertical-center -->
         hello
    </div>
</div>
Reply all
Reply to author
Forward
0 new messages