Sign in to follow this  
Andrew D

Your websites?

Recommended Posts

I thought seeing how quite a lot of us have websites, that we could have thread dedicated to them where we can discuss designs, look at other people's sites and also get absouletely stumped by CMD when talking about CSS :)

So, yeah, I guess I may aswell start with my website: My Website

Anyways, today CMD managed to get my CSS sheets and te like sorted out so they work on all major browsers, and after using http://www.browsershots.org to get screenshots of my site in different browsers and OS's, and well, it's pretty much won top prize, as you can see :)

http://browsershots.org/screenshots/071 ... 246739.zip

So, yeah, the only thing which I have to do is to get more content for the place, and also find a way to thank CMD.

So, get posting your sites/designs/CSS tips/HTML tips/XHTML links/n00bish questions saying "OMG!!!! how did youz do tht?"/problems.

Share this post


Link to post
Share on other sites
Well, my only tip to you would be adding a wee bit o' color, unless you are intentionally going for the monochromatic look. ;)

I'm going for a monochromatic look.

1. It's modern, and

2. It means I don't have to mess with the CSS coding any more :)

Anyways, at the moment I'm working on a background image instead of just a plain grey background. And that isn't going that well to be honest.....

Share this post


Link to post
Share on other sites

I agree with Helio...too much gray. Add subtle color. :? And I suppose that if I'm going to comment I should offer my (2 year old) site for criticism... By Clicking Here

I just went there and realized that half the links don't work and my other websites aren't there anymore... :? Oh well there's still the dodgeball game I wrote my freshman year in college. ;)

Share this post


Link to post
Share on other sites

Hmm, this is interesting that someone would bring this up. I manage my church's old website. I don't really think anyone uses it anymore to be honest. Anyway, on to the 'problem'. My limited knowledge of CSS leads to the site's menu area being out of place in Firefox and Opera.

http://www.uvyouth.com

I've isolated the faulty CSS (the 'height/width:expression' statements), I'm just not sure how to make it work with anything other than IE.

H1,
#page_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:20px;
height:47px;
height:expression('70px');
width:334px;
white-space: nowrap;
width:expression('750px');
background-image:url('images/sitespecific/uvred.gif');
       background-repeat:no-repeat;
line-height:24px;
padding:22px;
text-align:left;
padding-left:80px;
padding-right:394px;
overflow:hidden;
margin:0px;
}

Share this post


Link to post
Share on other sites

My Sites:

  • [*:167igluv]
CMD Sketchpad
It's my PDN resources site! Soon to be available with three stylesheets for your pleasure (with a fourth one on the way :wink: ). Stay tuned!
[*:167igluv]Furon Technolografik
This was supposed to be my online portfolio site. I've had the site for nearly a year, and haven't actually put anything on there yet...
[*:167igluv]Furon Technolografik [v2]
I got bored with the old site design. This one will be the new design. I used this site an assignment for class, so there are a few extraneous example layouts on the "Classtime Examples" page. (Also, for your enjoyment, there's a rough, partly completed version of one of my songs on that page as well! :wink: )

@Wither:

When I look at it in Firefox and Opera, the menu links are in the correct spot (as in, they sit in the horizontal bar), they just abut each other instead of being spaced out as desired.

The reason for this is the spans you have between the links. A proper rendering engine will disregard a set width of an inline element (such as a or ), as inline elements are meant to shrink-wrap around the content within them. You can space the links out by either removing the spans and changing the attribute set that starts on line 94 by adding "padding:0px 11px;" as so:

#linksarea a, #linksarea a:link, #linksarea a:visited, #linksarea a:active { /* style.css (line 94) */
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
padding:0px 11px;
text-decoration:none;
}

Or by removing the width from #linksdivider (line 107) and adding the same "padding:0px 11px;" statement as so:

.linksdivider { /* style.css (line 107) */
padding:0px 11px;
}

If I could suggest one option, I'd suggest removing the spans, since the effect can be accomplished without them. Removing the span tags will streamline the navigation somewhat (unless...*).

* The Contingency

If you want to be nice to any possible users using screen readers, you use the span tags to hide some form of separator characters to break up the links. To do that, you just add a character (/,\|) in between the span tags:

 / 

Then, instead of a width or padding statement at line 107, you'd have:

.linksdivider { /* style.css (line 107) */
display:none;
}

(Note that since the spans are hidden, you'd need the padding attribute on the tags as stated above)

This would hide the separator character from users viewing the full version, but would leave it in the markup for users using an assistant device. With the links the way they are now, a screen reader would try to read the links as a sentence. Adding a slash or similar character will provide a break point for the screen reader so the users can hear the individual links instead of a jumbled sentence.

Using a separator character with spaces around it as in the example above would also provide a clear visual separation to anyone looking at your site without CSS.

Are users using screen readers or browsing without CSS ever going to visit your page? I don't honestly know, but it's always a good idea to have in there just in case. :wink:

Share this post


Link to post
Share on other sites

Oo thanks, I'll be sure to try that in the morning. (As doing it now might cause more harm than good due to my brain's lack of focus on this particular 1:40 am)

You know, that block of text was more helpful than the entire CSS reference on W3Schools. Either that or I'm just particular bad at looking up information that isn't spelled out right in front of me. :P

Thanks again!

Share this post


Link to post
Share on other sites

My site is/was a collection of things that have attracted my interest over the years. That particular page is taken from the site that is linked at the bottom of that page. I actually bought the book about 8 years ago and about 5 years ago thought people might find some of the fetishes listed as funny or informative. Specially ones like a pie in the face. I actually had to script to remove the Google ads from that page as they said it was against their terms.

It's on the side nav of the new layout because I hadn't gotten round to doing the script for the side menu yet and had just tossed together a static example based upon the Home side menu of the site.

Share this post


Link to post
Share on other sites

CMD & Carbonize: Thanks for clarifying that guys. I was just making sure I wasn't going to be in breach of the advertising/soliciting rule(s).

Feel free to comment on the site. If it's really harsh pm me instead :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this