|
HTML - Custom Fonts
Hi,
It's the first time I'm using custom fonts on a site, wondering why these rows don't work in Internet Explorer? HTML Code: @font-face {
font-family: Myriad Pro;
src: url(fonts/MyriadPro-Regular.otf) format("truetype");
}
@font-face{
font-family: Giddyup Std;
src: url(fonts/GiddyupStd.otf) format("truetype");
}
@font-face{
font-family: Orator Std;
src: url(fonts/OratorStd.otf) format("truetype");
}
Similar Tutorialssoak digital did a great helping me! thanks! (sorry for the added post, i had a question but i answered it myself. D'OH!) Hi all, This is my first post here. I was wondering if anyone can give me some advice on some goof looking fonts I can use in my HTML documents. I would like to hear some suggestions on fonts that look good when they are small like 8pt. I'm use Verdana and it looks good for the most part, but I see some websites where they have small bold fonts that look good. Some examples I was looking at were target.com, sears.com etc... I would appreciate any ideas. Thanks Hello! I have a problem with my webpage, only occuring when I am surfing with Firefox. I have an identic code on two different pages, but on one of them the letters look normal, on the other one they are suddenly messed up. At the pictures it can be seen. I have no clue why it is happening... can anyone help? The text is good at for example: http://www.hungarybudapestguide.com/restaurants/ - but if I go in to read about whatever restaurant later described the texts are messed up in Firefox as seen on the picture. How come? Hi all.... Ive been having issues trying to get these two lists below to look the same. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>MESH, Inc. - Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<img id="banner" src="images/topbanner.png" alt="top banner">
<ul id="top-nav">
<li><a href="mcad_project.html">mcad<span id="mcad"></span></a></li>
<li><a href="niosh_project.html">niosh<span id="nios"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="moad"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="scad"></span></a></li>
<li><a href="cloud_mapping.html">cloud<span id="clou"></span></a></li>
<li><a href="cloud_mapping.html">cloud?<span id="what"></span></a></li>
</ul>
<ul id="nav">
<li><a id="active" href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Engineering Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
<div id="content">
<div align="center"><span style="font-weight:bold;">ENGINEERING SERVICES</span></div><br>
<p>
Since 1978, MESH has been providing clients with engineering services to
solve their most complex problems. We specialize in:
</p>
<ul id="services">
<li>Software and hardware interfaces </li>
<li>Real-Time Software </li>
<li>Prototyping </li>
<li>Sensor Interfacing </li>
<li>Signal Processing </li>
<li>Electronic Design </li>
<li>User Interface and Design</li>
</ul><div align="center"><span style="font-weight:bold;">CHEMICAL/BIOLOGICAL STANDOFF MONITORING PRODUCTS</span></div><br>
<p class="padding-bottom">MESH provides leading edge technology to safeguard people and facilities from chemical and biological hazards. The MESH standoff systems, unlike point detectors, are not dependent on airborne threats finding their way to the detector or sampling point. The standoff sensors include: </p>
<ul id="services2">
<li>MCAD – Standoff sensor for chemical vapors at distances in excess of 6km </li>
<li>Dragonfly – Standoff aerosol sensor (either chemical or biological). </li>
<li>Firefly – Standoff vapor or aerosol hyperspectral imager based on innovative technology, resulting in an affordable approach to the next generation of chemical sensing. </li>
</ul>
</div><!-- end #content -->
<div id="footer">610-932-7754 <a href="mailto:info@meshoxford.com">info@meshoxford.com</a></div>
</div><!-- end #container -->
</body>
</html>
Heres the style sheet.... dont think this is the problem Code: body {
margin:10px;
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
overflow-y:scroll;
}
#container {
width:776px;
margin:auto;
background-image:url(../images/container-white-bg.png);
box-shadow:#333 15px 15px 30px;
}
#banner {
display:block;
width:760px;
height:120px;
padding:8px 8px 0 8px;
background-color:#066;
}
#top-nav {
width:768px;
height:81px;
padding:8px 0 8px 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#top-nav li {
float:left;
margin-right:8px;
}
#top-nav a,#top-nav span {
position:relative;
display:block;
width:120px;
height:81px;
line-height:81px;
font-size:90%;
font-weight:bold;
color:#000;
text-align:center;
background-color:#cff;
}
#top-nav span {
position:absolute;
top:0;
left:0;
background-image:url(../images/gallery-banner.png);
}
#top-nav span:hover {
opacity:0.5;
filter:alpha(opacity=50);
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top:hover {
text-indent:0;
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top span {
display:none;
}
#mcad {background-position:-8px -8px;}
#nios {background-position:-134px -8px;}
#moad {background-position:-260px -8px;}
#scad {background-position:-386px -8px;}
#clou {background-position:-512px -8px;}
#what {background-position:-638px -8px;}
#nav {
float:left;
width:120px;
padding:0 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#nav li {
margin-bottom:2px;
}
#nav a {
display:block;
width:120px;
padding:30px 0;
font-size:90%;
font-weight:bold;
color:#000000;
text-align:center;
background-color:#699;
}
#nav a:hover {
color:#fff;
}
#nav #active {
background-color:#cff;
}
#nav #active:hover {
color:#000;
}
#content {
float:left;
width:610px;
padding:25px 15px 10px 15px;
}
h1 {
margin:0 0 10px;
font-size:140%;
text-align:center;
}
#content p {
margin:0 0 10px;
font-size:90%;
color:#000;
}
#services {
font-size:110%;
color:#000;
}
.text-indent {
text-indent:20px;
}
.padding-bottom {
padding-bottom:16px;
}
#footer {
clear:both;
line-height:30px;
font-size:90%;
color:#cff;
text-align:center;
background-color:#066;
}
#footer a {
margin:0 40px;
color:#cff;
}
Thanks Coothead edit: photo of what it looks like in FF is it possible?? it's not working by any approach! i read about htaccess but didn't know how exactly i can use it to embed a font, if it solves firefox problem how can i use it?? here is the code, u will see eveything i tried Code: <!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>Untitled Document</title>
<LINK REL=FONTDEF SRC="http://www.site.com/CHILLER0.eot">
<style>
@font-face {
font-family: CHILLER0;
font-style: normal;
font-weight: normal;
src: url(http://www.site.com/CHILLER0.eot);
}
@font-face {
font-family: CHILLER0;
font-style: normal;
font-weight: normal;
src: url(http://www.site.com/CHILLER.TTF) format("truetype");
}
.psycho {
font-family: "CHILLER0", Verdana, sans-serif;
font-size: 48px;
color: #000099;
}
</style>
</head>
<body>
<!--[if !IE]> <!-->
<embed type="application/pdms-weft-plugin" font_face="CHILLER" src="http://www.site.com/CHILLER0.eot" hidden="true" pluginspage="http://pakdata.com/products/pdms-weft-plugin" />
<!--<![endif]-->
<p class="psycho">This Looks Embedded to Me</p>
</body>
</html>
really appreciated :hat: Hi, I have the html coding below that shows the bullet point with a caption below it. How would i format the actual bullet point to be a different size and colour to the caption below it? Thanks Code: <ol> <li>abc</li></br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <li>abcd</li></br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <li>abcde</li></br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </o> Hi, I would like to know exactly how do I specify a font and a color for specific head line or titles in a text using HTML. For example what code should I use if I wan't an Italian Cursive, 16th Century font light gray color as a headline. I'm really not using Dreamweaver, I've done everything with HTML, but if you consider it's easier to use CSS, would you tell me how is it done? Thanks a lot. Hi. I'm a FP/html/website builder noob. Is there a way to change all fonts/all backgrounds in FP2003/with html? e.g. Is there an easy way to change all fonts in headers, text areas, tables etc from one font to another. Thanks. I made a email signature, i used dreamweaver to make it. Looks good when i preview it. But when i add it to email as signature it doesn't show colors or the correct font. I dunno why? Can someone look at source code of my html and see if i made a mistake. Thanx http://users.bigpond.net.au/sublimecreatures/email.html I have a div that currently has standard scroll bars on it. However I would like to replace them with custom scroll bars or a button at the top and bottom which moves the text contained within it up and down. It must be compatible with Firefox. Does anyone have any suggestions or know an internet reference that I can look at to get some ideas? hey guys, just wondering if you could help me to know if this is possible and the way it is achieved... i have a contact form made up in photoshop that i want to work on the web. heres a preview... any help would be very much appreciated. Introduction: I am using an affiliate marketing program for Joomla!/Virtuemart called iDevaffiliate. It essentially tracks the sales of an affiliate, and you can set up commisions and pay them monthly. The techneque iDevAffiliate uses to get this done is much like a lot of other online affiliate programs I've seen. An affiliate get's his/her own special link to our store that they can direct their traffic through. They can put the link on their website, give it to a customer, or just hand it out. This is a good way, but I needed something a bit different. What I need: iDevAffiliate gives the affiliates their own special link. This link is the same for all affiliates, with the exception of the last 3 charachters which happen to be numbers. I want to create a page with 1 small form field in the center where a customer can come, type in those three digits, and the rest of the link would automatically be added upon submission. So, I need a form that has the capability to take what's typed into a the field, and add the remaining part of a link, then take them to it. Any Suggestions? Jeremy Hi everyone, I really don't know much about this topic, so I'd like some advice. I need to add some scrollbars to an iframe. They can be anything except the OS's scrollbars. As long as I can change the color or the shape or something to customize them that is great. Also, I read that this can only be done on IE. Is it possible to do it on other browsers. I also heard that it is possible through Flash? Does anyone know how I can do this? Thanks Im not too sure where this should go or how feaable this is to do but ill try. Ive used a custom font called "Bauer". Obviously everyone doesnt have this font and ive heard it is possible to upload the font and have it auto download to the fonts folder. Is this possible and if so how is the best way to do this? Hey, so I've been getting no luck with this, I finally managed to get a tool tip to work, but I'm a perfectionist and wont quit til its perfect. Heres my code for the particular section I'm trying to get to work: CSS a.info span { display: none; } a { color: #4b98a8; background-color: inherit; text-decoration: none } a.info:hover span { display: block; position: relative; margin: 2px 0; padding: 10px; background-color: #111; } a:hover { color: #4b98a8; background-color: #111; position: relative; } HTML <a href="http://google.ca" class="info"><h1>Acer</h1> <span> Website: http://google.ca<br /> Contact: (555)-555-5555<br /> Hours: Mon-Fri: 8AM-5PM </span> </a> So I've tried all sorts of other commands in css and It's not changing, I've been working from a template I'm in no means 100% knowledgeable in html/css but I gather the basic concepts. Now generally what I'm trying to accomplish is to get the tooltip to pop up to the right of the word "Acer" (It always pops up underneath) And the tooltip pops up when your on any part of the line Acer is on, I want it to op up only when you highlight the word. Here's my website link so you can see what it's doing. LK Electronics Hi, Click here to download my custom button: http://www.mediafire.com/download.php?zzdly4idyzu Basically, the easiest way would be to just type Code: <input type="button" style="background-image: url('button.png');" />
But what if I want it to be resizable based on the value? It won't work after that. Can someone help me to create a better button? Ok, I figured out how to embed an audio clip into the web page that works pretty well across multiple browsers. The code looks like this:
Code: <embed width="200px" height="30px" loop="false" autostart="false" src="/media/GOAL.wav"></embed> And it looks like this on the web page: My question is, is it possible to add to that code so only a custom PNG file is visible until you click it and then the player begins? I don't even necessarily need the player to be visible. Can the audio simply play once when the PNG is clicked? What would that code look like? Thx. Ok Hi, I'm new here. I'm no pro but I know a little about html. I'm currently building a website for a friend on freewebs. I like things to amazing so i want to use custom buttons on it. What would i have to do use custom buttons on the site http://pitirresparks.tk And i have another question. you know how you can position an image or object using x a y coords. How do i get those Is there an app. that allows me to know those coords I have a form with a Text Field and a Button. Pretty straightforward. Is there a way to get to a custom web page if a user writes a "trigger"-word in the Text Field and click on Submit? For example if he wrote USJ 298 he would come to usj.html and if he wrote USX 047 he would come to usx.html. Is it possible to do in HTML and/or without a database query? Thanks, JT |
|||||||