Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Slight Problem

  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post

    Question Slight Problem

    Earlier this year I took a shot at learning to code XHTML and CSS. Unfortunately I got side tracked and moved to other things. Now I'm back at it. I'm attempting to slice and code a PSD I found on the Web for practice. But here's my problem:

    http://img13.imageshack.us/img13/994...server2009.jpg

    I'm trying to figure out the best way to slice and code the header. I thought maybe I could slice it into three pieces; the top, which includes the pattern; the middle, which includes the title and monitors; and the bottom, which includes the buttons and search bar.

    How would you go about this?

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    0
    Thanked 2 Times in 2 Posts
    The first thing I would try to do is seperate the layers. Look at the background checkered piece as one slice and then you cut apart the header image (with the title and monitors) and the nav bar.

    The reason I would do it this way and not the way you suggested is because the background checker sequence goes below the navbar and can be seen on the left and right of the main body section. If you sliced it the way you recommended, what would you do with that part? If you take the background checkered "part" as it's own image - you can set that as a non-repeating background image and center it. You would then need to add a margin to the the header portion to move it far enough down the page so it appears agains the pattern as desired.

  • Users who have thanked cjsingsaas for this post:

    JJackson (07-01-2010)

  • #3
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Quote Originally Posted by cjsingsaas View Post
    The first thing I would try to do is seperate the layers. Look at the background checkered piece as one slice and then you cut apart the header image (with the title and monitors) and the nav bar.

    The reason I would do it this way and not the way you suggested is because the background checker sequence goes below the navbar and can be seen on the left and right of the main body section. If you sliced it the way you recommended, what would you do with that part? If you take the background checkered "part" as it's own image - you can set that as a non-repeating background image and center it. You would then need to add a margin to the the header portion to move it far enough down the page so it appears agains the pattern as desired.
    When I'm writing up the code it's like this, but I'm not sure if I did it correctly.

    Code:
    body {
    	background: url(images/bg.png) center no-repeat #f7f4d5;
    	margin-top: 450px;
    	font-family: Trebuchet MS;
    	font-size: 1.0em;
    	}
    Last edited by JJackson; 07-01-2010 at 05:50 AM.


  •  

    Posting Permissions

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