22 Replies Latest reply: Aug 3, 2012 10:07 AM by Nancy O. RSS

    Can't select images to link them

    graph22 Community Member

      Hi,

       

      Hope you're well.

       

      I'm building a website where the menu items on the nav bar are images.

       

      When I try to link to select them in Dreamweaver to link them to other pages,

      they are not selectable.

       

      Assistance resolving this would be greatly appreciated. Here's a link to the domain:

       

      http://www.misteratm.com

       

      Thanks!

        • 1. Re: Can't select images to link them
          Jon Fritz II CommunityMVP

          The modernatm div is overlapping all of your other content, when you attempt to select something in Design View, you will only get that particular div.

           

          You could use z-index CSS (higher numbers are above lower numbers in the stack) to put that div behind the others, that would allow you to access the rest of them from Design View.

          • 2. Re: Can't select images to link them
            Jon Fritz II CommunityMVP

            The use of padding to position absolute-positioned elements is really not the way to do it and will continue to cause all sorts of issues for you.

             

            If you are dead set on absolute positioning, make the div the same size as the content (for images) and then use

             

            top:#px;

            left:#px;

             

            To get your content to the right position.

            • 3. Re: Can't select images to link them
              MurraySummers CommunityMVP

              @graph22:

               

              If you are dead set on absolute positioning, then you are dead wrong.  This will haunt you more than you imagine.  Please read this for information about the right way to approach your page layout -

               

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

              • 4. Re: Can't select images to link them
                graph22 Community Member

                Hi Jon,

                 

                Thanks for your reply.

                 

                How is it overlapping? From my understanding it's just another div within th container div.

                 

                Thanks!

                • 5. Re: Can't select images to link them
                  graph22 Community Member

                  Why is absolute positioning so bad? I just took a Web Design course with an excellent teacher who used it consistently and had no problems.

                  • 6. Re: Can't select images to link them
                    Rik Ramsay Community Member

                    In addition to the above posts, absolute positioning every div on the page is kind of like layering a web page. They all sit one on top of the other unless you specify otherwise with z-index. Therefore, the divs further down the code, will be the divs at the top of the layer stack. You are better to use other methods such as floats to position your design.

                     

                    Also, having a 100% image based website is a really bad idea and not necessary - especially without the use of ALT tags. You could try the below as a starter layout where I have changed your menu and content section into HTML.

                     

                    Rik

                     

                     

                    <!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=UTF-8" />
                    <title>Mister ATM - Home</title>
                    <style type="text/css">
                    /* Zero margins */
                    body, .container, .header, #navigation, #navigation ul, #navigation ul li, .content, .right_col {
                              margin:0;
                              padding:0;
                    }
                    body {
                              background-color:#FFF;
                              font:13px/17px normal "Times New Roman", Times, serif;
                              color:#000;
                    }
                    p {
                              padding-bottom:10px;
                              margin:0;
                    }
                    .container {
                              width:747px;
                              height:auto;
                              margin:30px auto 0 auto;
                              overflow:auto;
                    }
                    .header {
                              background:#FFF url(http://www.misteratm.com/images/header.jpg) no-repeat;
                              width:747px;
                              height:84px;
                              margin-bottom:30px;
                    }
                    #navigation {
                              background-color:#ddd;
                              width:150px;
                              min-height:100%;
                              float:left;
                    }
                    #navigation ul {
                              width:150px;
                              font:12px/16px bold Arial, Helvetica, sans-serif;
                              color:#000;
                              list-style-type:none;
                              padding:10px 0;
                    }
                    #navigation ul li {
                              width:150px;
                              height:30px;
                              text-align:left;
                    }
                    #navigation ul li a {
                              color:#000;
                              text-decoration:none;
                              line-height:30px;
                              padding-left:30px;
                    }
                    #navigation ul li a:hover {
                              color:#000;
                              text-decoration:underline;
                    }
                    .content {
                              float:left;
                              width:387px;
                              padding:0 25px;
                    }
                    .right_col {
                              float:left;
                              width:160px;
                    }
                    #footer {
                              width:100%;
                              text-align:center;
                              float:left;
                              margin-top:30px;
                              padding:10px 0;
                              border-top:3px solid #03C;
                    }
                    </style>
                    </head>
                    
                    
                    <body>
                    <div class="container">
                      <div class="header"></div>
                      <div id="navigation">
                        <ul>
                          <li><a href="#">HOME</a></li>
                          <li><a href="#">SERVICES</a></li>
                          <li><a href="#">OUR MACHINES</a></li>
                          <li><a href="#">ABOUT</a></li>
                          <li><a href="#">CONTACT</a></li>
                        </ul>
                      </div>
                      <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur nunc eu dolor dictum ut iaculis libero blandit. Aliquam egestas vehicula justo, sit amet feugiat nibh fringilla vitae. Praesent condimentum nibh a lectus semper venenatis. Cras in eleifend elit. Duis posuere, erat eget egestas gravida, arcu urna cursus dui, eget accumsan lorem ante non dolor. Etiam ornare sem a velit ultrices eget fringilla dui mollis. Sed risus nisi, feugiat vitae tristique vel, sodales suscipit augue. Sed lacinia auctor vestibulum. Nam id ligula ligula, pulvinar rhoncus ligula. In augue metus, placerat eu sodales non, pharetra suscipit erat. Duis ac est elit, vitae bibendum lectus. Suspendisse quis rutrum nisl. Duis iaculis iaculis interdum. Integer auctor elit vel libero porttitor tempus. Morbi in erat purus, id elementum est. </div>
                      <div class="right_col">
                                <img src="http://www.misteratm.com/images/mr_atm_home_sketch3__09.jpg">
                      </div>
                      <div id="footer">
                        <p>This is where your footer goes</p>
                      </div>
                    </div><!-- End Container -->
                    </body>
                    </html>
                    
                    
                    • 7. Re: Can't select images to link them
                      MurraySummers CommunityMVP

                      Read the article that I linked in my previous post.

                       

                      An instructor that teaches absolute positioning as a layout tool is still teaching in the 90's.  Using this method of layout is the single most problematic choice an unsuspecting user could make.  If you show us one of your instructor's pages, we'll show you how to break it.

                      • 8. Re: Can't select images to link them
                        graph22 Community Member

                        Jon,

                         

                        When you say:

                         

                        "If you are dead set on absolute positioning, make the div the same size as the content (for images)"

                         

                        Do you mean enter a width and height size in the style for each nav item?

                         

                        Thanks!

                        • 9. Re: Can't select images to link them
                          graph22 Community Member

                          Thanks for your reply and code ideas! I appreciate it.

                           

                          The only problem is your page doesn't look anything like the way I want to design mine,

                          and doesn't really enable me to extrapolate how to use your methods to design mine the way I want.

                           

                          Any assistance along those lines would be greatly appreciated.

                          • 10. Re: Can't select images to link them
                            graph22 Community Member

                            Here is the code used by the teacher to show us an example of how

                            absolute positioning works:

                             

                             

                            <!doctype html>

                            <html>

                            <head>

                            <title> some title </title>

                             

                             

                            <style type="text/css">

                             

                             

                            .dusty{

                            background-color: pink;

                            position:absolute;

                            width:80%;

                            height:500px;

                            left:100px}

                             

                             

                            .araba {border-style:dotted;

                            position: absolute;

                            left:100px}

                             

                             

                            </style>

                             

                             

                            </head>

                             

                             

                            <body>

                             

                             

                            <div class="dusty">

                            <div class="araba">something here</div>

                            </div>

                             

                             

                            </body>

                            </html>

                            • 11. Re: Can't select images to link them
                              graph22 Community Member

                              I read the article.

                               

                              Some informative stuff, although I don't entirely understand it yet. It says to use static positioning. But aren't

                              static positioned elements not affected by the top, bottom, left, and right properties? If so, then how would you tell divs where to go?

                               

                              Is there anyway you could help me work with the code I currently have but just tweak it?

                               

                              Could I still work with having all the divs inside the outer container so that the page is centered and everything I do within it will then be centered on the page? Is padding still ok?

                               

                              Thanks.

                              • 12. Re: Can't select images to link them
                                MurraySummers CommunityMVP

                                Here is the code used by the teacher to show us an example of how

                                absolute positioning works:

                                 

                                Yes, that shows how it works.  Now let's imagine that you have a REAL webpage like this -

                                 

                                 

                                <!doctype html>

                                <html>

                                <head>

                                <title> some title </title>

                                 

                                 

                                <style type="text/css">

                                 

                                 

                                .dusty{

                                background-color: pink;

                                position:absolute;

                                width:80%;

                                height:500px;

                                left:100px}

                                 

                                 

                                .araba {border-style:dotted;

                                position: absolute;

                                left:100px}

                                .araba1 {

                                position: absolute;

                                left:100px;

                                top:25px;}

                                .araba2 {

                                position: absolute;

                                left:100px;

                                top:50px;}

                                 

                                 

                                </style>

                                 

                                 

                                </head>

                                 

                                 

                                <body>

                                 

                                 

                                <div class="dusty">

                                <div class="araba">something here</div>

                                <div class="araba1">something else here</div>

                                <div class="araba2">yet something else here</div>

                                </div>

                                 

                                 

                                </body>

                                </html>

                                 

                                Now preview that page, and begin increasing your font size in the browser.  Watch what happens.  After a few ticks up, the content begins to overlap.  The reason for this is that since positioned elements are removed from the normal flow of the code, they behave as if they were NOT on the page (meaning that if their size expands, they cannot push other elements out of the way).  So as they expand vertically they begin to overlap vertically.  When everything on your page is absolutely positioned, just a slight change in the 'shape' of one or more of those elements can give you an unusable, overlapping mess. And since you cannot control MY browser preferences for text size, when I have my text size set larger than yours was when you designed the page, it's going to be unpredictable how your page will look in my browser.  That's why we say that using absolute positioning as a primary layout tool is the kiss of death for your webpages.

                                 

                                It says to use static positioning. But aren't

                                static positioned elements not affected by the top, bottom, left, and right properties?

                                 

                                No - static positioning is the default for any block element.  If you create a blank HTML page, and drop a single paragraph on it (e.g., <p>foo</p>), that paragraph is a block element with static positioning.  It would be affected by all top, right, bottom and left properties.  You are thinking of a FIXED position element, but that, too is affected by paddings, although its location is absolutely specified by the top|right|bottom|left style values, and margins do not apply since the element is removed from the flow of the code.

                                 

                                Is there anyway you could help me work with the code I currently have but just tweak it?

                                 

                                Yes, and there are many of us here who will do that.  In fact, Rik Ramsey has already posted a suggested approach for you.

                                 

                                Could I still work with having all the divs inside the outer container so that the page is centered and everything I do within it will then be centered on the page? Is padding still ok?

                                 

                                Yes, and yes.  There is nothing on your page that requires *any* positioning.

                                • 13. Re: Can't select images to link them
                                  graph22 Community Member

                                  To respond to your last two answers:

                                   

                                  -The problem with Rik's code is it doesn't tweak mine, it's completely re-written with a fair amount of stuff that I don't know yet.

                                   

                                  -I tried taking away the abolute positioning for everything except the container and it turned the page into a mess.

                                  • 14. Re: Can't select images to link them
                                    MurraySummers CommunityMVP

                                    I tried taking away the abolute positioning for everything except the container and it turned the page into a mess.

                                     

                                    That's not surprising.  There's undoubtedly more to making this page work than just taking away the positioning, especially since you seem to have absolutely positioned everything on the page.

                                     

                                    But here's the kicker.  If you are going to keep everything on the page as a graphic, then it doesn't matter.  In the specific case of your page (ignoring the fact that your content is not machine readable and so the page will never be spidered by search engines), the problem is that since you have not assigned a width or height to each images container, then all of your image containers begin at the 0, 0 coordinate, and stretch to contain the absolutely positioned element.  That means you have in effect masked each previous div with the current one. So when you try to click on the page, you only select the topmost (i.e., the last on the page) div - that would be div.modernatm, and that div masks all of the underlying divs so you cannot select your images to link them.

                                     

                                    So - make each image's container the same size as the image, and adjust the left and top values to place them where you want on the page (in fact, since you are using all absolute positioning, then just position the images directly - no need to use containers for them at all).

                                    • 15. Re: Can't select images to link them
                                      graph22 Community Member

                                      Ok. Thanks.

                                       

                                      What parts would you suggest I make text instead to make it more searchable?

                                       

                                      I was thinking I would start with the Navigation, but I'm not sure exactly how to create the style, properly type out the list so it's vertical and apply the style for a list of menu items. 

                                       

                                      For example, do I create a style called .nav (though you can do #navigation because it's an existing class?),

                                      with properties such as:

                                       

                                      .nav {

                                      width:__px (does it need this if it's just text?)

                                      height: "

                                      padding-left:

                                      padding-right:

                                      font:

                                      font-color:

                                      etc...

                                      }

                                       

                                      Then....how do I type out the nav list in the body?

                                       

                                      Something like this?

                                       

                                      <div id="nav">
                                      <p><a href=”index.html”>HOME</a></p>

                                      <p><a href=”services.html”>SERVICES</a></p>

                                      <p><a href=”our_machines.html”>OUR MACHINES</a></p>

                                      <p><a href=”about.html”>ABOUT</a></p>

                                      <p><a href=”contact.html”>CONTACT</a></p>

                                      </div>

                                       

                                      Where does link behavior info go, ie

                                       

                                      a:link {color:#F00000;}    /*unvisited link*/

                                      a:visited {color:#0FF000;} /*visited link*/

                                      a:hover {color:#FF0FF0;}   /*mouse over link*/

                                      a:active {color:#000FF0;} /*selected link*/

                                       

                                      in the.nav style? Somewhere else?

                                       

                                      Thanks for your continued help. I really appreciate it.

                                      • 16. Re: Can't select images to link them
                                        MurraySummers CommunityMVP

                                        You would definitely want to start with the actual content on the page, not the navigation.

                                         

                                        A menu like you have is best done with a styled, unordered list:

                                         

                                        <ul>

                                             <li><a href="/">HOME</a></li>

                                             <li><a href="services.html">SERVICES</a></li>

                                             ...

                                        </ul>

                                         

                                        Use styling to remove the bullet and the padding from the list elements.  You can target this menu easily since it's the only ul on the page, but just to be safe, you can give the ul an ID value -

                                         

                                        <ul id="menu">

                                         

                                        and then use this CSS -

                                         

                                        #menu {

                                             list-style-type:none;

                                             padding:0;

                                             color:white;

                                        }

                                         

                                        Get it?

                                        • 17. Re: Can't select images to link them
                                          Rik Ramsay Community Member

                                          graph22 wrote:

                                           

                                          Ok. Thanks.

                                           

                                          What parts would you suggest I make text instead to make it more searchable?

                                           

                                          I was thinking I would start with the Navigation, but I'm not sure exactly how to create the style, properly type out the list so it's vertical and apply the style for a list of menu items. 

                                           

                                          For example, do I create a style called .nav (though you can do #navigation because it's an existing class?),

                                          with properties such as:

                                           

                                          .nav {

                                          width:__px (does it need this if it's just text?)

                                          height: "

                                          padding-left:

                                          padding-right:

                                          font:

                                          font-color:

                                          etc...

                                          }

                                           

                                          Then....how do I type out the nav list in the body?

                                           

                                          Something like this?

                                           

                                          <div id="nav">
                                          <p><a href=”index.html”>HOME</a></p>

                                          <p><a href=”services.html”>SERVICES</a></p>

                                          <p><a href=”our_machines.html”>OUR MACHINES</a></p>

                                          <p><a href=”about.html”>ABOUT</a></p>

                                          <p><a href=”contact.html”>CONTACT</a></p>

                                          </div>

                                           

                                          Where does link behavior info go, ie

                                           

                                          a:link {color:#F00000;}    /*unvisited link*/

                                          a:visited {color:#0FF000;} /*visited link*/

                                          a:hover {color:#FF0FF0;}   /*mouse over link*/

                                          a:active {color:#000FF0;} /*selected link*/

                                           

                                          in the.nav style? Somewhere else?

                                           

                                          Thanks for your continued help. I really appreciate it.

                                           

                                          I do believe I have already done this all for you in my first post: http://forums.adobe.com/message/4592745#4592745

                                           

                                          As I mentioned when I posted it, i modified your original design to have more HTML sections.

                                          • 18. Re: Can't select images to link them
                                            Nancy O. CommunityMVP

                                            @Rik,

                                            You can lead the horse to water... 

                                             

                                             

                                            @Graph,

                                            I just looked at Rik's code and it's an excellent starting point for you.  You can learn from it.  Hit Live View button in Dreamweaver.  His page looks almost identical to yours.

                                             

                                            Some friendly advice, learn to work with HTML & CSS code.  You're making things much harder on yourself because you lack a working knowledge of code fundamentals.

                                             

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

                                             

                                            Best of luck on your project,

                                             

                                            Nancy O.

                                            • 19. Re: Can't select images to link them
                                              bemdesign Community Member

                                              Graph -

                                               

                                              I would strongly suggest learning about HTML flow, the difference between block-level and inline elements,and finally HTML positioning (with floats as an advanced subject). Once you have a good understanding of these essential principles you'll know how to proparly structure an HTML document and apply CSS to get the actual look you desire.

                                               

                                              Some useful references:

                                              http://css-tricks.com/almanac/properties/d/display/

                                              http://css-tricks.com/almanac/properties/p/position/

                                              http://css-tricks.com/almanac/properties/f/float/

                                               

                                              and of course the actual spec:

                                              http://www.w3.org/TR/CSS2/visuren.html

                                               

                                              Hope this helps.

                                              • 20. Re: Can't select images to link them
                                                graph22 Community Member

                                                Nancy,

                                                 

                                                "You can lead a horse to water"

                                                 

                                                I'm on the thread. Might want to consider mocking me

                                                behind my back. 

                                                 

                                                FYI, little comments like yours don't help when you're

                                                frustrated and trying to learn this stuff. 

                                                 

                                                BTW, every time you've chimed in with your "help" it's

                                                never worked. Someone ELSE ALWAYS helps me

                                                solve the problem. 

                                                • 21. Re: Can't select images to link them
                                                  MurraySummers CommunityMVP

                                                  Nancy only replied once in this thread and it was to give you excellent advice.  She has about as high a credibility and accuracy as anyone else posting here.  Jus sayin....

                                                  • 22. Re: Can't select images to link them
                                                    Nancy O. CommunityMVP
                                                    I'm on the thread. Might want to consider mocking me

                                                    behind my back. 

                                                    No mocking intended.  It's a very old English saying.

                                                    http://www.phrases.org.uk/meanings/you-can-lead-a-horse-to-water.html

                                                     

                                                    BTW, every time you've chimed in with your "help" it's

                                                    never worked. Someone ELSE ALWAYS helps me

                                                    solve the problem. 

                                                    I don't know what I've done to offend you or when.   So I'll just refrain from responding to you in the future. 

                                                     

                                                    Best of luck!

                                                     

                                                     

                                                    Nancy O.