Anchor not working

bpartch · February 24, 2010, 3:24am

The validation errors are simple. One is for the top line here:

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

RyanReese · February 24, 2010, 3:58am

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

PaulOB · February 24, 2010, 10:02am

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.

PaulOB · February 24, 2010, 10:26am

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


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

system · February 24, 2010, 12:43pm

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 ?

PaulOB · February 24, 2010, 1:49pm

It’s fixed in my code above

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 ?

I have fixed that also in my code above and it is in working order. Just cut and paste that code and test it and you will see it works.

Aalthough you shouldn’t really be swapping the whole header image just the relevant section. I moved the relevant part of the image into place using the background-position but unless you are going to use that same large image for multiple hovers then you should just make a small image the same size as the text that you need otherwise the delay will be too long.

Victorinox · February 24, 2010, 2:07pm

The validation error is due to the continuing presence of

Why you need the div at all is a mystery to me. If the purpose of the element is to provide a link to your home page why not just use the anchor? If the div is intended to serve some other purpose please let us know.

The grey background on the hovered nav link is due to the background image not being positioned correctly.

#nav li.back a:hover {
background-image:url(headerhover.jpg);
background-position: 176px 786px; /* ADD THIS */
}

I’m curious as to what you plan “BACK (NEW NEWS)” to link to. “Back” usually indicates a link to the previous URL, so there’s potential for confusion if you have something else in mind.

UPDATE: Posted simultaneously with Paul. His suggestion for your nav hovers is better (naturally)

PaulOB · February 24, 2010, 2:18pm

Yes that does seem a bit odd now you mention it

Victorinox · February 24, 2010, 4:45pm

Does anyone share my opinion that it would be profitable for the OP’s design concept to be submitted to the Design Elements section of the forum?

RyanReese · February 24, 2010, 5:08pm

That specific part could be in the Design elements, though it’s completely up to the OP if he decides to have his design elements / page critiqued by these forums

PaulOB · February 24, 2010, 5:12pm

I think this is his rebuild after comments he received on his old site in the review section (if I’m not mistaken)

Victorinox · February 24, 2010, 5:53pm

Entirely up to the OP, of course, but I have a distinct feeling that the ratio of steps forward to back would be improved by the community having an overview of where the project is heading, which would benefit all concerned in terms of time expended and the OP particularly regarding structuring and planning techniques.

system · February 24, 2010, 7:45pm

I’ve went over the code Paul posted bit-by-bit.

The validation error is due to the continuing presence of

Why you need the div at all is a mystery to me. If the purpose of the element is to provide a link to your home page why not just use the anchor? If the div is intended to serve some other purpose please let us know.

The grey background on the hovered nav link is due to the background image not being positioned correctly.

#nav li.back a:hover {
background-image:url(headerhover.jpg);
background-position: 176px 786px; /* ADD THIS */
}

I’m curious as to what you plan “BACK (NEW NEWS)” to link to. “Back” usually indicates a link to the previous URL, so there’s potential for confusion if you have something else in mind.

The Anchor does not have to be a <div> it will be a invisible link that hopefully will be found with ease The page validates but the Master Home link does not work. The background now is fixed, but I do have to align the images better although what Paul said here:

Although you shouldn’t really be swapping the whole header image just the relevant section. I moved the relevant part of the image into place using the background-position but unless you are going to use that same large image for multiple hovers then you should just make a small image the same size as the text that you need otherwise the delay will be too long.

Should I take the text out of the graphic and then create a link or a <div> on top of the graphic ? It makes sense not to load the entire graphic I just don’t know which step to take ?

You don’t like the way the page looks ? As Paul mentioned this is a rebuild I wanted to have something more unique to the name. The page is making progress thanks to some wonderful people helping me

PaulOB · February 24, 2010, 8:15pm

No you didn’t you missed the important bit.

The Anchor does not have to be a <div> it will be a invisible link that hopefully will be found with ease

The anchor does need to be in a div as we can’t have inline elements hanging around on their own.

The page validates but the Master Home link does not work.
Yes it does work in my version.

I’m going to take you to task again I’m afraid (you knew this was coming didn’t you?)

I have probably given you this same answer nearly 4 times now in this same thread but you still have not followed my instructions.

The masterhome anchor is working perfectly in the full code I posted earlier and in the snippets I gave you many times already.

