[Curtis Thompson]

hello…

[Simon Matthews] “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?”

w/o being able to look at the icons, i’d guess one has a slightly larger canvas size than the other? you can assign an id to an image and then adjust margins separately – so for example:

<img id=”fb_icon” …>

and then add a style:

#fb_icon { margin: 1px 10px 0 0; }

and it will move it down 1px and 10px away from the right (top right bottom left are those numbers). you can adjust to taste as needed.

[Simon Matthews] ” Thanks for spending so much time on me!”

sure! it’s looking good, and i hope it’s a fun learn…

sitruc

[Curtis Thompson]

hello…

well – the path says start at the root of the system (“/Images”) – if you are previewing this locally, then it is trying to go to the root of your hard drive and find that path, and it’s failing. in dreamweaver, it is creating a virtual project of sorts, so it can find it.

you can probably just drop the leading “/”, assuming the page in question is on the same level as the images dir. otherwise, if it’s a css file and it’s in another directory like “styles” or the likes, then you can do a relative path (“../Images/…”)…

make sense?

sitruc

[Curtis Thompson]

hello…

impossible to tell w/o seeing code. i’d guess you have a relative path or a “c:\blah\blah” style url in the bg image declaration…

sitruc

[Curtis Thompson]

hello…

[Simon Matthews] ” 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?”

well – you can take that art piece into photoshop and either make the logo a gif or a png with the shadow preserved and then overlay it. a png will preserve the shadow perfectly and render it great, but it might be a much larger file. a gif might be smaller, but preserving the shadow takes more photoshop knowledge…but it is doable. you could try the logo as a png first with the shadow in the logo file. worse case, you can put the logo into the background file, but keep in mind that it is a somewhat established design rule in web pages to have the logo clickable to return to the main site page, and if it’s in your bg, you can’t do that. a trick to get around that, however, is to take a 1×1 transparent gif file and put it in the layout above the logo outside of the bg. then make it the width and height of the logo and link it to the home page. it is the same effect.

[Simon Matthews] ” 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.”

no – this was just the code for the content inside the centered div.

sitruc

[Curtis Thompson]

ugh – spaces inbetween styles are being eaten…you’d have to put those back. sorry about that.

[Curtis Thompson]

hello…

well – you have a few options – in the case of your site, i’d make the triangle logo one image and then set up your top bar with a bg image of the rest of the bg, a div with no float that has the logo, and then a div that is floated right that has a width of 40% or so and then you can align the social media images in that div with align center or right or whatever. you can end up getting them in a very fixed (absolute, but not the literal setting here) that will always be the same using margins on the parent div…

so something like (note i have styles here in the tag, but you’d have them in a css file somewhere):

<div style="width:100%;height:80px;background:#000url(/images/header_bg.jpg)no-repeatlefttop;">
    <div style="float:right;width:40%;height:25px;margin:10px20px00;">
        <!--put icons in here -->
    </div>
    <div>
        <!--put logo in here -->
    </div>
</div>
<div style="width:100%;height:30px;">
    <!-- nav bar elements -->
</div>
<!-- rest of page -->

again that’s just a model, you’d have to adjust to taste…but that’s the idea…

absolute isn’t wrong per se, it’s just nice to have a more flexible layout…

sitruc

[Curtis Thompson]

hello…

well – yes if you go from the other side then ya something 200px from the left will be closer to the right if the right is less than more. but absolute is absolute. if you say “put this 200px from the top and 100px from the left” then that is where it will stay no matter what the user does.

centering a single div and then having your content in that is very standard. however within that centered div, based on what i’m seeing as your design, you have no need to position things absolutely. items will layout top to bottom on their own, so you can just specify widths of 100% for the logo block, the nav bar and the image beneath that and then they will just fill the width of the parent relative div. then for the items below that, you can set widths of 66% and 34% (or px widths – your choice) and then float the left one to the left and the right one to the right. no need to position them absolutely either…

absolute positioning is something you should use pretty rarely in general.

make sense? it does take some practice to get it right. here’s a tutorial on floating that might be a good one to study up on:

https://css.maxdesign.com.au/floatutorial/tutorial0801.htm

sitruc

[Curtis Thompson]

hello…

sorry – i don’t have any that i follow regularly… :-/

sitruc

[Curtis Thompson]

hello…

well – first impression on opening the page was that it was visually overwheming. my eyes didn’t know where to go first, which i tend to find problematic. that said, i can see what your business is right up front, which is good.

i find the cookie notices like that to be a turn off. it makes me think you are doing something evil. most sites set cookies these days so you aren’t out in left field there, but having it be so prominent on your site really does make me wonder what you are up to.

i thought the page scrolled a bit too much – way too much going on there on the home page, imho.

the landing page was very nice – with a single image above the search bar as opposed to the collage on the home page, i found it to be much less visually jarring.

overall a lot of info per page, but that is some random feedback. hope that helps!

sitruc

[Curtis Thompson]

hello…

no – absolute positioning is absolute – it will be 200px from the left no matter what.

in general you want to avoid doing this – there are usability reasons mainly, in that a user might have vision problems or want to see text larger, and if you have your entire site positioned exactly, that will make a mess if they try to make the font larger.

w/o seeing the site, i can’t offer much more detail, but i hope that answers your question?

sitruc