Image postioning and text

almichev · 30 Aug 2009 at 22:28

HI. I'm trying to position an image 800 pixels down the screen with some text directly underneath it. No prob positioning the image using 'margin:800px', however this causes the text to appear 800 pixels underneath the image. :confused:

Am new to this so any help gratefully appreciated.

Russinating · 30 Aug 2009 at 23:18

Apply the CSS to a div instead containing both the image and the text?

Code:

.stuff {
top:800px;
}

<div class="stuff">
<img src="img.jpg"><br>This is stuff
</div>

Not tested, and of course this'll need to be centered.

almichev · 30 Aug 2009 at 23:52

Trying it now. What does ".stuff" represent?

DaveOwl · 30 Aug 2009 at 23:54

That would be the CSS class .stuff.

Any tag with the class "stuff" will have that style applied to it. You can obviously name it anything you want.

almichev · 31 Aug 2009 at 00:06

Thanks a lot. Will try it in the morning. That 'tag' looks like a v useful function.

Russinating · 31 Aug 2009 at 00:08

If you don't know about CSS classes it's definitely worth reading a tutorial or two

almichev · 31 Aug 2009 at 00:40

Just been doing that and it seems to make sense even when half asleep. Will let you know how it goes :cool:

Broadie · 31 Aug 2009 at 15:11

Work through all the tutorials here:

http://css.maxdesign.com.au/index.htm

Very good, very clear, very easy and very instructive CSS tutorials

xiphrex · 31 Aug 2009 at 15:45

almichev said:
HI. I'm trying to position an image 800 pixels down the screen with some text directly underneath it. No prob positioning the image using 'margin:800px', however this causes the text to appear 800 pixels underneath the image.

Am new to this so any help gratefully appreciated.

Add margin-bottom:0; to that.

As margin works like this:

margin: top right bottom left;

So margin:800px you are actually telling it to have 800px all the way around the image.

almichev · 31 Aug 2009 at 20:41

xiphrex said:
Add margin-bottom:0; to that.

As margin works like this:

margin: top right bottom left;

So margin:800px you are actually telling it to have 800px all the way around the image.

That works :cool:

Thanks.

Now have 4 images in a line 800 pixels down. Got to figure out how to centre them on the page now.

almichev · 31 Aug 2009 at 20:43

Broadie said:
Work through all the tutorials here:

http://css.maxdesign.com.au/index.htm

Very good, very clear, very easy and very instructive CSS tutorials

Will do. Thanks.

simon.deighton · 31 Aug 2009 at 22:36

For centering every site I build the best way I find is to use a container div and place everything inside

#container {
margin:0 auto;
padding:0;
width:800px;
}

xiphrex · 31 Aug 2009 at 23:08

almichev said:
Now have 4 images in a line 800 pixels down. Got to figure out how to centre them on the page now.

Just out of interest why are they 800px down the page?

To centre them in horizontal Im another who likes to use margin auto, so yours would be margin:800px auto 0;

You need a doctype on your page for this to work in IE (I use strict, but its up to you I guess).

almichev · 1 Sep 2009 at 11:57

simon.deighton said:
For centering every site I build the best way I find is to use a container div and place everything inside

#container {
margin:0 auto;
padding:0;
width:800px;
}

That almost works except it centers my images vertically when i need them in a line horizontally. Here's the code:

div.img
#container {
margin:800px auto 0;
margin-bottom:0;
margin-left: 0;
margin-right: 0;
border:1px solid #0000ff;
height:240;
width:157;
float: left;
text-align:center;
}
div.img img
{
display:inline;
margin:0px;
margin-bottom:0;
margin-left: 0;
margin-right: 0;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}

almichev · 1 Sep 2009 at 11:58

xiphrex said:
Just out of interest why are they 800px down the page?

To centre them in horizontal Im another who likes to use margin auto, so yours would be margin:800px auto 0;

You need a doctype on your page for this to work in IE (I use strict, but its up to you I guess).

I have a background image and a space for other images to start 800 pixels down.

doctype? This is all totally new to me. If I had money I'd pay someone to do it as it doesn't come naturally.

Thanks for all help and suggestions so far.

suarve · 1 Sep 2009 at 13:59

almichev said:
Thanks a lot. Will try it in the morning. That 'tag' looks like a v useful function.

Read the w3schools tutorials