align image left, text underneath

[Ant]

I'm not sure why I am stumped on this.

 

I need to align an image LEFT thats within a floated left div.

 

I want my text thats after the image to be underneath WITHOUT using <br> or empty returns. (per Andreas note in a previous post)

 

I do not want the image to be in a div.

 

I tried using a class of Float_left but the text (<p>) after it lines up next to it. I cant get the text to run underneath with some space between the two.

 

I tried a bunch of things but cant get the class to do it's job.

 

BTW in dreamweaver should I be using the image ALIGN property? I figured I should be using css instead, thus my reason for wanting to use a class to define this image style of align left and nothing to the right.

 

Ant

[Andrea]

Add a 'clear: both' to the p following your floating image.

 

Use CSS to align your image.

[Ant]

Add a 'clear: both' to the p following your floating image.

 

Use CSS to align your image.

 

 

Doesn't that mean that I have to add that style to <p> whenever I need it, i.e. randomly.

 

Shouldn't the clear after the image follow the image style, thus my want for a class that is created for an image thats aligned left and cleared right.

 

I guess what I'm saying is, isn't it easier to create an image class that specifies the desired effect rather than telling my <p> tag to do it each time I want that effect to occur.

 

Ant

[Andrea]

I'm not sure what you mean by image floating left and cleared right. Do you want nothing next to the image? Maybe floating isn't the best approach - but again, I'm not clear on what you're after.

 

When things float, the do not really take up space, so if you want stuff following to fall after the floats, it has to be cleared. Just create - in your CSS - a

 

.clear {clear: both;}

 

and then, every time something needs to clear a float, just give it class="clear" = in this case your <p> or whatever you find that needs to fall behind a float.

[Ant]

Andrea, thanks, I understand now.

 

I guess I thought it made more sense to create a class that effected the image and told the image to align left and have no images, text etc on the same line to the right of it.

 

Basically i am creating some headline text images in illustrator and then using <p> after it etc.

 

SO I wanted my headline IMAGE to have nothing to the right of it.

 

I got the .clear class to work so I guess it's just as easy to use that when I want a "return" so to speak after an element.

 

It's just backwards to me to tell the element after to "not be on the same line" as the element before it.

 

Ant

[Andrea]

Using an image for a headline is not a good idea, unless there's also text involved - if the image doesn't show, there's nothing to be read.

 

But if you're using an image as a headline, then there is no point in floating it.

[falkencreative]

Maybe this is a silly question (maybe I'm not understanding things correctly?), but if you simply want an image followed by text, can't you do this:

 

<div> //I'm assuming your content is in a div, and that div has "text-align:left;"
<img src="" alt="">
<p>content here...</p>
</div>

Assuming I am understanding what you want to do, you shouldn't need to mess with floats, alignment or clearing -- as long as you use "text-align:left" on the div, the image will appear on the left (you don't need to add floats or alignment to the image), there won't be anything else to the right of it, and the text will appear below the image.

[Ant]

Falken, this is what I have(a cut and paste from PART of the content). Maybe I'm making it harder than it needs to be. However now that I am getting down to the refinement process and trying to anticipate all my possible content variations, I am working on my text formating spacing etc..: This is where I am realizing there are tons of ways to handle things using css, but don't really know the "right" way etc... For instance should I add margins to everything, or do I add my margins to only some elements to create space. I have since added this to my <p> to begin using margins/padding to my text. I read that I need to define my <p>'s margins etc to allow me to space other things properly.

 

 

margin: 0em;

padding-top: 4px;

padding-right: 4px;

padding-bottom: 4px;

padding-left: 4px;

 

 

Here's part of the code. The float_left div holds all my content below my header. It also contains a float right column.

 

<div id="float_left">

 

 

<img src="images/shopnews.jpg" alt="shop news" class="floatme_left">

<h2 class="clear">Casting Clinics</h2>

<p class="date">(April 28, 2010)</p>

</div>

 

 

Here's the css:

 

.floatme_left {

float: left;

}

 

.clear {clear: both;

}

 

