positioning two images in centre column with text above each image

Please read the forum stickies on how to ask for help.

Ok, i have created a free ftp account so i can show people what im trying to do below is the link the page

http://demo.webfreehosting.net/index1.html

This is the link to the style sheet

http://demo.webfreehosting.net/style.css

I would like to be able to control where i place two images in the content column, but im not sure im doing this correctly. i think i need to create two div tags one for each element and then use the positining feature of css to place them, does that sound right ? i also need to learn how to control the position of the text('text for video 1 goes here'), ideally i would like the small text to be above the video images.

I do hope this makes sense, but please let me know if it doesnt, meanwhile im trying to look through some tutorials.

You're getting there, yes

I would do something like this:

<div class="video">
  <h3> Video title </h3>
  <p><img src="images/VIDEO-IMAGES.jpg" width="200" height="200" alt="video 1" /></p>
</div>
 
<div class="video">
  <h3> Video title </h3>
  <p><img src="images/VIDEO-IMAGES2.jpg" width="200" height="200" alt="video 1" /></p>
</div>

Then use floats to get them side by side, and float clearing to get the rest of the site to display underneath.

Thanks for the suggestion. i've managed to get the pics moved, so they are next to one another. See below

http://demo.webfreehosting.net/index1.html

I just have a question about using text and div tags. i would like to align the text i have which is just below where it says centre column to align with the side of video 1 image. So i have created a div called text and placed the text in there, now im not sure which css properties i need to change so i can indent both from the edge of the content container by 50 pixels ?

Ant advice most welcome

Hi all

Again not sure this is right, but i have used padding under box in css rule definition to position the images, i did try and use the positioning section in the css rule defintion, but it did not move my image. At the momment im going to try and align all my images using padding unless someone who knows more than me can help.

Thanks

Sorry made a duplicate posting, ignore this posting

hi all

I'm making progress, here is the latest link to the site im practicing using css

The specific problems im having right now are under the check link, the postion of video 7 should be under video 5, but it keeps jumping to under video 6. Even though in dreamweaver it looks fine.
this is the code for from the style sheet. The whole style sheet can be found here . i have picked out the bits that are directly related to the divs that im having trouble with.

http://demo.webfreehosting.net/check.html

#container #centerColumn #videos #vid7 {
	float: left;
	width: auto;
	position: relative;
	height: auto;
	top: 360px;
	left: 150px;

I'm still having problems getting controlling the text, one of the problems is when i view the position of the text in dreamweaver
it looks fine but then when i view preview in the browser, words have moved around. So for example in dreamweaver the words look like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus consequat commodo.
Fusce vel tortor ac leo feugiat dignissim nec eu ipsum. Aenean purus ligula, varius ac ornare
scelerisque, facilisis sit amet dui.

but in the the browser it looks like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus
consequat commodo. Fusce vel tortor ac leo feugiat dignissim nec eu
ipsum. Aenean purus ligula, varius ac ornare scelerisque, facilisis sit
amet dui.

Not sure how i go about fixing this.
http://demo.webfreehosting.net/index1.html

Another odd thing im trying to work out, is why when i mouse over my images in dreamweaver while in editing mode i get a yellow tool tip box that tells me the height and width are different for each of div containers on the homepage, even though they have both been set to auto, but in the css rule they are both set to Auto, not sure where to go to fix this problem. here is the code for both
containers vid1 and vid 2

#centerColumn #videos #vid1 {
	margin: 0px;
	height: auto;
	width: auto;
	float: left;
	position: relative;
	left: 150px;
	top: 50px;
 
}
#centerColumn #videos #vid2 {
	margin: 0px;
	height: auto;
	width: auto;
	float: right;
	position: relative;
	right: 150px;
	top: 34px;
 
}

/crud, doublepost

Hi

Thanks for that, thats made life a lot easier.

i'm not sure if im supposed to use margins or position in the css rule to move the div around. What do you reckon ?

hi

i've been following your method of grouping the text and video placeholders together. however, i have become stuck on placeholder 6, see http://demo.webfreehosting.net/check.html
Although the link above is to the old code, it will give you an idea of where i want to place vid 6. At the momment i have placed video 4 and 5 like you explained. here is my code for 6 at the momment but it seems to position itself properly under placeholder 4

#container #centerColumn #vid6 {
	width: auto;
	height: auto;
	float: right;
	margin-right: 150px;
}

do i perhaps need to set the clear property ?

I wouldn't use position, I'd just use floats and margins to space them out. Float them all left, give them all the proper margins (eg left-margin equal to the space in the middle) then clear boxes 5 and 7 to start them on a new line.