www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: [RESOLVED] First CSS Layout Attempt

  1. #1
    Join Date
    Nov 2006
    Posts
    593

    resolved [RESOLVED] First CSS Layout Attempt

    Hi....

    Could someone pretty please do me a favor and tell me if my CSS here is correct:

    http://www.catalinasouthbeach.com/ku...hen/index.html


    The only page working besides that one is the "welcome" one. I kind of used a table for the bottom nav....


    Thank you very, very much!!!!!

  2. #2
    Join Date
    Aug 2007
    Location
    London
    Posts
    410
    Well the CSS validates over at W3 so it looks like you're fine.

  3. #3
    Join Date
    Nov 2006
    Posts
    593
    Thank you!! Yup...saw that.

  4. #4
    Join Date
    Jul 2010
    Location
    /ramdisk/
    Posts
    865
    Quote Originally Posted by grimmylina View Post
    Hi....

    Could someone pretty please do me a favor and tell me if my CSS here is correct:

    http://www.catalinasouthbeach.com/ku...hen/index.html


    The only page working besides that one is the "welcome" one. I kind of used a table for the bottom nav....


    Thank you very, very much!!!!!
    It looks really nice. I noticed you're using a dreamweaver imageswap script. I don't have javascript enabled, but you can still make those images rollover with CSS:

    #imageblock_reservations {
    min-width:200px;
    min-height:50pxl
    background-image:url('kungfu_images/reservations.jpg');
    }
    #imageblock_reservations a:hover {
    background-position:-200px 0px;
    }

    then make the button two times the width it normally is for the individual images (400px in this example) and it will appear to be swaping the images out without javascript.

    the width and margins on the wrapper rule mean I have to scroll horizontally, and I hate scrolling horizontally.

    On the reservations page it's much more visible, one of your block elements has it's width set too large (easy fix- set max-width:image-width, and set overflow:hidden), then it will scale the page back down.

    Otherwise it's an awesome site I wish you would design for me.

    edit: just because the css validates doesn't mean it's going to show up the same in all browsers, or even show up how you want it to.

  5. #5
    Join Date
    Nov 2006
    Posts
    593
    Oh thank you!!

    1.) I will try the css image swap. I've been too chicken to do that but I have to force myself.

    2.) Yeah...I'm also thinking it's a little too wide. I think I will fix that as well.

    3.) You don't happen to know which block element it is do you? I have code there from "open table" the company that does the table booking. Is it one of these?

    http://www.catalinasouthbeach.com/ku...heets/feed.css


    Thank you!!! Very sweet....

  6. #6
    Join Date
    Sep 2008
    Posts
    408
    Not bad, I concur with the a:hover CSS image swap. That way users without javascript can also have the same functionality. Also, the copyright on the bottom, is that necessary to be an image?

    Lastly, on a 1024x768 monitor it looks off. Besides having to scroll right, the additional 40 pixel margin on the left doesn't help. Is there a necessity for it being 40 on one side and 50 on the other? If you want it to be centered, go with: { margin:10px auto 40px; } on wrapper.

    Edit: Forgot to mention, if you aren't using it right now then get on it asap. FireBug for Firefox is a developers godsend when it comes to seeing the mechanics of a page.
    Last edited by Shorts; 08-10-2010 at 01:51 PM.
    Mullanaphy!
    http://www.mullanaphy.com/

    Unless code is provided or an exact example is requested I think I'm going to start using psuedo code from now on...

    Also, I freelance as well. Inquire within!

  7. #7
    Join Date
    Jul 2010
    Location
    /ramdisk/
    Posts
    865
    the wrapper div

    .wrapper{
    margin: 10px 50px 15px 40px;
    padding: 0;
    width: 1097px;
    background-color: #000000;}

    In the .wrapper rule:

    margin: 10px 50px 15px 40px;

    I would change the 50px to 0px (thats the right side) and the 40px to 0px (that's the left side).

    Width:1097px (this is also the width of middle.jpg).
    You can (I haven't looked, but probably) resize all of the images using an image editor, or try to work some kind of magic using css with z-index to resize them in the browser case by case (much more frustrating). There's no way to make everyone happy with a single webpage, eventually you have to say that it's done. 800px or 1024px (width) is the minimum sizes I try to design for.

    A hint on the css rollovers- put them into a table and set the padding and borders to zero. Otherwise they may show up in a vertical list for browsers older than whatever the current IE browser is.

    Sometimes I use the imageswap script if the rest of the site requires javascript anyways, then I put a
    Code:
    <script type="text/javascript"></script>
    <noscript>
        <span style="color:red">This page requires javascript to show up correctly.
        </span>
    </noscript>
    On the reservations page:
    div #Home .styletop 60x23
    div #MainPics .styletop 398x341

    those are the two blocks causing that excessive overflow, I think the reason is the use of position:abolute.

    Here's what the blocks look like with a red border around them (zoomed way out):
    http://img186.imageshack.us/img186/8187/blocksize.gif


    Cool font, I'm digging it.
    Last edited by eval(BadCode); 08-10-2010 at 01:41 PM.

  8. #8
    Join Date
    Nov 2006
    Posts
    593
    Tadaaaaaa...almost there?

    Updated Site

    1.) I narrowed the wrapper to 958px ... I hope that's better. No more horizontal scrolling.

    2.) Made css rollovers for the menu (and have it in a table with 0 padding). First time I ever did this....It took me a while but it was a great learning experience.

    3.) I got rid of that .styletop class tag....I was cutting/pasting divs from another page and that's how that got there

    4.) Took out all unnecessary javascript code

    5.) Downloaded Firebug...

    6.) The only things that worry me are the #Content div and #MainPics div. They look okay in my Firefox but in my Safari they look a bit off. Same thing with the image on the index.html page. Is there a way to ensure they are always in the perfect location?

    6.) Let me know if you want the font file. They were all free.

    Thank you soooo, sooooo much!!!!!

  9. #9
    Join Date
    Jul 2010
    Location
    /ramdisk/
    Posts
    865
    I check my work to make sure it shows up in firefox 3.6.8 and Internet Explorer 8 using compatibility mode. If it shows up correctly in any other browser, it's a sweet bonus.

    You should put the address for the restaurant on the website, makes it easier to find.
    Make the DJ's face the favicon.ico, or something else.

    nice work

  10. #10
    Join Date
    Sep 2008
    Posts
    408
    Looks good on my latest Firefox and Opera (Windows 7) and 1024x768.

    Good job with the css rollovers. Personally I feel like I just took off some dead weight when changing js rollovers to css.

    Have to say good job over all. Now just have to get past the table for the bottom nav and you're all set! For this project I would say don't even worry about it, save that for your next project. Every project you do try to add a new technique and enjoy.
    Mullanaphy!
    http://www.mullanaphy.com/

    Unless code is provided or an exact example is requested I think I'm going to start using psuedo code from now on...

    Also, I freelance as well. Inquire within!

  11. #11
    Join Date
    Nov 2006
    Posts
    593
    Thank you!!! They took me forever but I finally got them. I've been using the Dreamweaver rollover javascript for forever because css seemed daunting but I finally got it. Yayyyyy!!!!


  12. #12
    Join Date
    Nov 2006
    Posts
    593
    I should know this already but is there any way to get those middle content divs to move along with the wrapper?

    So that if you stretch the page out the background always stays put?


    -----

    I changed the wrapper css to this:

    .wrapper{
    margin:0 auto;
    padding-left: 60px;
    width: 958px;
    position: fixed;
    background-color: #000000;}

    is that okay? It seems to work or is the 60pixel padding a no-no?
    Last edited by grimmylina; 08-11-2010 at 09:27 AM. Reason: Update

  13. #13
    Join Date
    Jul 2010
    Location
    /ramdisk/
    Posts
    865
    it looked fine before, but I think when you changed the wrapper to fixed it took away the scroll-bar on the right which means I have to zoom out to view the menu at the bottom.

    I don't understand what you're asking. Are you wanting the wrapper to stay centered even if I scroll out a lot? You could throw wrapper into a div align=center, it's depreciated but works (it looks like you already know the css equivalent).

    You could also just try removing the middle.jpg and setting body background-image=middle.jpg background position = 15% 15% or something like that. If you're looking to just keep that background image set at a certain place.

  14. #14
    Join Date
    Nov 2006
    Posts
    593
    Ok, I switched it back. I'd rather have it be accessible to everybody then to be picky. I just wasn't crazy about this (attached)....

    Like if you want to stretch out the page....the text doesn't move along with the background.
    Attached Images Attached Images

  15. #15
    Join Date
    Jul 2010
    Location
    /ramdisk/
    Posts
    865
    .content (line 17)
    {
    float: left;
    height: 510px;
    width: 100&#37;;
    background-image: url("../images/common/middle.jpg");
    background-color: #000000;
    }

    add: margin:0 auto;
    remove: float left (why float?)

    it's some combination of the above 2 rules. (and possible position:absolute)

    I suggest you get "web developer" for firefox (I found firebug impossibly complicated to get started with).

    On web developer there's a tab Information -> block size
    and CSS -> view style information

    if you combine these two tabs you'll figure out whats wrong much much faster.



    Web developer will also show you warnings like css rules that are miswritten, javascript that doesn't compile, unclosed tags etc.

    for example your CSS:

    #navbar a {
    text-decoration: none;
    display: block;
    height: 54px;
    text-indent: -5000px;
    background-color:#000;:
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles