13 replies [Last post]
webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

Hi all

im customisng a template i have found, however im struggling with positining two images in the centre column with text above it. you can see what i want to achieve in the file css design1.jpg.

I have looked at the centre column css and this is what it says

#centerColumn {
margin:0 0 0 180px;
padding:0;
background-color:#ffffff;
background-image:url(images/bg-cogs.jpg)

Can someone advise as to what i need to add here please.

Thanks

AttachmentSize
css design1.jpg54.98 KB
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Please read the forum

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

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

hi again

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You're getting there, yes I

You're getting there, yes Laughing out loud

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.

Verschwindende wrote:
  • CSS doesn't make pies

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

hi

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

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

quick update

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.

Smile

Thanks

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

another update

Sorry made a duplicate posting, ignore this posting

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

another update

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;
 
}

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Stop previewing in DW, it's

Stop previewing in DW, it's not a browser, never was, never will be, nobody browses the internet using DW, code in it by all means but use a real browser for testing.

The labels for the videos should be within the same div as the image/video itself. Also, don't use BR tags - if it's a separate paragraph, use a new paragraph tag.

  <div id="text">
    <p>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. <br />
      <br />
 
      Ut a diam risus,   nec lobortis tortor. </p>
</div>
<div id= "label1">  Introduction from Mr Carl Williams Patel </div>
 
  <div id= "label2"> Overview of the Health Check Process</div>
</div>
 
 
 
<div id="videos">  <div id="vid1">
 
 
  <h1>&nbsp;</h1> <img src="images/VIDEO-IMAGES.jpg" width="200" height="200" alt="vid1" /> </div> 
 
 
<div id="vid2">
 
  <p>&nbsp;</p>
  <img src="images/VIDEO-IMAGES2.jpg" alt="" width="200" height="200" /></div>         
 
 
 </div>

I would write as:

<p>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.</p>
<p>Ut a diam risus, nec lobortis tortor. </p>
 
<div class="video">
  <h4>Introduction from Mr Carl Williams Patel</h4>
  <img src="images/VIDEO-IMAGES.jpg" width="200" height="200" alt="vid1" />
</div>
 
<div class="video">
  <h4>Overview of the Health Check Process</h4>
  <img src="images/VIDEO-IMAGES-2.jpg" width="200" height="200" alt="vid1" />
</div>

that's all the HTML you should need.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Stop previewing in DW, it's

/crud, doublepost

Verschwindende wrote:
  • CSS doesn't make pies

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

Hi Thanks for that, thats

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 ?

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

hi i've been following your

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;
}

webster12345
webster12345's picture
Offline
Regular
none
Last seen: 10 years 4 weeks ago
none
Timezone: GMT+1
Joined: 2010-07-23
Posts: 25
Points: 35

do i perhaps need to set the

do i perhaps need to set the clear property ?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I wouldn't use position, I'd

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.

Verschwindende wrote:
  • CSS doesn't make pies