[Simon Matthews]

That’s great, I have the icons in the right place now.

Yes it’s real fun to learn! I used to programme in assembly a long time ago on my Spectrum and I never thought I’d get back into it, but I just spent 3 weeks in hospital after a bike crash, only came out last Friday and am still in a lower leg and forearm cast, so to pass the time in hospital I decided to start reading about web design. That was a good move because I’m really enjoying it so far!

There’s one more problem I have with the page now though. In Chrome there is a small gap between the Unit 5 banner and the lower part of the page, though in design mode that gap is not there. You should be able to see the gap in the last screen shot I sent. How do I get rid of that gap?

Cheers!

[Simon Matthews]

Cool, the relative path did the trick!

I’ve attached a screenshot of the page so far.

Starting to look ok. How do I add a bit of space between the social media icons? Also, for some reason the Facebook icon is slightly higher than the YouTube icon, so needs to be moved down a little. Will I need to put each icon into a div of its own?

Here’s the CSS for the icons:

#social-media { float:right; width:20%; height:25px; margin:30px 20px 0 0; display:inline; }

Thanks for spending so much time on me!

[Simon Matthews]

Hi, here’s the CSS for the header div. It works fine in Design mode but not in Chrome:

#header { width:100%; height:141px;
background:url(‘/Images/Triangle Design & Media Web Banner.jpg’) no-repeat left top;

[Simon Matthews]

Hi,

I tried your coding and the page is looking ok so far in the design mode of Dreamweaver, but for some reason when I preview the page in Chrome the header background image is not there – it’s just blank. Any ideas what could be causing this?

Thanks.

[Simon Matthews]

Hi, thanks for all this!

Just need to clarify a few things:

1. Do you mean I should separate the logo text from the carbon fibre pattern that is directly behind the logo text? The thing with that is, the logo text casts shadows onto the carbon fibre pattern, so it’s all one design. Not sure if you meant this?

2. Did you include the main pale background image in this code? I mean the image that stretches the entire width and height of the page and is a light grey colour with clouds. This image is behind the main centred page.

I’m almost there!

Thanks.

[Simon Matthews]

Thanks, that sounds like good advice. I think I understand what you’re saying. I’ll have a go at laying the page out using that method instead.

One thing though, using this method of positioning elements, how do you position things on top of other things, such as with the social media icons on my page, which are positioned on top of the right hand side of the logo block? Incidentally, the logo, the grey area behind the nav bar, and the grey area down the bottom along with the paragraph and ‘check it out’ text, are all one image on my page, then I’ve just positioned the social media icons, the nav bar, the banner and the video on top of that single image. But even if the elements were all separate, I’d still need to position the social media icons on top of the logo background, so was wondering how that was done?

I’ll take a look at the tutorial link.

Thanks again!

[Simon Matthews]

Thanks, but wouldn’t 200px from the left of a screen that is only 1000px wide (for example) be closer to the centre than 200px from the left of a screen that is say 2000px wide? I mean, if I have a wrapper with a width of 900px positioned 200px from the left, this would look centred on my screen, but on a screen with a higher amount of pixels on the horizontal, wouldn’t this mean that the wrapper would not be centred?

I think I’ve worked out a better way now though, and that is by having a wrapper that is positioned relative and then centred using margin-left:auto and margin-right:auto, and then I’ve used position:absolute for the elements inside the wrapper. I’ve uploaded a screenshot of the web page, which isn’t published. I haven’t uploaded pictures to this site before so not sure if I did it correctly.

I think I need to do a lot more research into positioning things yet! Very early days for me! 🙂

[Simon Matthews]

Ok. I haven’t uploaded any Cinema 4D still images to Facebook for quite a while now so I didn’t really know if the problem was still occurring. I just viewed some of my uploads from a while back and they don’t seem as bad as I had thought, though I did notice that they looked pixelated in parts and not as sharp as the original images. Hope you get to the bottom of this! Thanks 🙂

[Simon Matthews]

No I never found a solution after. If you do then let me know! 🙂

[Simon Matthews]

Yeah I already knew that, I found the same tutorial myself on Vimeo and some other website. I just thought the ‘E’ of EJ Hassenfratz might have stood for Emil? I don’t know. Anyway, that was the tutorial I followed.