Posted 3 years ago #
My journal about Japan, philosophy and bioluminescence. I posted here a while ago, but have since added several new features, such as email subscription, link navigation and language buttons. Please check it out and let me know your opinion + improvements!
Thanks!
Posted 3 years ago #
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. :)
Posted 3 years ago #
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!
Posted 3 years ago #
I am using Firefox 3.0.3 on Windows XP, so maybe the float issue is specific to that for some reason?
Check out: http://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 http://www.wp508.com for a working example.
Posted 3 years ago #
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!
Posted 3 years ago #
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('« %link') ?> <?php next_post_link(' %link »') ?></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...
Posted 3 years ago #
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?
Posted 3 years ago #
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.
Posted 3 years ago #
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.
Posted 3 years ago #
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...
Posted 3 years ago #
You won't need to, because the top, left, height, and width properties will restrict where the background image will be visible. :)
Posted 3 years ago #
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('« %link') ?></span> <span style="float:right"><?php next_post_link(' %link »') ?></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?
Posted 3 years ago #
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.
Posted 3 years ago #
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.
Posted 3 years ago #
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.
Posted 3 years ago #
*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!
Posted 3 years ago #
Okay, that's everything but the drop-downs done. I was a pain to get the images working again. I had to re-jig it so that I use z-index to overlap the links. Unless you know of any way to specify an exact point on an image to hyperlink? Effectively all I am doing is hiding the other transparency changes under the main image by sing z-index...
#menu{
float: left;
padding: 0;
margin: 0;
font-family: Georgia, sans-serif;
font-size: 25pt;
font-weight: bold;
width: 762px;
height: 100px;
position: absolute;
top: 300px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#menu ul li{
display: inline;
margin: 0;
padding: 0;
}
#menu ul li a{
text-decoration: none;
color: #003300;
border-bottom: 0 none;
}
#menu a{
overflow: hidden;
position: absolute;
left: 50px;
top: 28px;
height: 43px;
width: 655px;
background: url(images/kn-menu.png) top left no-repeat scroll;
border-bottom: 0 none;
z-index: 40;
}
#menu a:hover{
overflow: hidden;
border-bottom: 0 none;
}
#menu .home a{
width: 125px;
float: left;
z-index: 50;
}
#menu .home a:hover{
background:url(images/kn-menu.png) 0 -42px no-repeat;
}
#menu .about a{
width: 275px;
float: left;
z-index: 49;
}
#menu .about a:hover{
background:url(images/kn-menu.png) 0 -42px no-repeat;
}
#menu .goodies a{
width: 465px;
float: left;
z-index: 48;
}
#menu .goodies a:hover{
background:url(images/kn-menu.png) 0 -42px no-repeat;
}
#menu .topposts a{
width: 655px;
float: left;
z-index: 47;
}
#menu .topposts a:hover{
background:url(images/kn-menu.png) 0 -42px no-repeat;
}
#menu span {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
}This site was also great for checking gout IE6 and such. Do you know if z-indexes work properly on IE6 and Mac? It was a bit strange (the image rollovers don't work in IE6, but the links do...)
Posted 3 years ago #
Well... I mean there is always more than one way to reach a destination, so it really just depends on what you're the most comfortable with.
For link positioning, I recommend checking out this website...
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Check out tab 4 specifically, that deals with position: relative + position: absolute. It's mostly how I tend to position my elements lately, and it seems to work pretty well in most browsers and plays nice with margins and paddings. It might even help you dance around your z-index issue...
I guess I'm really just trying to teach you to fish rather than do it for you, so I hope you don't mind that? You seem to be taking CSS and the programming thing pretty well so good job. :)
Posted 3 years ago #
Nice link. It explains positioning clearly.
No, I'm perfectly happy with all the help you've given me! Thanks so much for your time. One day I'll have time to really learn CSS properly I'm sure, but I feel I've made a pretty good start so far ^^.
I'll probably do a short write up about all this on my journal sometime soon. Any site you'd like me to link to? I noticed your homepage is under construction...
Posted 3 years ago #
Yes you've definitely picked up on it really quickly!
If you'd like to link to my homepage that is perfectly fine with me! It is under some reconstruction but should be done soon. :)
Always appreciate the link love!
Posted 3 years ago #
Cool. Will do. Busy with essay and stuff right now, but will get around to it!
Posted 3 years ago #
All done: View the post here ^^
Posted 3 years ago #
I love it - but I'm biased, having lived in (and loved) Japan.
It's a nice looking site and I enjoyed reading your post about the rollovers. I've been thinking about incorporating a few into my own site, so I know where to find a good tutorial when the time comes.
Posted 3 years ago #
Thanks again for the kind words. :)
It took a lot of trial and error, but I finally got it to work. I created a new nav menu in my footer using this method and it works beautifully. The thing that was a real pain is that all of my image links are a different size and shape, so it was a huge pain to get each of the hover states positioned correctly. I still need to do the same thing for my header image, but that will be a project for another day.
Now I've got the header image and the nav menu working. It all makes sense after you figure out what you're doing, but my site was probably more difficult than most because all of the images I'm working with are weird shapes and sizes. The only problem I have now is that the header image does not appear in the correct position in IE.
This topic has been closed to new replies.
