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
Attachment | Size |
---|---|
css design1.jpg | 54.98 KB |
Please read the forum
Please read the forum stickies on how to ask for help.
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.
You're getting there, yes I
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.
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
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.
Thanks
another update
Sorry made a duplicate posting, ignore this posting
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
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> </h1> <img src="images/VIDEO-IMAGES.jpg" width="200" height="200" alt="vid1" /> </div> <div id="vid2"> <p> </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.
Stop previewing in DW, it's
/crud, doublepost
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 ?
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; }
do i perhaps need to set the
do i perhaps need to set the clear property ?
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.