Website Makeover
Jun. 23rd, 2006 11:24 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
viciouswishesI have done a makeover and general update on Sliver of Ice, my personal fic and fannish site. I spent about 2 days working non-stop on it, and now I'm very behind in the rest of my fannish life and my neck hurts. Let me know if any thing's wacky on your browser. There's still some issues with sizing as I need to tell it not to shrink.
It looked horrible with wrongly placed graphics on my outdated IE.
It looked horrible with wrongly placed graphics on my outdated IE.
![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
no subject
on 2006-06-24 07:42 am (UTC)It looks nice; I like the graphic.
You don't need to put the <html> tags in your css document. Your css might be better off like this:
body,html {
background:url(buffygunn.jpg) top no-repeat #D18A92;
margin-top: 317px;
color: #D18A92 */here you have set the text colour and the background colour as the same; I'm not sure what that is for but I am flagging it as weirdness/*
}
h1, h2, h3, h4, h5, h6 {
color: #D18A92
}
table {
border-collapse: separate
}
a:link {
color: pink; text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
table {
background-color: black ;
width: 679px;
}
table {
margin-bottom: 10px;
}
It's a bit of a hack to push the body down the page in that way. It might be a bit nicer and cleaner to pop the header graphic in its own division and style it in your css (<div id="header"></div> . #header{background url(buffygunn.jpg) center no-repeat; height:317px; width:YOURWIDTHHERE;} ) but that's totally up to you of course!
You ought to define a base size for your text in the body selector. Just font-size:1em will do.
Now, in your html there are several issues. Your div "hdr" is a menu, but it is not coded as a menu or list. It might be worth marking that up as an unordered list and then styling that list. So:
<div id="hdr">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="fanfic.htm">Fanfic</a> </li>
<li><a href="meta.htm">Meta</a></li>
<li><a href="ficrec.htm">Fanfic Recs</a></li>
<li><a href="icons.htm">LJ Icons</a></li>
<li><a href="caps.htm">Screencaps</a></li>
<li><a href="graphics.htm">Other Graphics</a></li>
<li><a href="http://viciouswishes.livejournal.com">My Blog</a></li>
<li><a href="links.htm">Links</a></li>
</ul>
</div>
and then:
#hdr ul li {
list-style-type:none;
padding-left:5px
}
COLOUR
Your colour scheme is pretty, but inaccessible to many readers. colorChecker returns:
Your colour combination of #ffc8cb and #D18A92 does not pass Checkpoint 2.2
Brightness
The difference in brightness between your foreground and background colours is 57 and is therefore insufficient. The W3C recommends a standard of 125 or greater.
Contrast
The contrast between your foreground and background colours is 165 and is therefore insufficient. The W3C recommends a standard of 500 or greater.
I suggest choosing a darker colour for your text.
no subject
on 2006-06-24 07:43 am (UTC)In every page you have an empty "leftcol" div, but you have not laid out your site in two columns, or styled either div (left or right) in your css. This code has no use that I can see.
Your links page is still in tables and in the old style. I'm just noting that here. It's why I left the table styles in the css, though you don't need a table to get that effect - you can easily achieve the same thing with css by recoding your html like so:
<html>
<head>
<title>Sliver of Ice</title>
<link rel="StyleSheet" type="text/css" href="my.css">
</head>
<body>
<div id="hdr">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="fanfic.htm">Fanfic</a> </li>
<li><a href="meta.htm">Meta</a></li>
<li><a href="ficrec.htm">Fanfic Recs</a></li>
<li><a href="icons.htm">LJ Icons</a></li>
<li><a href="caps.htm">Screencaps</a></li>
<li><a href="graphics.htm">Other Graphics</a></li>
<li><a href="http://viciouswishes.livejournal.com">My Blog</a></li>
<li><a href="links.htm">Links</a></li>
</ul>
</div>
<div id="centerbox">
<h2>Friends' Fanfic Sites</h2>
<ul>
<li><a href="http://www.octavesoftheheart.com/nightneverending">Night Never Ending</a></li>
<li><a href="http://girlincombatboots.com">Girl in Combat Boots</a></li>
<li><a href="http://e.domaindlx.com/onlyshadows">Only Shadows</a></li>
<li><a href="http://www.minitrog.com/sotf">Symbols on the Floor</a></li>
<li><a href="http://ferretgirl.freeweb-hosting.com">FerretGirls' Writings</a></li>
<li><a href="http://www.geocities.com/entrenous88">Just Between Us -- Fanfiction of EntreNous</a></li>
<li><a href="http://home.planet.nl/~dutchbuffy2305">Upside Down and Half Way to Happy Land</a></li>
<li><a href="http://www.geocities.com/lochnoir">Willow's Ripper</a></li>
<li><a href="http://www.squidge.org/glitterjungle">Glitter Jungle</a></li>
<li><a href="http://cleejh.diaryland.com/home.html">LadyForASH Fanfic - A Buffy/Giles Fanfic Archive</a>
</li>
<li><a href="http://www.octavesoftheheart.com">Octaves of the Heart</a></li>
<li><a href="http://www.angelfire.com/vamp/aurons_girl">Auron's Girl's Fan Fiction and Other Stories</a>
</ul>
no subject
on 2006-06-24 07:43 am (UTC)<ul>
<li><a href="http://www.octavesoftheheart.com/fivethings">Five Things</a> (Five Things archive)</li>
<li><a href="http://glass.psubrat.net">Step Back From the Glass</a> (Faith/Wesley archive)</li>
<li><a href="http://decadent.popullus.net">Decadent</a> (Lilah/Spike archive)</li>
<li><a href="http://evil.invisibleflames.com">Fashionably Evil</a> (Cordelia/Lilah archive)</li>
<li><a href="http://www.monosyllabic.net">Monosyllabic Eccentricity</a> (Oz archive)</li>
<li><a href="http://fangedfour.com/referencekey">The Reference Key</a> (Angel/Spike Database Project)</li>
<li><a href="http://www.wesleyfanfiction.net/archive">Wesley Fanfiction.net</a> (Wesley archive)</li>
<li><a href="http://incest.yoko-factor.net">Blood Sings</a> (Multifandom Incest archive)</li>
<li><a href="http://spike.vampyrehaven.net">Love's Bitch</a> (Spike archive)</li>
<li><a href="http://www.mistsandmellow.net/willing">Perfectly Willing</a> (Buffy/Gunn archive)</li>
<li><a href="http://www.imjustsayin.net/indemnity">Double Indemnity</a> (Lilah/Wesley archive)</li>
<li><a href="http://www.fangedfour.com/deepin">Deep In</a> (Angel archive)</li>
<li><a href="http://angel.vampyrehaven.net">Angel Without Wings</a> (Angel archive)</li>
<li><a href="http://www.fangedfour.com/deadboy">The Adventures of Captain Peroxide and Deadboy</a> (Spike and Angel archive)
</li>
<li><a href="http://www.exitseraphim.net/endofdays">End of Days</a> (Multimedia Fan Tribute to Angel: the Series)
</li>
<li><a href="http://www.silpent.com/watcherlove">Watcher Love</a> (Giles/Wesley archive)</li>
<li><a href="http://onenine85.net/rare">Subtile Pairings</a> (Buffyverse Rare Pairings archive)</li>
<li><a href="http://www.lovelorne.net">Love Lorne</a> (Lorne archive)</li>
<li><a href="http://www.geocities.com/wesley_cordelia">The Last Time</a> (Cordelia/Wesley archive)</li>
<li><a href="http://www.geocities.com/cordeliawesleysite">The Iron Is Hot</a> (Cordelia/Wesley archive)</li>
<li><a href="http://undisclosed-location.org/gwen/">Toque Electrico</a> (Gwen archive)</li>
<li><a href="http://www.caffeine-headache.com/fredslash">Sexy Pylean</a> (Fred Femmeslash archive)</li>
<li><a href="http://www.no-hero.org/spikenwes">Peaches Won't Be Happy</a> (Spike/Wesley archive)</li>
<li><a href="http://www.primalglyph.lunarpages.com/angelbod">Angel Book of Days</a> (Ficathon archive)</li>
</ul>
<ul>
<h2>Other Fanfic Sites</h2>
<li><a href="http://betterbuffyslash.slashcity.org">Better Buffy Slash Archive</a></li>
<li><a href="http://s8219.net/BetterBuffyFic">Better Buffy Fiction Archive</a></li>
<li><a href="http://www.allaboutspike.com">All About Spike</a></li>
</ul>
</div>
</body>
</html>
And the css would go, approximately, I haven't checked this:
body,html {background:url(buffygunn.jpg) top no-repeat #D18A92;margin-top:317px;color:#ffc8cb;text-align:center}
h1,h2,h3,h4,h5,h6 {color:#D18A92}
a,a:link,a:hover,a:visited {color:#ffc8cb;text-decoration:none}
#hdr ul li {list-style-type:none;padding-left:5px}
#centerbox {background:#000;color:#ffc8cb;margin:10%;text-align:left}
#centerbox h2 {font-size:1.1em;font-weight:normal;color:#D18A92}
no subject
on 2006-06-24 07:47 am (UTC)no subject
on 2006-06-24 10:33 pm (UTC)no subject
on 2006-06-25 08:13 am (UTC)no subject
on 2006-06-24 01:56 pm (UTC)Gabrielle
no subject
on 2006-06-25 04:07 am (UTC)no subject
on 2006-06-25 04:17 am (UTC)gabrielle
no subject
on 2006-06-25 04:30 am (UTC)no subject
on 2006-06-25 04:33 am (UTC)Gabrielle
no subject
on 2006-06-24 10:12 pm (UTC)no subject
on 2006-06-25 04:29 am (UTC)I'm always totally cool with people friending me. I don't always friend back, which is mostly a time thing.