5 Replies Latest reply: Dec 30, 2011 3:29 PM by Nancy O. RSS

    Using AP Div's and Editing them

    WebGuyDesign Community Member

      Hi I am trying to use the AP Div tool so that I can play Div tags where I want them to be.  In one example I created a div tag to fit a logo but in my CSS style it as #apdiv1   When I try to organize the CSS style and raname the apdiv1 to #logo it makes my logo remove, why is that?

        • 1. Re: Using AP Div's and Editing them
          Nancy O. CommunityMVP

          If you rename a CSS selector, you must also rename the div ID or class name that referernces it in your html.

           

          <div id="DivName">

          content

          </div>

           

          Also, APDivs are not a good primary layout method.  Here's why:

          http://apptools.com/examples/pagelayout101.php

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          • 2. Re: Using AP Div's and Editing them
            WebGuyDesign Community Member

            MENUE_EXAMPLE.PNG

             

            Thanks, next i'm trying to create a menue that looks like this where when i hover over each button, it changes color.  What is the best way at approach this?  I basically just need the menue from here;  how can i add it to my site?

             

            !DOCTYPE html><html xmlns:og="http://ogp.me/ns#"><head>
             
              <title>THIS IS A TEST</title>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
              <!--<meta name="viewport" content="width=device-width,initial-scale=1">-->
              <link rel="shortcut icon" href="www.testing.com">
              <link rel="canonical" href="http://www.treehugger.com/green-food/alternative-home-remedy-peppermint-oil-to-relieve-ibs .html">
              <meta name="robots" content="noodp">
              <meta name="keywords" content="demo test">
              <meta name="description" ewbsite"="">
              <link rel="canonical" href="http://www.treehugger.com/green-food/alternative-home-remedy-peppermint-oil-to-relieve-ibs .html">
              <link rel="image_src" href="http://www.fe28.comg">

              <!-- CSS -->
             
              <link rel="stylesheet" type="text/css" href="http://static.treehugger.com/stylesheets/treehugger.css">

             


              <!-- OpenGraph -->
              <meta property="og:title" content="333">
              <meta property="og:type" content="article">
              <meta property="og:url" content="this will have to be changed">
              <meta property="og:image" content="www.geingsf4">
              <meta property="og:site_name" content="TreeHugger">
              <meta property="og:description" content="We 'Huggers with our aspiring clean, fiber-rich diets probably aren't as likely to experience the daily (yikes!) Irritable Bowel Syndrome (IBS) that some millions of Americans do, according to The New York Times. ">
              <meta property="fb:app_id" content="133255656700169">




            </head><body><div id="container">

               
            <div id="header">

                <div id="logo-bar">

                  <div id="logo">
                    <p>logo page</p>
                  </div>
                </div><!-- end logo-bar -->

                <ul id="nav">
               
                <li>
                <a href="/stream/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'All',]);">HOME</a>
                </li>
                <li>
                <a href="/design/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Design',]);">ABOUT</a>
                </li>
                <li>
                <a href="/technology/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Technology',]);">SERVICES</a>
                </li>
                <li>
                <a href="/living/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Living',]);">station</a>
                </li>
                <li>
                <a href="/transportation/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Transportation',]);">bass</a>
                </li>
                <li></li>
                <li>
                <a href="/science/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Science',]);">PLAYS</a>
                </li>
                 <li>
                <a href="/business/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Business',]);">POTS</a>
                </li>
                <li>
                <a href="/slideshows/" class=" last" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Slideshows',]);">cost</a>
                </li>
                </ul>


            </div><!-- header -->


                <div id="content">
                  <div class="rail-item"></div>




            <div class="rail-item"></div>





             

            </div></div></body></html>

            • 3. Re: Using AP Div's and Editing them
              Nancy O. CommunityMVP

              The menu you have now is not web friendly. The links won't work without JavaScript.

              Try this code in a new, blank HTML document

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>Horizontal List Menu</title>
              <style type="text/css">
              
              /**BEGIN HORIZONTAL MENU STYLES**/
              #nav {
              width: 800px; 
              margin:0.5em auto;
              }
              
              #nav ul {list-style:none;}
              
              #nav ul li {display: inline;}
              
              #nav ul li a {
              font: 0.75em/1.5em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
              text-transform:uppercase;
              color: #FFF;
              background: #333;
              text-decoration: none;
              float: left;
              display:block;
              line-height: 3em;
              width: 7em;
              text-align:center;
              border-top:2px solid silver;
              border-right: 2px solid silver;
              border-bottom: 6px solid silver;
              }
              
              #nav ul li a.last {border-right:none}
              
              #nav ul li a:hover, 
              #nav ul li a:active, 
              #nav ul li a:focus {
              background: #dadada;
              color:#000; 
              text-decoration:underline;
              outline:none;
              }
              /**END HORIZONTAL MENU STYLES**/
              
              </style>
              </head>
              <body>
              
              <!--Begin horizontal menu -->
              <div id="nav">
              <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Station</a></li>
              <li><a href="#">Bass</a></li>
              <li><a href="#">Plays</a></li>
              <li><a href="#">Pots</a></li>
              <li><a class="last" href="#">Cost</a></li>
              </ul>
              </div>
              <!--end menu -->
              
              </body>
              </html>
              
              

               

              Nancy O.

              Alt-Web Design & Publishing

              Web | Graphics | Print | Media  Specialists 

              http://alt-web.com/

              • 4. Re: Using AP Div's and Editing them
                WebGuyDesign Community Member

                44.PNG

                 

                Woundefull thanks this works, but lets say that I want to move the full navagation bar in a specfic location on site, (exactly)  for example I created a div tag thats a different color with the size that a little bigger then this navagation.  How do I input the code in this html so that it fits over the Div.  (see picture)  What is the best why to input this in, can you explain how I would do this?

                 

                thanks so much!

                 

                 

                ps

                 

                wish you had a video that showed me how you made this.

                • 5. Re: Using AP Div's and Editing them
                  Nancy O. CommunityMVP

                  Use margins to align your #nav.

                   

                   

                  #nav {

                  width: 800px;

                  margin: top  |  right  |  bottom  |  left;

                  }

                   

                   

                  HTML & CSS Tutorials - http://w3schools.com/

                   

                   

                  Nancy O.

                  Alt-Web Design & Publishing

                  Web | Graphics | Print | Media  Specialists 

                  http://alt-web.com/