By mistresskim on

I would like to wrap the body text around an image (created with image field). I'm guess I need to modify a CSS file and something else? Can anyone tell me exactly which CSS file (style.css?) and any other files I need to change?

And is this the right stuff to add to the CSS?

.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

⋅ Categories: Drupal 5.x

Comments

decibel.places’s picture

decibel.places commented

If the site is online could you provide a URL?

Otherwise, can you provide some relevant code?

~are you netsperienced? http://netsperience.org

~are you netsperienced?
♥ follow me @decibelplaces ∞

mistresskim’s picture

mistresskim commented

Unfortunately the site is not online and I have next to no knowledge of CSS so I have no code. I found that code on a CSS website.
Basically I want to lay out the image and body like this.

IMAGE IMAGE text text text text text text
IMAGE IMAGE text text text text text text
IMAGE IMAGE text text text text text text
IMAGE IMAGE text text text text text text
IMAGE IMAGE text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text

tekmo’s picture

tekmo commented 
<img src="url/image.jpg" align="right" class="picturepad" />

usually works for me.

right/left apply to align. the picturepad class can be something like padding:10px; to move text away from your image.

yelvington’s picture

yelvington commented

display:inline

grobemo’s picture

grobemo commented

You're on the right track for wrapping text around the image. You'll need to edit style.css. To use the code that you posted in your original comment, you'll need to make sure that the image has class 'floatimgleft'. (If it doesn't, you can use another CSS selector to get at it.)

You could simplify the code a bit, if you want:

.floatimgleft {
  float: left;
  margin: 10px; margin-left: 0;
}

It's not hard to learn the basics of CSS, and it's well worth it. You might try W3School's CSS tutorial or WebMonkey's CSS tutorial. If neither of those appeal to you, there are many, many more.

@tekmo: The align attribute for image tags is deprecated. Using styles is usually recommended instead to better separate presentation from content.

@yelvington: Won't setting display to inline just create a single line that's as high as the image, rather than wrapping multiple lines of text around a single image? I though that displaying something inline causes it to "flow" with the rest of the content. Floating something to the left lays it out as if were inline and then moves it as far left as possible.

AntiNSA’s picture

AntiNSA commented 
<div class="picture">
  </div>


      <span class="submitted">Thu, 10/30/2008 - 21:06 — AntiNSA</span>
  
  <div class="content clear-block">
    <p>inistries of Oceania<br />
Oceania's four ministries are housed in huge pyramidal structures, each roughly 930 feet high and visible throughout London, displaying the three slogans of the party on their façades. The ministries' names are ironic antonyms of the true nature of their actions.<br />
Ministry of Peace (Newspeak: Minipax)<br />
Conducts Oceania's perpetual war.<br />
Ministry of Plenty (Newspeak: Miniplenty)<br />
Responsible for rationing and controlling food and goods, along with all production of all domestic goods. The Ministry of Plenty declares false claims to have increased the standard of living every time by a considerable amount, when in fact the ministry counteracts its own claims.<br />
Ministry of Truth (Newspeak: Minitrue)<br />
The propaganda arm of Oceania's regime, controlling information: news, entertainment, education, and the fine arts. Winston Smith works for the Records Department (RecDep) of Minitrue, "rectifying" historical records and newspaper articles to make them conform to Big Brother's most recent pronouncements, thus making everything that the Party says 'true'.<br />
Ministry of Love (Newspeak: Miniluv)<br />
The agency is responsible for the identification, monitoring, arrest and torture of dissidents, real or imagined. Based on Winston's experience there at the hands of O'Brien, the basic procedure is to wear down the subject with a long series of beatings and electrical torture. Finally, when the subject is near broken, they are sent to "Room 101", where they are exposed to their worst fear, once and for all eradicating any remaining impulse of individuality or resistance, and replacing it with a sincere embrace of the Party. The Ministry of Love differs from the other ministry buildings in that it has no windows in it at all.<br />
The ministries' names are an example of doublethink — “The Ministry of Peace concerns itself with war, the Ministry of Truth with lies, the Ministry of Love with torture and the Ministry of Plenty with starvation”. (Part II, Chapter IX - chapter I of Goldstein's book)<br />
It is noteworthy that, while there is considerable and repeated mention of the ministries, there is never mention of a minister heading one of them, or of a cabinet where the ministers meet; nor is there mention of a politburo or any other decision-making body. If there is at all a "Minister of Truth", he (it would likely be a man, as Oceania seems very much male-dominated) seems much of a cypher, neither mentioned in the newspapers which his ministry is constantly re-writing nor</p>
<!-- google_ad_section_start --><div style="width: 333px" class="image-attach-body"><a href="/dp/node/33"><img src="http://thecenterofthenet.com/dp/sites/default/files/images/CRW_0008.small preview.jpg" alt="Chinese Businessman Reading Paper in the back of Mercedes" title="Chinese Businessman Reading Paper in the back of Mercedes"  class="image image-small preview " width="333" height="500" /></a></div>
<!-- google_ad_section_end -->  </div>

Id like to wrap my body text around the picture... but I cant find the mage-attach-body css file to change it!

This is so simple yet so not easy... how how hwo?

[SITE INTRO][2] Why Re-Create an Open Learning Resource @ TheCenterOfTheNet (Mission Statement) Part 2

decibel.places’s picture

decibel.places commented

When I am working on css I ALWAYS use Firefox with the Firebug and Web Developer plugins

Use Firebug > Inspect to select the element you want to edit, to check its inherited css properties

