can anyone direct me to a decent tutorial for the positioning of divs etc

Evilreg · 28 May 2011 at 19:03

hi guys

so i have been working on my site for a while now www.premierplantproducers.co.uk

its coming on ok im currently trying to re build the footer so that its not an image for better seo as advised in an earlyer post thanks guys for the info.
what im trying to do is use the image.gif as a background then create 2 divs within the footer on with centered text and one with text aligned to the left to create the same effect as the current image footer but improve my seo as mentioned before.

im using dreamweaver cs4 but i seem to be missing something im struggling to position dives within the footer itself im thinking i should take some extra time to try and understand css a bit better.

could anyone suggest a decent tutorial that is easy to understand or at least in bite size chunks.

thanks in advance

FabienO · 28 May 2011 at 19:58

w3schools or htmlgoodies.

Learn about float's and position's.

ringo747 · 28 May 2011 at 20:00

It's maybe worth checking out the 960 Grid System for this and other projects.

http://960.gs/

triggerthat · 29 May 2011 at 10:50

Evilreg said:
hi guys

so i have been working on my site for a while now www.premierplantproducers.co.uk

its coming on ok im currently trying to re build the footer so that its not an image for better seo as advised in an earlyer post thanks guys for the info.
what im trying to do is use the image.gif as a background then create 2 divs within the footer on with centered text and one with text aligned to the left to create the same effect as the current image footer but improve my seo as mentioned before.

im using dreamweaver cs4 but i seem to be missing something im struggling to position dives within the footer itself im thinking i should take some extra time to try and understand css a bit better.

could anyone suggest a decent tutorial that is easy to understand or at least in bite size chunks.

thanks in advance

Why are you bothering to build a site from scratch? WordPress will do what you want to go.

sharkkk · 29 May 2011 at 12:20

triggerthat said:
Why are you bothering to build a site from scratch? WordPress will do what you want to go.

A slightly ironic statement on a forum primarily filled with custom PC builders?

Maccy · 29 May 2011 at 12:37

The website doesn't seem to load for me?

triggerthat said:
Why are you bothering to build a site from scratch? WordPress will do what you want to go.

This is a borderline trolling comment, don't do it again please.

Evilreg · 29 May 2011 at 14:11

thanks for the info fabian and ringo il take a look

Evilreg · 30 May 2011 at 17:35

Maccy said:
The website doesn't seem to load for me?

http://www.premierplantproducers.co.uk/

i put another link in if you could check it and let me know if its still not working for you i would appreaciate it and if its the case and it still dosent load could you let me know what browser your using so that i know were to start looking for a fix.

thanks maccy

Maccy · 30 May 2011 at 18:12

Loads fine now, perhaps it was a connection issue?
I would also think about changing the image slideshow to a JQuery one. I've just learnt about them and they're easy to pick up and compatible with more devices (iPhone for example).

Evilreg · 1 Jun 2011 at 09:54

thanks for making time to check it

a few people have mentioned this j query do i need any special programs to generate this.

which tutorial did you learn with was a w3 schools one?
i may look into this in a few weeks time as i have some time of work due.

thanks again

ringo747 · 1 Jun 2011 at 10:30

For jQuery you just upload the source javascript files to your web server and then add a reference in your code. The jQuery code you write will then call this library.

redeye_uk · 1 Jun 2011 at 12:16

OP, not 100% I understand what you mean, but i think this is what you are after? (not tested)

I'm not sure why you have the gif as a background image AND an <img>. You should remove the <img> and just use the background image. I would also look at making the image a jpg if not using transparancy.

Oh, and :eek:

at some of the HTML. Genuine question - why do people use DreamWeaver?

HTML

Code:

<div id="footer">
  <div class="myClass">
    <p>lorem ipsum</p>
  </div>
  <div>
    <p><a href="#">Link to our terms and conditions</a></p>
  </div>
</div>

CSS

Code:

#footer {
  background-image: url("images/ppp-footer.gif")
  margin: 0 auto;
  position: relative;
}

.myClass {
  position: absolute;
  top: 10px;
  left: 10px;
}

Maccy · 1 Jun 2011 at 14:35

After some advice here I axed Dreamweaver and use Smultron (free). So much clearer!

Evilreg · 1 Jun 2011 at 22:35

I'm not sure why you have the gif as a background image AND an <img>. You should remove the <img> and just use the background image. I would also look at making the image a jpg if not using transparancy.
i was fiddling l8 last night thanks for spotting this sorted it now will also change to a jpeg

Oh, and :eek:

at some of the HTML. Genuine question - why do people use DreamWeaver?
dreamweaver came with the cs4 package it seemed to be the thing to use but i have to say i am finding it tricky thanks for the code il have a play about with it when im a bit more awake lol

Tripnologist · 1 Jun 2011 at 23:07

redeye_uk said:
Genuine question - why do people use DreamWeaver?

I use it because I LOVE the way I can open an html file and it will automatically put all the linked external files into tabs for easy editing.

DW really isn't that bad as a text editor. Especially since they finally put in jquery code assist.

http://tripnologist.com/dw.png

tronath · 3 Jun 2011 at 19:26

I've used this one: http://www.barelyfitz.com/screencast/html-training/css/positioning/

sharkkk · 3 Jun 2011 at 21:23

Tripnologist said:
I use it because I LOVE the way I can open an html file and it will automatically put all the linked external files into tabs for easy editing.

DW really isn't that bad as a text editor. Especially since they finally put in jquery code assist.

http://tripnologist.com/dw.png

Oh definitely, it isn't that bad as a text editor. Just the annoying habit of people using the wysiwyg features. And the fact that paying a few hundred quid for something that 'isn't that bad' isn't so great!