[support] Little Bit of CSS Help Needed
simone-www.io-lab.org
cimo75 at gmail.com
Mon Feb 2 03:27:21 UTC 2009
try:
div.content .field-field-rashi .field-item {
width: 35%;
float: left;
color: red;
padding: 0 0 0 2%;
background-color: #EADCC2;
}
On Mon, Feb 2, 2009 at 1:20 AM, Shai Gluskin <shai at content2zero.com> wrote:
> Hi Gang,
>
> Man, do I feel like a novice with CSS....
>
> Here is the html that Drupal is spewing out. I want the two fields:
> field-field-body and field-field-rashi to be two columns with the right
> column having a colored background.
>
> Here is the html
>
>> <div class="content">
>>
>> <div class="field field-type-text field-field-body">
>> <div class="field-items">
>>
>> <div class="field-item odd">
>> <p>Text in the left column goes here.</p>
>>
>> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis
>> augue sed diam aliquam venenatis. Ut est justo, facilisis non, eleifend id,
>> mattis sed, nunc. Proin sed dolor ac est semper ultricies. Vivamus faucibus
>> massa at elit. Vestibulum ante ipsum primis in faucibus orci luctus et
>> ultrices posuere cubilia Curae; Mauris eget eros. Aenean mattis. Maecenas
>> sagittis, est id porta commodo, mauris nibh gravida elit, et elementum odio
>> lacus nec erat. Nunc at dui. Proin tincidunt bibendum magna. Maecenas in
>> ipsum sit amet tellus vehicula fermentum. Praesent tincidunt lectus quis
>> ligula. Nullam elementum rhoncus lectus. Duis ligula. Integer porta. Donec
>> vitae velit vel ipsum ullamcorper iaculis. Integer et tortor. Integer vel
>> nisl.</p>
>>
>> <p>Sed rhoncus tempor ipsum. Cras metus lectus, congue sit amet, gravida
>> et, cursus at, eros. Suspendisse vitae elit ut libero dictum euismod.
>> Maecenas egestas felis eu ipsum. Etiam diam. Nunc at lorem in massa ultrices
>> pellentesque. Nulla aliquet tempus dolor. Ut viverra, diam sed sollicitudin
>> euismod, pede ante posuere purus, non pretium eros nisi sit amet felis.
>> Aliquam erat volutpat. Aenean in nunc. Pellentesque adipiscing adipiscing
>> lacus. Sed risus. Nam rhoncus congue dolor. Donec vel purus ac purus luctus
>> ultricies. Ut luctus, velit nec hendrerit mattis, justo risus scelerisque
>> velit, nec varius dui eros vitae mauris. Morbi sem.</p>
>>
>> <p>Vestibulum mauris erat, vehicula ac, egestas ut, porttitor id, mi.
>> Vestibulum at sem aliquet libero ultrices vulputate. Suspendisse quis diam
>> at velit venenatis viverra. Fusce vel nisi non lectus feugiat eleifend.
>> Etiam tortor arcu, ullamcorper quis, consequat at, tempus vel, elit. Integer
>> vestibulum eros ut neque. Etiam pellentesque fringilla nisi. Pellentesque
>> pretium lacus. Mauris a nunc. Vestibulum ultricies, pede ac congue
>> tincidunt, arcu mi ullamcorper magna, at interdum turpis lectus vel ante. Ut
>> nec tortor. Etiam at est non lorem faucibus egestas. In adipiscing iaculis
>> ipsum. In lobortis elementum metus. Integer sem metus, semper porttitor,
>> sollicitudin at, consectetur id, nisl. Nullam justo tellus, tristique
>> interdum, auctor posuere, laoreet vitae, diam. Aenean nec dolor. Proin non
>> ligula. Aliquam lobortis, est nec accumsan tincidunt, elit lectus
>> sollicitudin leo, aliquam sodales massa ligula id ipsum. Morbi adipiscing
>> risus nec dolor.</p>
>>
>> <p>Donec ut ante. Etiam laoreet adipiscing massa. Ut in nisl ac magna
>> pretium adipiscing. Aenean cursus ligula quis justo. Donec elementum, massa
>> eleifend cursus fermentum, sapien urna interdum justo, sit amet aliquet
>> lectus massa bibendum leo. Curabitur bibendum mollis tellus. Proin porttitor
>> volutpat justo. Maecenas urna odio, volutpat at, tempor non, mattis a, urna.
>> Nam et tellus rhoncus sapien facilisis varius. Proin faucibus tristique
>> enim. Maecenas sagittis lectus ut nisi.</p>
>>
>> <p>Quisque vel dui. Cras tempus. Sed adipiscing. Vivamus tristique semper
>> pede. Etiam porta. Cras condimentum lectus. Phasellus non neque ac nisi
>> pellentesque tempus. Aenean eleifend urna sit amet nisl. Nunc justo nunc,
>> tristique ut, fringilla ac, lobortis rhoncus, metus. Sed molestie nunc non
>> purus. Nam dui mauris, sagittis ut, luctus et, tincidunt sit amet, diam.</p>
>>
>> </div>
>> </div>
>> </div>
>> <div class="field field-type-text field-field-rashi">
>>
>> <div class="field-items">
>> <div class="field-item odd">
>>
>> <p>Text in the right column with the colored
>> background, goes here. Lorem ipsum dolor sit amet, consectetur adipiscing
>> elit. Curabitur quis augue sed diam aliquam venenatis. Ut est justo,
>> facilisis non, eleifend id, mattis sed, nunc. Proin sed dolor ac est semper
>> ultricies. Vivamus faucibus massa at elit. Vestibulum ante ipsum primis in
>> faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eget eros.
>> Aenean mattis. Maecenas sagittis, est id porta commodo, mauris nibh gravida
>> elit, et elementum odio lacus nec erat. Nunc at dui. Proin tincidunt
>> bibendum magna. Maecenas in ipsum sit amet tellus vehicula fermentum.
>> Praesent tincidunt lectus quis ligula. Nullam elementum rhoncus lectus. Duis
>> ligula. Integer porta. Donec vitae velit vel ipsum ullamcorper iaculis.
>> Integer et tortor. Integer vel nisl.</p>
>>
>> <p>Sed rhoncus tempor ipsum. Cras metus lectus, congue sit amet, gravida
>> et, cursus at, eros. Suspendisse vitae elit ut libero dictum euismod.
>> Maecenas egestas felis eu ipsum. Etiam diam. Nunc at lorem in massa ultrices
>> pellentesque. Nulla aliquet tempus dolor. Ut viverra, diam sed sollicitudin
>> euismod, pede ante posuere purus, non pretium eros nisi sit amet felis.
>> Aliquam erat volutpat. Aenean in nunc. Pellentesque adipiscing adipiscing
>> lacus. Sed risus. Nam rhoncus congue dolor. Donec vel purus ac purus luctus
>> ultricies. Ut luctus, velit nec hendrerit mattis, justo risus scelerisque
>> velit, nec varius dui eros vitae mauris. Morbi sem.</p>
>>
>> <p>Vestibulum mauris erat, vehicula ac, egestas ut, porttitor id, mi.
>> Vestibulum at sem aliquet libero ultrices vulputate. Suspendisse quis diam
>> at velit venenatis viverra. Fusce vel nisi non lectus feugiat eleifend.
>> Etiam tortor arcu, ullamcorper quis, consequat at, tempus vel, elit. Integer
>> vestibulum eros ut neque. Etiam pellentesque fringilla nisi. Pellentesque
>> pretium lacus. Mauris a nunc. Vestibulum ultricies, pede ac congue
>> tincidunt, arcu mi ullamcorper magna, at interdum turpis lectus vel ante. Ut
>> nec tortor. Etiam at est non lorem faucibus egestas. In adipiscing iaculis
>> ipsum. In lobortis elementum metus. Integer sem metus, semper porttitor,
>> sollicitudin at, consectetur id, nisl. Nullam justo tellus, tristique
>> interdum, auctor posuere, laoreet vitae, diam. Aenean nec dolor. Proin non
>> ligula. Aliquam lobortis, est nec accumsan tincidunt, elit lectus
>> sollicitudin leo, aliquam sodales massa ligula id ipsum. Morbi adipiscing
>> risus nec dolor.</p>
>>
>> <p>Donec ut ante. Etiam laoreet adipiscing massa. Ut in nisl ac magna
>> pretium adipiscing. Aenean cursus ligula quis justo. Donec elementum, massa
>> eleifend cursus fermentum, sapien urna interdum justo, sit amet aliquet
>> lectus massa bibendum leo. Curabitur bibendum mollis tellus. Proin porttitor
>> volutpat justo. Maecenas urna odio, volutpat at, tempor non, mattis a, urna.
>> Nam et tellus rhoncus sapien facilisis varius. Proin faucibus tristique
>> enim. Maecenas sagittis lectus ut nisi.</p>
>>
>> <p>Quisque vel dui. Cras tempus. Sed adipiscing. Vivamus tristique semper
>> pede. Etiam porta. Cras condimentum lectus. Phasellus non neque ac nisi
>> pellentesque tempus. Aenean eleifend urna sit amet nisl. Nunc justo nunc,
>> tristique ut, fringilla ac, lobortis rhoncus, metus. Sed molestie nunc non
>> purus. Nam dui mauris, sagittis ut, luctus et, tincidunt sit amet, diam.</p>
>>
>> </div>
>> </div>
>> </div>
>> </div>
>
> Here is my current attempt at the css
>
>> .field-field-body div div {
>> width: 60%;
>> float: left;
>> padding: 0 2% 0 0; }
>> }
>>
>> div.content div.field-field-rashi div.field-item {
>> width: 35%;
>> float: left;
>> color: red;
>> padding: 0 0 0 2%;
>> background-color: #EADCC2;
>> }
>
> I can tell from Firebug that the first declaration is getting applied, but
> not the second. So the float is working but the background color isn't.
> Ideally I'd like to have the two columns stay separate, no matter how much
> text is in either column. Do I do that with minimum-height declarations? I
> just find CSS mysterious sometimes. Thanks for the help. You can check out
> the sample node at http://fasttrackcoachacademy.com/node/9 if you want.
>
> Thanks much,
>
> Shai
>
> --
> [ Drupal support list | http://lists.drupal.org/ ]
>
--
.wmv , .wma , .pps along with all proprietary Windows formats won t be
accepted and/or viewed....
More information about the support
mailing list