SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 77
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchor not working

    I'd like to know why this code:
    <div id="masterhome"><a href="#"></a></div>
    is not working, as seen on this <snip /> It's in the right place where I want it, but it's not working when you hover over ?
    Last edited by Paul O'B; Mar 1, 2010 at 08:31.

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Anchor:
    Code HTML4Strict:
    <a id="masterhome"></a>

    Link:
    Code HTML4Strict:
    <a href="#masterhome" title="This links to another part of this webpage">Link</a>

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replace my line of code with which, I'm a little confused ?

  4. #4
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I updated not working.

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The anchor goes where you want the page to goto when the link is clicked, the link goes where you want the link to be.

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thing, there is no content in the anchor tag. That may be the reason you are feeling anchor is not working.

    Assuming that you have place any image in the class used in the div, try to replace your code with this:

    <a href="#"><div id="masterhome"></div></a>

    Hope it may work.

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WinWin - That worked Thank you both I see you placed the anchor before the ID

  8. #8
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I do not think you can put a <div> inside an <a> tag:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>anchor example</title>
     
    <style type="text/css">
    p.link{margin-bottom:1000px}
    </style>
     
    </head>
    <body>
     
    <p class="link"><a href="#masterhome" title="This links to another part of this webpage">Link</a></p>
    <p id="masterhome">This is the anchor.</p>
     
     </body>
    </html>

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The code winwinmantra provided isn't correct. A block-level element cannot be wrapped into an inline element.

    The code BPartch provided is correct.

    Or, if you need the div, then you can do this:

    <div id="masterhome"><a href="myhomepage.html" title="my title">My Link</a></div>

    What you currently have is wrong, missing the opening div tag, and not targeting the #masterhome ID.

    Code:
    <a="#masterhome" title="This links to another part of this webpage"></a></div>
    You're not linking to anything in the above nor are you referencing the ID Of "masterhome".
    So, either this:

    Code:
    <div id="masterhome"><a href="myhomepage.html" title="my title">My Link</a></div>
    Or this:

    Code:
    <a id="masterhome" href="myhomepage.html" title="my title">My Link</a>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both of those methods don't work as WinWin Method does. I see what you mean that it doesn't validate, I've tried switching it around but continues to not validate. I want it in the ID otherwise I can't position it to be placed over the image, as I want the method given probably validate but don't position it's self as WinWin method does, argh !

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You need to tell us what you're looking to do. Whatever it is, I can assure you there's a valid way of doing things.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this. This is another alternative. I checked in Chrome. It worked.
    ---------------------------

    <!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>Untitled Document</title>
    <style>
    #masterhome
    {
    background-image:url(http://www.sitepoint.com/forums/imag...mberpip2.gif);
    width:183px;height:88px;display:block;
    }
    </style>
    </head>

    <body>
    <a href="#" id="masterhome" ></a>
    </body>
    </html>

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You must pay attention to what everyone is saying and look at your code carefully. (and validate often)

    In your page you have these 2 invalid sections of html.

    Code:
     <a href="#"><div id="masterhome"></div></a>
     <div id="masterhome"><a href="#"</a></div>
    Both are invalid.

    In the first the anchor cannot surround a div as already mentioned and must be inside.

    In the second you have missed a closing bracket on the anchor.

    Change the code to this:

    Code:
     <div id="masterhome"><a href="#"></a></div>
    Then size the anchor to match the parent using display:block and width and height as follows:
    Code:
    #masterhome {
        position: relative;
        top: 50px;
        left: 85px;
        width: 125px;
        height: 125px;
    }
    #masterhome a{
        display:block;
        width:125px;
        height:125px;
        background:red;/* just for testing*/
    }
    I also note that you still have not added the missing closing div for #wrap which means that the footer is still sitting inside the wrong element and is still misplaced.

    I have told you to change this at least 5 times now with multiple examples and correct code yet you still have not changed it. If you do not understand then then that's fine but I have given you exact code a number of times and you only needed to cut and paste.
    Last edited by Paul O'B; Feb 23, 2010 at 13:34.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by winwinmantra View Post
    Try this. This is another alternative. I checked in Chrome. It worked.
    ---------------------------

    <!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>Untitled Document</title>
    <style>
    #masterhome
    {
    background-image:url(http://www.sitepoint.com/forums/images/common/ranks/memberpip2.gif);
    width:183px;height:88px;display:block;
    }
    </style>
    </head>

    <body>
    <a href="#" id="masterhome" ></a>
    </body>
    </html>

    That would work but would be semantically incorrect to have an inline element as a direct child of the body (and would be invalid because a strict doctype is being used).

  15. #15
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm not going to hold my breath here, but could we please see a mockup of your design? This will help both in finding a suitable approach to your current problem and preempting those which may arise in future.

  16. #16
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul & etc, I've fixed some of the errors so it should become clearer at this point, as well as the validation is still giving errors on the masterhome-ID and I've tried all your methods and the errors still arise.

  17. #17
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the test page you are working on?

  18. #18
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Past form would suggest that the test page is the one linked in the first post, but that the OP is working on a local copy and not updating the online version.

    When being assisted online it tends to make life easier to edit the online version directly.

  19. #19
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything is up to date online. I've had to do some adjusting if you validate you'll see the error as well my sidebar has positioned it self incorrectly, Paul ?

  20. #20
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have also done another change and I'd like to know how can I position the ID-SearchBox so that it's below the words home/about me/ etc. I don't know what method I should use to position it ?

  21. #21
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The validation errors are simple. One is for the top line here:
    Code HTML4Strict:
    <a href="#"><div id="masterhome"></div></a>
    <a href="#" id="masterhome" ></a>
    It is invalid, you cannot nest a block level element in an inline element. Delete it. This will also take care of the other 2 errors as they are saying that you have defined the same ID 2 times.

    Now let me ask what is your goal with this anchor? Where do you want the link to go within the file and where do you want the click-able link text/image to be? Is this so you can return to the top once the user has scrolled to the bottom?

    The sidebar dropping below the left column is due to it being too wide it looks like, I would have to investigate that further to be sure.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yup not nearly enough width . You can set "#content" to 307px and then lower "#sidebar" to 207px to get it working.

    Your columns are awfully small in width though
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Paul & etc, I've fixed some of the errors so it should become clearer at this point, as well as the validation is still giving errors on the masterhome-ID and I've tried all your methods and the errors still arise.
    No You haven't

    I gave you the answer in post #13 but you still have not changed your html. Please refer to post #13 and make those changes.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Ok - You finally added the closing div for #wrap but you did not move the footer base to the correct place and it is still misplaced. I've shown you a number of times now - I've lost count.

    Why have you also removed the clearfix code? Was there a reason that you did that?
    The floats will not be cleared when you move that footer base element to the correct place and your background will disappear.

    Lastly you have increased the widths of your columns but not increased the parent to compensate.

    Here is one last attempt.

    The code is valid and all elements are placed correctly (or as correct as I can tell from what you have asked) .

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!-- Meta -->
    <meta name="description" content="#">
    <meta name="keywords" content="#">
    <!-- CSS -->
    <link href="http://www.thecreativesheep.ca/pagehome/reset.css" rel="stylesheet" media="screen, projection" type="text/css">
    <link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
    <style type="text/css">
    body {
        line-height:1.2;
        background:#afabac url(http://www.thecreativesheep.ca/pagehome/images/bg.gif) repeat-x 0 0;
        font-size:13px;
        font-family:Arial, Helvetica, sans-serif;
        color:#333;
        text-align:center;
        padding:25px 0 20px;
    }
    #wrap {
        width:800px;
        margin:auto;
        text-align:left;
    }
    #maincol {
        width:800;
        background: url(http://www.thecreativesheep.ca/pagehome/images/middle.gif) repeat-y 4px -200px;
    }
    #content {
        width:370px;
        padding:1px 10px 1px 60px;
        text-align:left;
        min-height:400px;
        float:left;
    }
    * html #content {
        height:400px
    }
    #content p {
        margin:0 0 1em;
        line-height:1.5;
    }
    .content_boxes {
        background-color: #0000CC;
        width: 300px;
        overflow: hidden;
    }
    .top, .base {
        background:url(http://www.thecreativesheep.ca/pagehome/images/top.gif) no-repeat 0 0;
        clear:both;
        width:520px;
        height:23px;
    }
    .base {
        background:url(http://www.thecreativesheep.ca/pagehome/images/base.gif) no-repeat 0 0;
        clear:both;
        width:525px;
        height:28px;
        margin:0 0 0 20px
    }
    .bg_sidebar {
        background-color: #3300FF;
        height: 250px;
        margin: 120px 0 0;
        width: 200px;
    }
    #sidebar {
        float: right;
        background:#f2f2f2;
        width:358px;
        margin-top:27px 0 0;
        background-color: #99FF00;
    }
    #header {
        width:528px;
        height:236px;
        background:url(http://www.thecreativesheep.ca/pagehome/images/header_02.jpg) no-repeat 3px 0;
        position:relative;
    }
    #masterhome {
        position: relative;
        top: 60px;
        left: 85px;
        width: 125px;
        height: 125px;
    }
    #masterhome a {
        display:block;
        width:125px;
        height:125px;
        background:red;/* just for testing*/
    }
    ul#nav {
        position:absolute;
        top:180px;
        left:225px;
        margin:0;
        z-index:75;
    }
    #searchbox {
        background-color: #FF0033;
        height: 17px;
        width: 187px;
        z-index: 99;
        float:right;
        margin:85px 70px 0 0;
        display:inline;
        clear:both;
    }
    #nav li, #nav li a {
        width:60px;
        height:25px;
        float:left;
        position:relative;
    }
    #nav li.about {
        width:70px;
        margin-top:-7px;
    }
    #nav li.about a {
        width:70px;
    }
    #nav li.back {
        width:142px;
        margin:-18px 0 0;
    }
    #nav li.basepage {
        width:130px;
        height:90px;
    }
    #nav li.basepage a {
        width: 100px;
        height:100px;
    }
    #nav li.back a {
        width:142px;
    }
    #nav li.back a:hover {
        background:green url(http://www.thecreativesheep.ca/pagehome/headerhover.jpg) -352px -162px;
    }
    #nav li a span {
        position:absolute;
        left:-99em;
        top:-999em
    }
    .clearfix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /* mac hide \*/
    * html .clearfix {
        height: 1&#37;;
    }
    .clearfix {
        display: block;
    }
    /* End hide */
    </style>
    <!--[if lte IE 7]>
    <link href="iecss.css" rel="stylesheet"  media="screen,projection" type="text/css">
    <![endif]-->
    <!--[if IE 8]>
    <link href="ie8.css" rel="stylesheet"  media="screen,projection" type="text/css">
    <![endif]-->
    <!--[if lt IE 7]>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/pagehome/js/iehover.js"></script>
    <![endif]-->
    </head>
    <body id="home">
    <div id="wrap">
        <div id="header">
            <h1><span class="hide">WIP Creative Biology of animation</span></h1>
            <div id="masterhome"><a href="#"></a></div>
            <ul id="nav">
                <li class="home"><a href="#"><span>Home</span></a></li>
                <li class="about"><a href="#"><span>About Me</span></a></li>
                <li class="back"><a href="#"><span>Back(News news)</span></a></li>
                <li class="basepage"><a href="#"><span>BasePage</span></a></li>
            </ul>
            <div id="searchbox"></div>
        </div>
        <div id="maincol" class="clearfix">
            <div id="content">
                <div class="content_boxes">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                </div>
            </div>
            <div id="sidebar">
                <div class="bg_sidebar">
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                </div>
            </div>
        </div>
        <div class="base"></div>
    </div>
    </body>
    </html>
    Use all of the code above or none of it. Don't pick and choose bits as you keep omitting vital ingredients.

    You can of course adjust and tweak as necessary but keep the correct structure in place and if you increase the width of the children then make sure it still fits in the parent.

  25. #25
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope I have closed the <div> Everything appears to be as it should, hopefully I have to get more of the parts together so it comes together Although there is still one validation error !

    Thread to be updated !

    Edit: Forgot to mention how come the hover on the words back(new news) the word should become blue upon hovering instead it's a grey/brown block ?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •