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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is this CSS Layout feasible?

    Hello,

    Have a layout question involing the capabilities of CSS. I have a site I'm working on that I'm tyring to layout in CSS, but not sure if that is the way to go. I understand the benifits, but just wanted to get some opinions on if it is capable with what I'm trying to do.

    I have included an image of the general mock-up of how I wanted the divs to layout. Is this possible, and if so is this the optimal way to set the order of divs.

    Layout Mockup

    This could be the easiest thing in the world, but I'm struggling with it. I've been looking around at some positioning tutorials, but still can't grasp the damn thing. If you have any layout resources I would love to here about those as well.

    Thanks for helping out - Newbie out!

    --
    Josh

  • #2
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, it is.

    If you want, I can do it for you as an example. Just give me the materials. and a better and larger image of the layout you want.

  • #3
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ampulator00,

    That would be fantastic. I have created a zip file that you can download. Here is the link - ShiDesigns_CSS_Layout

    I wasn't sure what you wanted so here is what is in the file.

    CSSTesting.html - My attempt as the layout. I used all absolute divs, but I'm not sure if that's the way to go.

    Sliced_Images - The images that will populate the site.

    Working_Files - The Photoshop file and a flattend jpg version.

    I don't expect you to litteral create the final site for me, I just wasn't sure what files would make it easier for you to create the example...so I sent everything..haha.

    Let me know if you have any questions. AIM - jmzpro

    Thanks again.

    --
    Josh

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem.

  • #5
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, here's my first drafr of it. The currently the way the website is set up, though, I might actually change it. But this the layout as it currently stands. I'll probably make any draft, though.

    NOTE: I couldn't upload any bigger. The only thing you have to do is make sure these two files are in the EXACt same folder as the images.

    If you like slices, Tables are a lot better for this design. However, I do not tables are not recommended. You got too many tags with them.
    Attached Files Attached Files
    Last edited by ampulator00; 10-03-2004 at 10:43 AM.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    erm, wtf??

    All you've done is abs pos the images around, what does that solve?

    Well i started having a go at this but then realised that it's actually quite a big job and i dont really have the time to do it properly. Instead i'll explain how i would go about making it.

    First step is the slices, you'll need the following:

    one image for the woman logo + the 'shi designs' text - transparent background.

    a 1 pixel wide image to be tiled along the top of the page for the gradient bar.

    a 1 pixel high very wide image that will be used for the page background, white bit in the middle with the gradient fade to green on the outside. Needs to be about 1500px wide to be safe. This will be a centered page background.

    For the tabs you'll need a left image and a right image to use the sliding doors method as detailed at http://alistapart.com/articles/slidingdoors

    you can use this same method for the curved corners on the feature and the 2 boxes below, your html makrup should look something like this:

    Code:
    <body>
    
    <div id="container">
    
    <div id="header">
    <h1>Shi Designs</h1> <!--Use image replacement to make this the logo-->
    </div>
    
    <ul>
    <li><a href="products.htm">Products</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="contact.htm">Contact</a></li>
    <li><a id="cart" href="cart.htm">Cart</a></li>
    </ul>
    
    <div id="content">
    <h2>Whats new</h2>
    
    <h3>Summer Sale</h3>
    <p>Blurb, etc</p>
    <!-- Repeat as desired -->
    
    </div>
    
    <div id="feature">
    <img src="bluebag.png" alt="rather nicely patterned blue bag" />
    <h2>End of Summer Sale</h2>
    <p>We have a sale on</p>
    </div>
    
    <div id="fabrics">
    <h4>New fabrics</h4>
    <p>Only in the balh blah collection</p>
    <img src="greenbag.png" alt="green bag" />
    </div>
    
    <div id="collection">
    <h4>The 'S' Collection</h4>
    <img src="redbag.png" alt="red bag" />
    
    <div id="footer">
    2004 Shi Designs|
    <a href="terms.htm">Terms</a>|
    <!--etc-->
    
    </div>
    
    </body>
    Last edited by ReadMe.txt; 10-03-2004 at 03:41 PM.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #7
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a bunch guys. I will take your advice and work my way from here. I'll just have to continue playing around with it until I'm confortable with how CSS positioning works. Having your input definely helps though.

    Thanks again.

    --
    Josh

  • #8
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, good luck.
    Last edited by ampulator00; 10-03-2004 at 07:10 PM.

  • #9
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, with everyones help, this is what I have come up with so far. It seems to be working pretty good, have a few issues with Explorer and something that won't make my Side Divs have 100% height.

    If you guys have a spare moment, I would love a critique of how I have everything coded. I might have some "looked down upon" technquies in there that I'm not aware of.

    Shi Designs CSS Layout

    Thanks in advance.

    --
    Josh

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Center that mother.

    Code:
    body {
      text-align: center;
    }
    
    #OuterContainer {
      margin: 0 auto;
    }


  •  

    Posting Permissions

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