Mock-up versus my CSS

[Beverleyh]

You can work with fixed widths if you're more comfortable that way - for pixel-perfect precision, its the way to go

I just chose percentages because working with 100s is easier to calculate on the fly

What's left to tweek now?

[katiebugla]

Also, if y'all have thoughts on spacing the four units, I'm open for suggestions... I will keep at it!

[Beverleyh]

Ok, I think I got it on one line, now just need to work out spacing between "titles" - I can apply a rule to the camera images so they are baseline with the titles?

You can try playing around with the top/bottom margins on the camera images.
I find that something like margin-bottom:-5px (a negative value of a few px) helps pull the images down alongside text if they're floating too high. Maybe that will work for you too?

[Beverleyh]

Also, if y'all have thoughts on spacing the four units, I'm open for suggestions... I will keep at it!

Whitespace between the 4 secondary nav li blocks that we were tweeking earlier?
Try a padding-right:15px on the first 3 (the last won't need it) - you'll need to reduce the widths of the li blocks again to accommodate the extra width that the padding adds, but that should add a nice strip of space between the blocks of text

Its looking good BTW!

[katiebugla]

You can try playing around with the top/bottom margins on the camera images.
I find that something like margin-bottom:-5px (a negative value of a few px) helps pull the images down alongside text if they're floating too high. Maybe that will work for you too?

Oddly enough adding this made it work:

nav.SecondaryNav img {
	margin-bottom: 9px;
}

Still not sure on the spacing between the 4 units... Thoughts?

[katiebugla]

Also, on the contact page: 1) I'm not sure how to center the map and modify the "View Larger Map" - I ripped this directly from google :/

and 2) This may be more appropriate for the PHP page, but can y'all tell whether this will work correctly? I used it from another site that I frankensteined... but the contact information of who it is going to should be the same... Just not sure if I hooked everything up right.

[Beverleyh]

I posted twice - one after the other so maybe you missed my spacing suggestion

Glad you got you images positioned the way you wanted.

You'll have to excuse me a bit on the help-front now - I'm back on my BlackBerry so page views are a bit skewed for me. I *think* I know the Google maps thing you mentioned - is it like the one on this page?: http://www.pennyacres.derbyshire.sch.uk/location.php
I can't check the source directly but feel free to view the source code for that page yourself and see how I styled it up to put the map in the middle. I can't remember if I did the styles inline, or pulled them off into the external stylesheet, or even if I used an iframe now (it was a few years ago) but the styles/css should be pretty similar to what you need.

You'll probably need to post your contact form php page so we can troubleshoot - I'll be back online properly tomorrow sometime so things should be easier when I can see things on a real sized monitor again

Bye for now

[katiebugla]

Great! Thank you for all your help! I did miss your suggestion on the spacing! MY APOLOGIES... I may or may not be working on this tomorrow, but I will certainly be around and asking away! My next focus is going to be looking for a lightbox/floatbox with video capabilities through Vimeo... If anyone has thoughts on this, again, I am open to suggestions!

[Beverleyh]

(following on from your other recent post re: fancybox)

Its funny because I was looking at playing YouTube videos through fancybox the other day - this code works a treat:

<a class="video fancybox.iframe" title="The Falltape" href="http://www.youtube.com/embed/ZeStnz5c2GI?fs=1&amp;autoplay=1">video</a>
<script type="text/javascript">
$(document).ready(function() {
$(".video").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '75%',
height: '75%',
autoSize: false
});
});
</script>

Fingers crossed it will work 'as is' with a Vimeo link too, but if not, there's a fancybox/vimeo test page here that you can hopefully take some inspiration from here : http://fancybox.net/vimeo

EDIT: Fancybox is a 'modal window' jQuery plugin, so both are needed for the above code snippet to work - download here: http://fancyapps.com/fancybox/

[katiebugla]

Hey all! I am back to working on the homepage. I would like to apply the same rollover effect to the camera icon that I did to the text (i.e change color). I'd rather not change that text to an image... I am working in DW and (that is the only thing I am familiar with)... Is there a way to apply that rollover effect without the bulky code DW adds to it?