Use Web Developer > Edit CSS to edit the css file(s) - you will see the effects of the styles immediately, but don't forget to save and upload the file.

I usually append my additional/custom css to the end of the theme's style.css file. That is usually the last css file loaded, so my styles will override any previous declarations. Also, the custom styles are collected in one place and easy to preserve when upgrading.

REMEMBER TO SAVE AND UPLOAD THE FILE WITH THE NEW STYLES!

~are you netsperienced? /\_][_][_/\ Reliable Web Hosting - cheap!

~are you netsperienced?
♥ follow me @decibelplaces ∞

AntiNSA’s picture

AntiNSA commented

ok I will download it now and try ... thanks

[SITE INTRO][2] Why Re-Create an Open Learning Resource @ TheCenterOfTheNet (Mission Statement) Part 2

decibel.places’s picture

decibel.places commented

Once you have a nice css layout in Firefox, don't be surprised if it looks different in IE7 and or IE6 and Opera and Safari and other browsers.

Understanding css, from the tutorials posted above, will help. I am often able to create cross-browser css by proper selection of the position: property.

If all else fails, create a separate stylesheet for IE, most Drupal themes already do this if you examine the page.tpl.php file in the theme directory you will see something like (from the standard Garland theme):

    <!--[if lt IE 7]>
      <?php print phptemplate_get_ie_styles(); ?>
    <![endif]-->

which prints a function to include separate stylesheet(s) for IE6 and earlier...

it takes patience, but until there is consistent cross-browser rendering (if ever!) adjustments will be necessary....

~are you netsperienced? /\_][_][_/\ Reliable Web Hosting - cheap!

~are you netsperienced?
♥ follow me @decibelplaces ∞

AntiNSA’s picture

AntiNSA commented

Im no pro... but I can understand the css.... just tracking everythign down in drupal and where to put it, what to call it and how to reference it is the killer .... I am going through my list of open windows and will try firefox combo you mentioned soon.

[SITE INTRO][2] Why Re-Create an Open Learning Resource @ TheCenterOfTheNet (Mission Statement) Part 2

decibel.places’s picture

decibel.places commented

Firebug will tell you the css filename and line number for an element. Use Inspect, click on the element in question, look in the right pane for all inherited styles and their source filenames.

Pay attention to the inheritances. If a style has been defined with div.classname and later also with p#idname, just resetting p#idname may not change anything, you may need to redefine the full inheritance path of specified styles: div.classname p#idname

Some people find it handy to edit the css right there in the Firebug css pane, but there are limits, I don't think you can add new style defs, just edit the properties of existing ones.

So I use Web Developer in conjunction - with Edit CSS you can select a file and edit it, view the results WYSIWYG, then save the file.

[edit]

Creating and including a custom stylesheet:

I have started putting my custom styles in a separate stylesheet, for easier editing and better separation.

Here is a Drupal book page about adding the custom stylesheet to your theme by editing the .info file. Basically, you need to add this line under the theme's style.css:

stylesheets[all][] = customfilename.css

I also recommend changing the name: and description: to differentiate your customized theme from the original (and the screenshot, too, if you want)

As stated above, I generally append my custom styles to the end of the theme's style.css file so that my styles are preserved when upgrading individual modules, and easy to transfer when changing or upgrading your theme.

(yes, this will work even if the style is defined in another stylesheet, as long as the style.css file is loaded AFTER the other stylesheet, and it is usually the last css file loaded...)

~are you netsperienced? /\_][_][_/\ Reliable Web Hosting - cheap!

~are you netsperienced?
♥ follow me @decibelplaces ∞

Jeff Burnz’s picture

Jeff Burnz commented

Lets reiterate a couple of important points raised in this post:

in the Firebug css pane... I don't think you can add new style defs, just edit the properties of existing ones...

This is true and an important point to remember.

For example, if the class .image-attach-body does not exist in any style sheet then it simply won't appear in Firebugs CSS pane - you need to add it to a style sheet (the above advice to use a custom style sheet for your own styles is very good advice indeed).

Just be sure to clear cache data on the performace settings page when-ever you make changes to your themes .info file.

On another note - the Section Targeting looks a little weird - why section target the Image but not the body content (the text)?

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
summit’s picture

summit commented

Hi,
Would be great if image module should have example css with all classes inside!
greetings, Martijn

drupal92037’s picture

drupal92037 commented

I need a clarification: in the above discussion, are people attaching an image to a node using the "Image Attach" module, and then modifying the CSS?

But is there a way to insert images into a "page" content type and have text wrap around it? There must be some module that lets you do it? (Rather than having to modify CSS?)

Thanks.

WorldFallz’s picture

WorldFallz commented

There are several that will set the css for you-- which you use depends on what image modules you're using. For example, img_assist works with the image module.

drupal92037’s picture

drupal92037 commented

Thanks WorldFallz. Sorry for being slow but let me get this straight... the "image_assist" module will let me insert any number of images into a page that I am creating? Does it let me do that even if I don't have any WYSIWYG editors installed?

What are some other modules that let me insert images inline?

Thanks.

WorldFallz’s picture

WorldFallz commented

The module is http://drupal.org/project/img_assist -- and yep it works without a wysiwyg editor. Some others I can think of off the top of my head are image_attach (part of the image module), imce, image_browser, and filefield_insert. There are probably others as well.

drupal92037’s picture

drupal92037 commented

I've tried "image attach" module, and it wasn't obvious to me how it exposes the CSS to you so you can customize it.