Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Mock-up versus my CSS

  1. #1
    Join Date
    Jul 2011
    Posts
    113
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Mock-up versus my CSS

    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.Click image for larger version. 

Name:	Screen shot 2012-09-28 at 8.56.32 AM.jpg 
Views:	106 
Size:	21.0 KB 
ID:	4774

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

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

  3. #3
    Join Date
    Jul 2011
    Posts
    113
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jul 2011
    Posts
    113
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Jul 2011
    Posts
    113
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by katiebugla View Post
    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
    Code:
    .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.

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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);

    Code:
    <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;

    Code:
    <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>
    Code:
    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);

    Code:
    nav.SecondaryNav li a { font-size:26pt; }
    Hope that helps

    BTW - the 2nd attachment didnt work and is throwing up errors.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

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

  9. #9
    Join Date
    Jul 2011
    Posts
    113
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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).

  10. #10
    Join Date
    Jul 2011
    Posts
    113
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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?

Similar Threads

  1. IE7 borked layout versus other browsers
    By PhxVyper in forum CSS
    Replies: 1
    Last Post: 08-20-2010, 02:21 PM
  2. Replies: 5
    Last Post: 01-29-2009, 09:08 AM
  3. CSS versus Frames
    By jackii_8 in forum CSS
    Replies: 1
    Last Post: 01-16-2008, 02:18 AM
  4. <b> versus <strong>
    By John_fresh in forum HTML
    Replies: 13
    Last Post: 03-24-2007, 01:05 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •