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.

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