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:	108 
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,943
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    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
  •