Mock-up versus my CSS

[katiebugla]

I am attaching the screengrab of what I am trying to do (mocked up in illustrator)... here is the current site: http://richieadams.com, I am mostly concerned with the four "boxes" at the bottom. I currently have them as a list and a secondary nav. If anyone can help me tweak the CSS and/or HTML to get this closer to the mockup, I'd greatly appreciate it.4774

[traq]

What about them? Do you have a specific question? Your layout seems to follow your mockup fairly well.

[katiebugla]

In the mock-up, the titles "Live Action" "Main Title" etc are larger (text-wise) and each column has it's own width. For example, "Live Action" is skinnier than "Broadcast Design/Graphics"... I built this as a secondary nav and have modified the list CSS to get it close, but it's still not quite right. Do I try to lay this in as divs? or make the title images? I really would like the titles to be larger and just have the layout closer to the mockup. I hope this makes more sense.

[katiebugla]

Also, the header is all wonky in Firefox... see attached screengrab: 4775

[katiebugla]

Ok, I got the header in Firefox straightened out, but still am scrambling on the organization of the "secondary nav"

[traq]

In the mock-up, the titles "Live Action" "Main Title" etc are larger (text-wise) and each column has it's own width

The simplest way would be to give your titles a class name (e.g., class=title) and use it to style them. Same thing with the widths of the <li>'s (maybe id's, if they're unique):

CSS
.SecondaryNav .title{
font-size: 1.5em; /* 50% larger */
}
#liveaction, #maintitledesign{ width: 20%; }
#broadcastdesign{ width: 40%; }
#showreel{
width: auto;
/* you can calculate this, but I prefer to leave it `auto`,
because pixel rounding in some (mostly older) browsers
can cause it to be too big for the remaining space */
}
/* widths are guesses based on looking at your mockup. */There's no reason to use divs, here. Likewise, there's no reason to use images for the text.

[Beverleyh]

Hi Katie,

In your main.css, the nav.SecondaryNav li's all have a width of 240px; so if you want them to have different widths, you'll need to target them individually.

You could do this inline (I'm just guessing at the widths - the 3rd one looks the biggest to me with the others looking roughly the same);


<nav class="SecondaryNav">
<ul>
<li style="width:22%" ><a>Live Action<img src="images/camera_icon.png"></a><br>...</li>
<li style="width:22%" ><a>Main Title Design<img src="images/camera_icon.png"></a><br>...</li>
<li style="width:34%" ><a>Broadcast Design/Graphics<img src="images/camera_icon.png"></a><br>...</li>
<li style="width:22%" ><a>2012 RRC Showreel<img src="images/camera_icon.png"></a><br>...</li>
</ul>
</nav>

Or you can give each li a different class and target them in your main.css like this;


<nav class="SecondaryNav">
<ul>
<li class="first" ><a>Live Action<img src="images/camera_icon.png"></a><br>...</li>
<li class="second" ><a>Main Title Design<img src="images/camera_icon.png"></a><br>...</li>
<li class="third" ><a>Broadcast Design/Graphics<img src="images/camera_icon.png"></a><br>...</li>
<li class="fourth" ><a>2012 RRC Showreel<img src="images/camera_icon.png"></a><br>...</li>
</ul>
</nav>


nav.SecondaryNav li.first, nav.SecondaryNav li.second, nav.SecondaryNav li.fourth { width:22%; }
nav.SecondaryNav li.third { width:34%; }

You should be able to target the a tag titles to make them bigger like this (change the font-size to whatever you wish);


nav.SecondaryNav li a { font-size:26pt; }

Hope that helps

BTW - the 2nd attachment didnt work and is throwing up errors.

[traq]

Also, if you're not overly concerned with older browsers (specifically, IE < 9), you can use :nth-child() to target those <li>s:
.SecondaryNav ul:nth-child(1), .SecondaryNav ul:nth-child(2){ width: 20%; }
.SecondaryNav ul:nth-child(3){ width: 40%; }
/* etc. */

[katiebugla]

Hello All!

I have tried Beverly's solution and am getting closer,http://richieadams.com but not quite there, yet... Any thoughts? I will try to continue to tinker with percentages... which brings up soooooo many more questions, I eventually want to learn how to build this as fluid, but will need a lot of help on the conversion. (I'll burn that bridge another day).

[katiebugla]

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?

[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?

[katiebugla]

Yeah a much easier way would have been just to use divs, that way you can customize the padding and margins easier and it always works out fine! Nice site though :)

Can you clarify the div comment? Is there a way to keep the type (SecondaryNav) type, work with the rollover, and get the cameras to rollover as well, without the DW rollover?

Thank you for the compliment on the site :)... It's my first one done somewhat "right"...

[katiebugla]

Ok, I am working on making the rollovers better... I have not updated the site, as it's currently functional, but for reference sake, here is the url: http://richieadams.com4788. However, attached is a screen grab of what happens when I have the following code:


<nav class="SecondaryNav">
<ul>
<li class="first" ><a class="vimeo" href="http://player.vimeo.com/video/50409873?">Live Action&nbsp;</a><br>A quick look at my work as a director, which includes commercials, corporate videos, short films, and my first feature film.</li>
<li class="second" ><a class="vimeo" href="http://player.vimeo.com/video/50410101?">Main Title Design&nbsp;</a><br>
A compilation of main title design, network title design, theatrical branding, and motion picture advertising for film and
television.</li>
<li class="third" ><a class="vimeo" href="http://player.vimeo.com/video/50409872?">Broadcast Design/Graphics&nbsp;</a><br>A compilation of 2D & 3D motion graphic animation, special montage sequences, branding & identity, title graphics for feature films, network television, commercials and the web.</li>
<li class="fourth" ><a class="vimeo" href="http://player.vimeo.com/video/50406488?">RRC (Co.Reel)&nbsp;</a><br>A collective look at work done through my company, including live action direction & production, main title design for film and television, and graphics for the web and TV.</li>
</ul>
</nav>


nav.SecondaryNav ul {
list-style: none;
width: 100%;
}

nav.SecondaryNav li {
display: inline;
}

nav.SecondaryNav li a{
font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif;
font-size: 17pt;
text decorations: none;
list-style-type: none;
color: #000;
background: url(../images/camera_icon.png) bottom right no-repeat;
}

nav.SecondaryNav li a:hover{color:#999; background:url(../images/camera_icon_grey.png) no-repeat}

nav.SecondaryNav li.first {width:18%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt;padding-right: 10px;}
nav.SecondaryNav li.second {width:23%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt; padding-right: 4px;}
nav.SecondaryNav li.third { width:34%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt; padding-right: 5px;}
nav.SecondaryNav li.fourth { width:23%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt}