Skip navigation
mrbrycel
Currently Being Moderated

Putting together my page the right way with div tags

Nov 24, 2012 2:19 AM

So I recently created my website in dreamweaver, with the help of some tutorials along with trial and error, and learning along the way. I was eager to get it up, so instead of trying to learn the right way to separate everything with div tags and align everything correctly, I basically centered everything, then spaced it apart to get it where I wanted. When I previewed it in my browser it looked fine, but once I opened it up on an iPhone I noticed everything was all over the place and nothing was aligned.

 

How should I go about setting this up the right way so everything stays aligned and in the right spot? I'm assuming I should put every frame in its own div tag, but whenever I try that, things start to get even more confusing. I'm trying to understand how the whole div tag thing works, but can't seem to grasp it.

 

Here is my site as it is: www.brycelansing.com

 
Replies
  • Currently Being Moderated
    Nov 24, 2012 3:11 AM   in reply to mrbrycel

    You've learned the hard way that web design and layout isn't as simple as it first seems. Your site looks really nice on a desktop, but the underlying code sends shivers down my spine. It takes me back to the very early days of the web, when we didn't have the tools to lay out pages properly.

     

    A div is nothing magical. It's simply a container that groups multiple elements so they can be styled as a single unit. What you need to get your head around is the use of CSS margins, and the float property. Many of your pages could be done by wrapping a div with the ID container around all the images, and then wrapping each image and its caption inside a div that doesn't have an ID. Put the caption in a paragraph. They could then be styled like this:

     

    #container {

        width: 100%;

        max-width: 867px;

        margin: 20px auto;

    }

    #container div {

        width: 249px;

        float: left;

        margin: 20px;

        text-align: center;

    }

     

    This would give you a three column layout as at present, but the number of columns would change on smaller screens.

     

    If you have never worked with CSS before, you might find it useful to go through my tutorial series in the Dreamweaver Developer Center: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2012 11:24 AM   in reply to mrbrycel

    Both your examples are fixed-width, centered layouts.

     

    DW comes with several pre-built CSS layouts you could use as a starting point for your projects.

     

    File > New > Blank page > HTML > Layouts (choose 3-col fixed, header & footer)

    Hit Create button. 

    SaveAs filename.html.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2012 1:13 PM   in reply to mrbrycel

    #1 wrapper.css is not found on server.

     

    #2 you have several code errors that need attention.  Validate all your pages with the on-line tools below & fix reported errors.

     

         Code Validation Tools

         ------------------------------------

         CSS - http://jigsaw.w3.org/css-validator/

         HTML - http://validator.w3.org/

     

    #3 if you're going to used embedded CSS code (inside individual html pages), styles must be inside the document's <head> and </head> tags.  

     

    That said, it's much more efficient to keep all your styles in one external style sheet.  Much easier to edit one file instead of many.

    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2012 2:47 PM   in reply to mrbrycel

    Also, is there something similar I can do to my navigation bar text to avoid having all the &amp;nbsp; between each word?

     

    Use CSS and an unordered list for your top menu.

     

    CSS CODE:

     

    /**BEGIN MENU STYLES**/

    #nav {

    width: 980px; /*adjust width as needed*/

    margin:0 auto;

    font-family:Arial, Helvetica, sans-serif;

    font-size: 30px;

    background:#000;

    overflow:hidden; /*to contain floats**/

    }

     

    #nav li {list-style:none;}

     

    #nav li a {

    text-decoration:none;

    color:#CCC;

    float:left;

    /**space between menu items**/

    padding:0 30px 0 30px;

    }

     

    #nav li a:visited {color:#999}

    #nav li a:hover,

    #nav li a:active,

    #nav li a:focus {color: #FFF;}

     

    /**clear floats, add a border after menu**/

    #nav:after {

    margin-top:0;

    content:'';

    clear:left;

    display:block;

    border-bottom: 3px solid #666;

    }

    /**END MENU STYLES**/

     

     

     

    HTML CODE:

     

     

    <div id="nav">

    <ul>

    <li><a href="index.html">Home</a></li>

    <li><a href="Film.html">Film</a> </li>

    <li><a href="Commercial.html">Commercial</a></li>

    <li><a href="Music Video.html">Music Video</a></li>

    <li><a href="Contact.html">Contact</a></li>

    </ul>

    </div>

     

     

    That's all there is to it.

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points