How does one float an image to the top of the Web page

HTML & CSS
1

Hi,

How does one float an image to the top of the Web page?
And keeping in mind that the page may have fotos that are already floated to the right, left & bottom.

Here is a sample Web page with fotos floated Right, Left & Bottom already:

FYI, when I use this CC code to float images to the Top:

.image-top {
	float: none;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 15px;
	margin-bottom: 15px;
	border: 1px solid black;
	padding: 3px;
	}

And this in the Web page:

if ($location == 'top') {
	$image_body_top = '<div class="image-top">' . $image_code . '</div>' . $image_body_top;
	}

The whole page is messed up as here:

Thanx for the help.

2

Could you post an image of what you’re trying to get? Nothing fancy, but I’m not 100% sure how you want it to look. Did you want the images to be just, three in a row?

3

Hi,

Well a sample image of photos on Top of the page would look like the photos that are currently at the Bottom of the page, but of course on Top. Here again:

FYI, we offer a free Blog service and people are allowed to upload photos to their Blogs. The placement of the photos in a Blog are controlled via CSS float feature. The current float that we have for the Top is not looking good, so I am working on replacing it with a new float that looks good. BTW, if you look at the above Web page sample with IE and Chrome, the photos are placed correctly but if you look at it via FF then the photos do not look placed so correctly. As part of answering what to do in regard to the Top float if you could answer what is wrong with FF in this regard that would be highly appreciated too.

ThanX.

4

ok I had only seen the page in FF so I’ll take a look later today.

5

Hi,

On this page you have removed the float form the block.


