By ericinwisconsin on

I'm not much of a theme creator, but I'm trying.

I have a piece of code inside a .css file for a theme that works well:

#node_magazine_full__full_group_pages .field-type-image {
float: left;
padding-right:10px;
padding-bottom:10px;
}

This code, on the full node page of a content type (Magazine (Full)), in a fieldgroup (group_pages), makes the images in the group float to the left and appear on one line.

Now I'd like to make some fields in a different fieldgroup appear on one line. Not being much of a CSS person, I tried this code, but it didn't work:

#node_magazine_full__full_group_pub_data .field-type-text {
float: left;
padding-right:10px;
padding-bottom:10px;
}

No doubt I'm doing something wrong here. If someone can point me in the right direction, I'd appreciate it.

⋅ Categories: Drupal 7.x

Comments

christopher james francis rodgers’s picture

christopher james francis rodgers commented

I do not know where you picked up "field-type-text",
but I believe that points to a text container
and not an image.

I have struggled off and on with CSS for years,
and FireBug was an Ala-sent (God-send) .

FireBug is an old loved FireFox extension for dealing with CSS.

http://getfirebug.com/

I use this to mine in/out of html elements until I see css I seek.

Then I change my *.css file.

I love FireBug, and I am only using one-percent of its capabilities,
I'm sure.

- Chris

Introduction to Firebug
http://getfirebug.com/#screencast-view

###


All the best; intended.
-Chris (great-grandpa.com)
___
"The number one stated objective for Drupal is improving usability." ~Dries Buytaert *

ericinwisconsin’s picture

ericinwisconsin commented

Thanks for pointing me to Firebug. It seems a useful tool.

I used it on a specific page and found this in the script section that mentions a field item. From this I've determined that what I want is this:

#node_magazine_full__full_group_pub_data .field-item {
float:left;
padding-right:6px;
}

This works for me. Thanks!

mjcarter’s picture

mjcarter commented

Are all the fields field-type-text? If not, here's an example selector I used for a similar use with mixed field types.

.node-widget .field-type-text,
.node-widget .field-type-number-integer {

I think the most likely issue however is that you don't have a width specified. Unless a block element (eg <.p >,<.div >) has a width set it takes up the full width available in the parent container (even if it only contains one word). Try adding the line:
width:20%; to your declaration, see what it does and adjust from there.

pal95’s picture

pal95 commented

perhaps .field-type-text needs a width to be floated?