yet again you have taken only some of the code and left out the important bits.

I gave you all this:


#masterhome {
    position: relative;
    top: 60px;
    left: 85px;
    width: 125px;
    height: 125px;
}
[B]#masterhome a {
    display:block;
    width:125px;
    height:125px;
    background:red;/* just for testing*/
}
[/B]

But you left out the part in bold and only used this:


#masterhome {
    position: relative;
    top: 60px;
    left: 85px;
    width: 125px;
    height: 125px;
}

Why did you do that?

That means the anchor has no height and can’t be clicked.

PUT MY CODE BACK IN PLACE AND It WILL WORK.

Should I take the text out of the graphic and then create a link or a <div> on top of the graphic ? It makes sense not to load the entire graphic I just don’t know which step to take ?

All you have to do is cut that text out of the original image and make it the same size as that anchor (142x25) and then change the background-position of the anchor to 0 0. You don’t have to change anything else in the code as it is already in place but you do have to cut the image properly.

You must try to help yourself a bit here as you are making silly mistakes along the way. I don’t mind helping but I’m becoming exasperated here

system · February 24, 2010, 9:03pm

Remember to Pin point exactly the thing to change or the style sheet, I usually am better at matching and fixing

I’m going to fix and add the other parts at this stage You can take deep breath now Paul and have a Coffee Crisp (chocolate bar) And everyone else can enjoy a Kit Kat

Victorinox · February 24, 2010, 9:24pm

Well, if you’d provided a mockup I’d be able to comment more usefully.

I’m glad you’re making progress. My previous point was that I believe there is a way for you to make faster and more effective progress.

At this point I’m going to take heed of a remark you made when Paul was helping you finish your previous design last May:

One of two things I learned it a) how to structure a page, even though I do like this page and it looks good and second, I let too many unskilled hands (not including you) touch my code or tell me things to do with it which caused this jigsaw puzzle which you got a little more organized.

The lesson (as I see it) is that, with your particular way of working, the more people (skilled or unskilled) that pitch in the more likely it is that progress will be impeded by coding conflicts and confusion. You’d really benefit most from one to one support. Therefore, not being in a position to offer this, I’m going to bite into an extra-mega-super-jumbo size Kit Kat, subtract myself from the noise, and bow out. Good luck with your project.

system · February 24, 2010, 11:22pm

Vector don’t feel like you haven’t helped It’s just that with too much input it tends to put me off balance, nothing personal everyone is unique in there own way. I’m sure most don’t like having alot of people tell them what to do at the same time (at least I hope!!!,that last part has not relation to this thread but I wanted to bring it up cause we all have run into it :))

You’re welcome to give your input

I have not put the links in yet, reason I can’t figure out how to put the transparent boxes that are in the style:.content_boxes behind each paragraph and based on the content the background graphic will scale or shrink based on what is being read from PHP ?

I’ve also tried to position the graphic in the style:#sidebar to be behind the style:maincol but when I move it around in HTML the whole page goes wonky.

PaulOB · February 25, 2010, 10:42am

Thanks, I can’t resist chocolate

I see you have fixed the anchor and the footer now.

For your content boxes you will need to split the image into three.

A top section about 389px x 25px

A middle repeating section about 389px x 10px

a base section about 389px x 25px.

Then apply the images to a structure like this.

<div class=“content-top”></div> = top part of image

<div class=“content_boxes”> = repeating middle section of image

<div class=“content-base”></div> = bottom part of image to finish off the box.

e.g.


<div class="content-top"></div>
<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 </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 </p>
</div>
<div class="content-base"></div>

system · February 25, 2010, 4:34pm

Paul what do I style the ID and Classes with, I have uploaded an updated version there are just no images uploaded at this point and only one of the style sheets is within the code

PaulOB · February 25, 2010, 8:42pm

You would need code roughly like this but of course the top and bottom heights should match the image that you cut.


.content-top,.content-base{
    width:389px;
    height:25px;
    background:url(images/content-top.jpg) no-repeat 0 0;
    overflow:hidden;
    clear:both;
    margin:.5em 0;
}
.content-base{background:url(images/content-base.jpg) no-repeat 0 0;}
.content_boxes{
    width:389px;
    background:url(images/content-mid.jpg) repeat-y 0 0;
}