.date {

font-family: Arial, Helvetica, sans-serif;

font-size: 15px;

color: #993300;

text-align: left;

 

 

 

BTW, Andrea, I am using some headlines ( two - three words long at the most) as IMAGES so that I am not restricted in my design to using the helvetica/georgia font families. I realize it wouldn't be right to use images for a lot of content(text) but need a few to add interest to the design. I thought if I added the alt="" value it would be ok. Is that not correct??

 

Thanks

Ant

Edited June 22, 2010 by Ant

[falkencreative]

For this section, if I understand what you are wanting to do correctly, you should be drop the float:left and clearing classes:

 

<div id="float_left">
<img src="images/shopnews.jpg" alt="shop news">
<h2>Casting Clinics</h2>
<p class="date">(April 28, 2010)</p>
</div>

 

There shouldn't be any need for that -- the h2 should automatically drop to the next line below the image if you don't use float:left on the image.

[Ant]

ok, but if I do that then the image centers itself. Then I can only get the image to align left by doing this:

 

<img src="images/shopnews.jpg" alt="shop news" align="left"> I did that by clicking on the align pallet in DW

 

For some reason I cant get the CLASS to align left on that image when using TEXT ALIGN in DW.

 

Ant

[falkencreative]

So are you centering the text within "<div id="float_left">"?

[Ant]

no.

 

I figured I would treat each piece of content in the floatme_left div individually since I didn't know if everything in that div would be aligned left.

 

It's this sort of thing that I'm talking when I say theres many ways to do different things, and I'm not sure which way to do them.

 

 

 

Ant

[Andrea]

It would be best if you could load this up somewhere and give us a link - it's always hard to understand what's going on when we cannot see EVERYTHING - and that is all the HTML, all the CSS, and all the images.

[Ant]

Andrea, I will do that as soon as I can.

 

Maybe that will help.

 

Thanks

Ant

[Ant]

ok heres the page.

 

All the images and text are dummy content.

 

http://www.streamsofdreams.com/testing_testing/testme.php

 

Ant

[falkencreative]

My personal call would be to add text-align:left to #left_main. No, perhaps not everything in the div will be aligned left. But I'm guessing at least 90% will be, and you'll save yourself some coding if you don't have to add text-align:left or float:left to all of the elements that need to be aligned left within #left_main.

[Andrea]

NOW I can see

 

You're missing

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

You still have a lot of redundant coding. Example, your grey_bar_info div has nothing in it, yet the CSS specifies all kinds of font attributes

 

Adding width to a wrapper does not center it - what centers it is the right and left auto margin (but it does require a width).

 

<br>s really are line breaks only-if you need space, use margins or padding.

 

<p> </p> <!--needed--> is never needed - see above

 

This

<strong>  |</strong> 

is also pretty pointless.

The less code you have, the easier it is to work in things. Look into shortcuts, etc. And see where you can combine divs - Example, just clear your footer, no need to insert an extra clearing div.

Out of time for the moment, I'll look some more later.

[Ant]

NOW I can see

 

You're missing

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

You still have a lot of redundant coding. Example, your grey_bar_info div has nothing in it, yet the CSS specifies all kinds of font attributes

 

Adding width to a wrapper does not center it - what centers it is the right and left auto margin (but it does require a width).

 

<br>s really are line breaks only-if you need space, use margins or padding.

 

<p> </p> <!--needed--> is never needed - see above

 

This

<strong>  |</strong> 

is also pretty pointless.

The less code you have, the easier it is to work in things. Look into shortcuts, etc. And see where you can combine divs - Example, just clear your footer, no need to insert an extra clearing div.

Out of time for the moment, I'll look some more later.

Thanks Andrea.

 

I must have missed some empty <p> </p>

 

Concerning the wrapper: I have the width specified, so I am missing your point.

 

Concerning the strong attribute. How else would I add bold text to a word in a set of 2 words, or in this case a bolded "|" Adding a bold class to the particular character seems like the long way around.

 

I originally planned to have text in the gray bar, so I left the css for it.

 

Ant

[Andrea]

About the centering of the wrapper, I was referring to this comment

#wrapper {
min-height:100%; /* gives layout 100% height */
width:1000px; /* centers #wrapper */
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

and like I said, what centers it is the right/left auto margin, not the width.

 

And with the strong and non-breaking space, I messed up the copy-paste - I was aiming for

<strong>  |</strong>

and apparently, I did not notice the | - only saw the non-breaking spaces. So scratch what I said. You could, maybe, just bold all the text in the footer (via CSS to the #footer) - unless there's a specific reason you just want the |s bolded.