Knowing Nothing

Wow at first glance I find it very refreshing. If this is a custom theme then my hat is off to you.

One thing that would bring it a step up, is maybe an alternate state for mouse over and current item. When the “knowing nothing” is the same font as your navigation, but one is a link and the others are not, it confused me immediately even though I figured it out just as fast. That momentary judgment call throws off the usability right away.

Also, the second link in your single.php #navigation doesn’t float right like it probably should.

Honestly I love the overall design and I think it works well with what you’re communicating, so that is a very good first step. ??

Hi there John!

Thank you for your comments. It is a custom theme, built on another theme’s coding (since I haven’t learnt to code from scratch :p)

Could you explain a little more which page(s) you mean please? And what browser are you using?

Any ideas how I could yet the header ‘knowing nothing’ into a link? I want to, but I don’t want to mess around with image maps… Perhaps I could just position another png image absolutely like my navigation..?

Secondly, which link on which page doesn’t float right? I haven’t been able to find this yet…

Thanks again!

I am using Firefox 3.0.3 on Windows XP, so maybe the float issue is specific to that for some reason?
Check out: https://michaeldowney.net/bioluminescence-video/

Look below where I would submit a comment, and you’ll see both the previous and the next post links right next to each other.

As far as turning the ‘knowing nothing’ into a link, what I do is something like this…
<a href="whatever" id="foo"><span>Whatever</span></a>
Then in your CSS, put something like…

#foo { position: absolute; height: 100px; width: 100px; left: 200px; top: 200px; background: url(sfaf) top left no-repeat;
}
#foo span { position: absolute; height: 0; width: 0; overflow: hidden; }

It’s a little trick to make an empty anchor that you can style however you’d like. Could even put that in your h1 and make sure the link matches the title.

I would do that for your main page links also… You can see this technique applied at the footer of my Section 508 website at https://www.wp508.com for a working example.

Thanks for the advice I’m working on both problems, but neither seems to be an easy fix. I’m having real trouble with that empty anchor right now. Whenever I apply the span class it hides the image. Also, how do you get the transparent mouse overs on your site in the footer? Nice design by the way!

If you happen to have free time and would like to help me, here is the code in my browse.php file which specifies the forward and back links:

<?php if (is_single()) : ?>

	<div class="browse"><?php previous_post_link('&laquo; %link') ?> <?php next_post_link(' %link &raquo;') ?></div>

<?php else : ?>

	<div class="browse"><?php posts_nav_link() ?></div>

<?php endif; ?>

I tried two different div tags, but that put the links on different lines. Span tags didn’t work either…

Well, it took me all night, but I solved the first problem! The new links are great, and I finally have a linking title!

Still have to solve that alignment problem though. Any ideas?

Ha. I knew I spoke too soon. I have validation errors saying the ‘opacity’ property doesn’t work in CSS 2.1 and such… Any ideas?

Also, IE isn’t recognising the opacity functions at all. Just like IE then.

For the wp508 site, you can see the image I used to make the normal and roll-over states…

Basically it’s one image that includes all of the states of the link, and you adjust the background image accordingly. You’re correct that opacity will not validate, nor will it really work 100% correctly in all browsers, so just manually create the state and put them in 1 file. ??

Here’s another file showing a similar trick, with states for normal, hover, and current.

Interesting… So you’re saying you adjust the position of the background image vertically on mouseover and such? How do you hide the other parts of the image then? Sorry if I’m missing something obvious…

You won’t need to, because the top, left, height, and width properties will restrict where the background image will be visible. ??

Excellent! All fixed up.

I used this code for the pictures to ‘move’ and fake transparency:

#logo {
	float: left;
	padding: 0;
	width: 762px;
	height: 300px;
	margin: 0 auto;
	position: absolute;
}

#logo ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#logo ul li{
	display: inline;
	margin: 0;
	padding: 0 0;
}

#logo ul li a{
	text-decoration: none;
	color: #003300;
	border-bottom: 0 none;
}

#logo a{
	overflow: hidden;
	border-bottom: 0 none;
}

#logo a:hover{
	overflow: hidden;
	border-bottom: 0 none;
}

#logo .knowingnothing a{
	position: absolute;
	top: 74px;
	left: 81px;
	width: 296px;
	height: 123px;
	background:url(images/kn-header-mouseover.png) 0 0 no-repeat;
}

#logo .knowingnothing a:hover{
	background:url(images/kn-header-mouseover.png) -296px 0 no-repeat;
}

#logo span {
	position: absolute;
	height: 0;
	width: 0;
	overflow: hidden;
}

And this code to get my floats separated:

<div class="browse"><span style="float:left"><?php previous_post_link('&laquo; %link') ?></span> <span style="float:right"><?php next_post_link(' %link &raquo;') ?></div></span>

The images flicker a little hovering over them at first, but I guess that can’t be avoided… The only real problem is the image file size, since they are PNG images I have to use (GIF quality is not good enough). Thanks again for all your help! I’ve really learnt a thing or too in the past few days ^_^

Any other thoughts?

The reason they flicker is because the images are only loaded once the :hover asks for them to be, that’s why I put all of the link states in one file, and adjust the background x and y accordingly. That way, the image is downloaded when the page loads, and the flicker is totally avoided. Tricky eh?

My only other nit-picks would be that maybe your #footer_credits could use some additional margin-bottom, since on Firefox the text starts to overlap the footer image… And that maybe your drop down lists could use some CSS styling also, to make them as pretty as the rest of the design.

The reason they flicker is because the images are only loaded once the :hover asks for them to be, that’s why I put all of the link states in one file, and adjust the background x and y accordingly. That way, the image is downloaded when the page loads, and the flicker is totally avoided. Tricky eh?

My only other nit-picks would be that maybe your #footer_credits could use some additional margin-bottom, since on Firefox the text starts to overlap the footer image… And that maybe your drop down lists could use some CSS styling also, to make them as pretty as the rest of the design.

The reason they flicker is because the images are only loaded once the :hover asks for them to be, that’s why I put all of the link states in one file, and adjust the background x and y accordingly. That way, the image is downloaded when the page loads, and the flicker is totally avoided. Tricky eh?

My only other nit-picks would be that maybe your #footer_credits could use some additional margin-bottom, since on Firefox the text starts to overlap the footer image… And that maybe your drop down lists could use some CSS styling also, to make them as pretty as the rest of the design.

*Nods. I’ll get onto those then.

I have a question about your site. How do you use the href=”#something” command to link to different points on a page? I tried searching for it, but I don’t know what that type of linking is called so I couldn’t find any tutorials.

I guess I’d better get reading up on creating drop down lists then. Looks like that will be my next challenge when I have time ^^ If you know of any useful tutorial sites, please point me in their direction.

Thanks again!