[LEFT][COLOR=#6666FF].image-top[/COLOR] [COLOR=#66CC66]{[/COLOR]

   [B] [COLOR=#000066]float[/COLOR]: [COLOR=#993333]none[/COLOR];[/B]

    [COLOR=#000066]margin-left[/COLOR]: [COLOR=#993333]5px[/COLOR];

    [COLOR=#000066]margin-right[/COLOR]: [COLOR=#993333]5px[/COLOR];

    [COLOR=#000066]margin-top[/COLOR]: [COLOR=#993333]15px[/COLOR];

    [COLOR=#000066]margin-bottom[/COLOR]: [COLOR=#993333]15px[/COLOR];

    [COLOR=#000066]border[/COLOR]: [COLOR=#993333]1px[/COLOR] [COLOR=#993333]solid[/COLOR] [COLOR=#000066]black[/COLOR];

    [COLOR=#000066]padding[/COLOR]: [COLOR=#993333]3px[/COLOR];

    [COLOR=#66CC66]}[/COLOR]
[/LEFT]

Then you have the block third is sequenece here:


<div class="image-float-right"><a href="user_images/24_43161_foto1.jpg" rel="lightbox[Zoo]" title="Panda - Image right" class="aimg"><img src="user_images/24_43161_foto1.jpg" width="120" height="130" border="0"></a><br>
    <div class="image_caption_lbox"><a href="">Panda - Image right</a></div>
</div>

<div class="image-float-left"><a href="user_images/24_43161_foto2.jpg" rel="lightbox[Zoo]" title="Panda - Image left" class="aimg"><img src="user_images/24_43161_foto2.jpg" width="120" height="130" border="0"></a><br>
    <div class="image_caption_lbox"><a href="">Panda - Image left</a></div>
</div>

<div c[B]lass="image-top[/B]"><a href="user_images/24_43161_foto6.jpg" rel="lightbox[Zoo]" title="Landscape - Top" class="aimg"><img src="user_images/24_43161_foto6.jpg" width="120" height="130" border="0"></a><br>
    <div class="image_caption_lbox"><a href="">Landscape - Top</a></div>
</div>

That means that you have two floated images above with one floated left and one floated right. The image-top has no float but will wrap between the floats as per normal behaviour.

However the borders and background on image-top will slide under the floats above until they reach the containing block because floats are removed from the flow. Only the foreground gets shifted to make room so now your border on image-top will appear to surround the whole top row including the 2 other floats.

If you want image-top to be alongside the other two image2 then you would need to float it again.

If you want just images at the top and the text underneath then you would need to set a div around your text and set it to clear:both or the text will wrap into any space between the images.

All you can do with floats is float them left or float them right from the position they find themselves in the html. They cannot float up or down as such unless they are alongside other floated content.

I’m not quite sure of the effect you want but if you want a row of images along the top then the images would need ot be first n the html and floated and then you would set the text underneath to clear otherwise it will always try to wrap.

I don’t think that’s what you had in mind so I may be missing the main point somewhere along the way :slight_smile:

BTW this page was looking the same to me in Firefox and Chrome which may have something to do with my lack of understanding of the problem.

6

Hi,

Actually I should correct myself and tell you that images look Ok under FF too here where the floats are applied correct:

So all I need is the instructions for how to add the images that re to display at the Top of the page.

ThanX

7

Hi Paul,

1st I should tell you that I correct myself and that the images are displaying (floating) OK under FF too when the floats are applied correctly, that is here:

So all I need are the instructions for how to allow users to display their photos on the Top of the page, as they can currently do so with images on the Right, Left & Bottom of the page. I did read your comments throughly but cannot figure out from them what I should do exactly to result in Photo(s) to be displayed at the Top of the page, which is to display exactly how the Photo(s) currently are displayed at the Bottom of the page.

Just a bit of a background: we offer a free Social Networking service as part of which people can have a free Blog, and to which they can upload fotos to
and during upload designate whether a Photo should be displayed Right, Left & Bottom and now we want to allow them to also specify Top. OTN, you can sign up for your own free account and try to upload a foto and see what I mean.

ThakX

8

Hi,

If you want the image that you have called “top” in this page to be in the central position at the top then you would need to give it a width and use auto margins to center it.
e.g.


.image-top {
    border: 1px solid black;
  [B]display: block;[/B]
    float: none;
  [B]margin: 15px auto;[/B]
    padding: 3px;
   [B]width: 120px;[/B]


}

That assumes that you can control the html position as the left and right floats would have to come first in the html should there be any.

If you can’t apply a width then it may be awkward to do although we could probably use display:inline-block but that would mean making other extra tweaks also.

Apologies if this is still wide of the mark - I may be overthinkng this :slight_smile:

9

Hi,

Your suggestion is not working.
As you can see here:

the fotos rather lining up next to each other are stacking up on top of each other.

Note:
1- I removed all the other fotos so that we can just get the Top working and can then worry about other positions which is already working OK.

2- I had to set the width of your suggestion to Auto since we do not know what width these fotos will have. Although even if I set the foto to your quoted 127 they are still not ligning up next to each other.

So what to do to get the fotos placed on Top line up next to each other?
As they do when they are placed at the bottom as you can see here:

ThaNX,

10

The auto-margining centering doesn’t work if you have width: auto, so that’s going to be a problem. Right now you’re seeing what divs will do by default: they’ll stretch as wide as they can and they’ll force a newline after them so the next box with an image has to come after the first.

If you don’t know the width then you might not know the heights either. That throws a lot of margin techniques out the window.

But, I notice your markup is already all tables. So why not use more. A single table row holding the three images. The row will be as tall as the tallest image. The three td’s would be 30% wide each.

Because to use floats or display: inline-block, I would want to change your current markup to make it work better. For example, there’s nothing around your loose text that start after the images, so there’s nothing to clear any floats and nothing wrapping the three floats to enclose them.

If you wanted, for now, you could see if you like the result of taking those image-top divs and floating all three and setting their widths to 30% or so.

11

Hi,

Perhaps Stomme’s solution above would be easier and output those images into a table.

To have auto widths you could use inline-block but then the element would line up much the same as if it was floated although that doesn’t seem to be what you wanted exactly.


.image-top {
    border: 1px solid black;
    [B]display: inline-block;[/B]
    float: none;
    margin: 15px auto;
    padding: 3px;
    width: auto;


}

* html .image-top{display:inline}/* ie6*/
*+html .image-top{display:inline}/* ie7*/

That would also have the same effect as allowing the following text to start to wrap around so you would need to ensure that the following text is cleared which would mean putting it inside a p container (which is should be anyway).

Perhaps a table may be a better solution if it fits in your scheme of things.

12

I am not up to date on how many people use FF2, but you might want to consider putting display:-moz-inline-box; in there to support FF2.

13 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>Floatimg Images At Top</title>
</head>
<style type="text/css">

.image-top ul{list-style: none;
padding: 0; /* Feel free to adjust margins, padding & position */
margin: 0;
}
.image-top li{float: left; /* try also "right" to see the effect */
margin: 0 0.15em; /* Horizontal spacing between each li element. Can be adjusted. */
}

</style>
<body>
    <div class="image-top">
        <ul>
            <li><a href="user_images/24_43161_foto6.jpg" rel="lightbox[Zoo]" title="Landscape - Top" class="aimg">
                <img src="user_images/24_43161_foto6.jpg" width="120" height="130" border="0"></a>
                <div class="image_caption_lbox">
                    <a href="">Landscape - Top</a></div>
            </li>
            <li><a href="user_images/24_43161_foto7.jpg" rel="lightbox[Zoo]" title="Tiger Pup - Top" class="aimg">
                <img src="user_images/24_43161_foto7.jpg" width="120" height="130" border="0"></a>
                <div class="image_caption_lbox">
                    <a href="">Tiger Pup - Top</a></div>
            </li>
        </ul>
    </div>
</body>
</html>
14

I just wanted to say that Thanks for all your answers and that I have not been ignoring them. I have been busy with other urgent developments that came up and what time I spent with your suggestions so far has not yielded desired result. So I am going to try the Table for Top suggestion, will let you know if it will work.

FYI, the challenge of this job is that these fotos will be uploaded by the users of our free social networking service, so we have NO idea or control what the width or heights will be. To be exact we do have control over width or heights if they choose to post the fotos with LightBox effect and not otherwise.

Thanks anyway & over 4 now :slight_smile:

15

ok - thanks for the update and hope you get it working the way you want.:slight_smile: