Cufon is een script die een font rendert zegmaar. Maar bij mij doet ie helemaal niets en weergeeft die niet mijn gekozen font. Dus op mijn pc doet ie het niet, maar als ik hem upload wel. Terwijl het gewoon in dezelfde browser is..
Voorbeeld online: http://bit.ly/fFiV8t
Screen online: http://i55.tinypic.com/2s6oglc.png
Screen op mijn pc: http://i53.tinypic.com/331m9f9.png
Ik gebruik Google Chrome, ik weet niet welke versie maar ik denk de nieuwste.
Windows 7 64 bit.
Zelfde pc zelfde browser, online werkt ie. offline niet... even niet op het te kleine menu letten, het gaat om de font
Hoe zien jullie de font, goed of niet goed?
En in Firefox, Internet Explorer & Safari werkt het bij mezelf niet, offline... maar als ik upload dus online wel.. :S?
Voorbeeld online: http://bit.ly/fFiV8t
Screen online: http://i55.tinypic.com/2s6oglc.png
Screen op mijn pc: http://i53.tinypic.com/331m9f9.png
Ik gebruik Google Chrome, ik weet niet welke versie maar ik denk de nieuwste.
Windows 7 64 bit.
Zelfde pc zelfde browser, online werkt ie. offline niet... even niet op het te kleine menu letten, het gaat om de font
Hoe zien jullie de font, goed of niet goed?
En in Firefox, Internet Explorer & Safari werkt het bij mezelf niet, offline... maar als ik upload dus online wel.. :S?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floor Burnin'</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/bgstretcher.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bgStretcher({
images: ['images/background.jpg'], imageWidth: 1024, imageHeight: 717
});
});
</script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$(".lavaLampBottomStyle").lavaLamp({
fx: "backout",
speed: 1000
});
});
</script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Crack_and_Bold.font.js"></script>
<script type="text/javascript">
Cufon.replace('#menu');
</script>
</head>
<body>
<div id="page">
<div id="container">
<div id="header">
<div id="logo"></div>
</div>
<div id="menu">
<ul class="lavaLampBottomStyle">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
HTML:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed !important;
z-index: 1;
}
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.bgstretcher UL, .bgstretcher UL LI {
margin: 0;
padding: 0;
list-style: none;
}
#page {
z-index: 2;
position: relative;
}
#container {
margin: auto;
width: 900px;
}
#header {
margin-top: 20px;
width: 900px;
height: 200px;
background: #000;
}
#logo {
margin: 20px;
float: right;
background: url(images/logo.png);
width: 268px;
height: 150px;
}
.lavaLampBottomStyle {
font-size: 28px;
position: relative;
height: 30px;
width: 683px;
background: url(images/trans.png);
padding: 15px;
margin: auto;
overflow: hidden;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
margin: 0 40px 0 0;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid #e7c006;
width: 9px;
height: 40px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 0;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}
Laatst bewerkt:
