Grow your CSS skills. Land your dream job.

Div Layer Help

  • # July 21, 2008 at 3:14 pm

    Hi, I’m very new to CSS and fairly new to Dreamweaver. Let me explain the site so it all makes sense. I made one big table and then split it into the number of columns and rows I needed to separate my page up and sized them accordingly. There is a top bar for a logo, a side column going down the side for navigation and an area for main content. I put images in each of the spaces within the table to build the look of my page, for example, I put an image of a gray to white gradient for the side navigation column. I then put a DIV Layer over that side column and put my rollover navigation buttons in the DIV so that it would layer over the gradient background. I also have the entire webpage centered in the browser.

    Here’s my problem: I can’t align my navigation DIV layer onto the page. If i put in a H and W position, it does not move when the browser size changes and the website moves within the browser. It just stays in its designated pixel position. How do I have it so the DIV Layer navigation attaches itself to the main table/webpage?

    I hope that makes sense.

    Thanks in advance!

    # July 21, 2008 at 4:09 pm

    This is a little complicated to picture with out a link or screen captures. Problem #1 though, what’s with the table? Is there any particular reason why you need a table for your layout?

    # July 21, 2008 at 4:21 pm
    "chriscoyier" wrote:
    This is a little complicated to picture with out a link or screen captures. Problem #1 though, what’s with the table? Is there any particular reason why you need a table for your layout?

    well, i was told to center my site, to have it all within one table and then just align center the table. so, i did. i don’t even know how else I would build it without a table for a base. sorry, i’m really, really new at this. (so new, i can’t figure out how to the screen captures i took into this message :-/ )

    # July 21, 2008 at 10:11 pm

    Purists and semanticists avert thy eyes…the following is in the spirit of JFDI!

    The quick fix for you is to add an id to your table, say it’s called "mytable". Then set in your CSS the following (assuming a table width of 800px):

    Code:
    #mytable {
    margin: 0px auto;
    width: 800px;
    }

    That should center your table but you’re far away from a clean, semantic implementation of CSS. I would suggest you look at some of Chris’s articles and screencasts for more information and work from the ground up.

    # July 22, 2008 at 9:15 am

    i have the table centered on the page. but all the AP Div layers that are over the table, are not. they stick to their position when i change the size of the browser.

    let me break it down some more.

    I made a webpage with the table centered so that no matter what the browser size, the webpage is in the center. when i make the browser smaller, the table "moves" to stay in the center of the browser, no mater what size i make it.

    my problem is that the AP DIV’s (i was told they’re like layers, i might be calling them layers when they’re not) that i layed over the table are in a fixed position, so when i make the browser smaller or larger, yes my table moves within the broswer, but my Divs stay in place.

    does that make a little more sense?

    box
    # July 23, 2008 at 4:59 am

    DIVs are not layers. All html elements may be positioned along with a z-index to allow them to hover above other elements but this isn’t best practice on the whole and is invariably completely unnecessary.
    My advice to you – and I’m not intending to be mean… learn HTML from the ground up, then learn to style that HTML with CSS from the ground up. Do not use tables for layout, do not be tempted to overlay DIVs (or layers as Dreamweaver calls them) for layout.
    For some of the more established web designers the transition from table-based layouts of last century to the semantic and correct css layouts of recent years was understandably difficult – habits are hard to break. But if you’re new to web design, then don’t get into those bad habits. Don’t listen to anyone who tells you to use a table for anything other than tabular data and ditch Dreamweaver, its too bloated (too expensive for those who actually buy it!) and writes poor code – it also places temptation to cut corners in your way that you really don’t need when you’re learning.
    Get yourself a free text editor with syntax highlighting (notepad++ is popular, but you’ll find a world of recommendations on the net), get a book (Designing with web standards, by jeffrey zeldman) or decent online resource (like http://sitepoint.com, or http://alistapart.com/) and learn the correct methods. This may seem daunting but I’m confident that you’ll love it, and pickup the basics so quickly that you’ll be building standards compliant websites in no time :).

    # July 23, 2008 at 9:10 pm

    Mr. Box is spot on. Ditch Dreamweaver if you are serious about understanding what you are doing and start from the ground-up with HTML and CSS. Read the articles here and also from the authors and sites Box recommended.

    Can’t stress this enough…it’s a bit of effort but when you get there you’ll be glad you did.

    # August 9, 2008 at 4:14 pm
    "yuqingeng" wrote:
    He Won

    Tommy: How is your little brother, Johnny? Johnny: He is ill in bed. He hurt himself.
    Tommy: That’s too bad. How did that happen?
    Johnny: We played who could lean furthest out of the window, and he won.
    EDTA

    If this is spam, it’s the first time I’ve laughed about it!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".