Skip navigation
Currently Being Moderated

Can't select images to link them

Aug 1, 2012 2:18 PM

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!

 
Replies
  • Currently Being Moderated
    Aug 1, 2012 2:27 PM   in reply to graph22

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 2:35 PM   in reply to Jon Fritz II

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 2:45 PM   in reply to Jon Fritz II

    @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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 3:22 PM   in reply to graph22

    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>
    
    
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 3:53 PM   in reply to graph22

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 9:48 AM   in reply to graph22

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 12:22 PM   in reply to graph22

    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).

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 2:26 PM   in reply to graph22

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 2:34 PM   in reply to graph22

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 3:21 PM   in reply to Rik Ramsay

    @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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 7:19 AM   in reply to graph22

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:45 AM   in reply to graph22

    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....

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 10:07 AM   in reply to graph22
    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.

     
    |
    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