|
CSS - Custom Font And Sifr
When i add sifr to my site i am experiencing the following problems
1. Some elements disapear. ( the date componet ) 2. theres a space at the start of each para. 3. text justify is not being applied. u can see both the pages here http://harshamv.com/test.php the original page with out siFr http://harshamv.com/index.php Is there any way to add fonts to the web design better than this ? Similar TutorialsI'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something. I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use? I have a site, osake.garychus.com on which I am attempting to use a custom font called Lato. On MACS it is all messed up on the pages, on my 2nd laptop at home it shows up but in another font I believe. Am I doing something wrong? Hey guys, Sorry I can't be anymore specific, but I'm not entirely sure how to describe my problem. I have managed to get sIFR working on my Journal, but for some reason the sIFR headline seems to extend all the way through the main div. The CSS H1 is normally styled with padding-right: 250px; so that it does not interfere with the side panel. However the sIFR h1 seems to run across into the side panel. This is best demonstrated by looking at an example: My Journal I've tried changing some of the things in sifr-screen.css, but to no avail. The problem is also evident in Opera. IE messes the entire page up - any ideas? Thanks, Sajid. not sure if this is in the right post, but I figure some CSS guru's would no the answer. I have to implement the SIFR plugin for some custom font face. I am already noticing difficulties due to re-sizing issues. I'm a little confused on that as of now. My main question was if it was possible to implement styles to the flash sifr file. I am currently using the jQuery plugin to implement sifr, and when I use it on anchor tags, It does not seem to take on the functionality of the link, let alone the style. have a blog post page on this website: plesae searhc for "refbc" and you will come to the real estate foundation of BC website - go to news and events, news The title of each blog post is tagged to use H3, with a font size of 18px. This looks fine to me. The last 4 posts from this page also appear on the home page of the site (sorry I was not allowed to post links ...) They are under "Foundation News". The title of each post is bigger then H3 although it is h3. I was told that the home page font (or all fonts) is controlled by sIFR, which I don't know how to work with. This site is developed by someone else, but he has left and I need to do some changes. One being to make the blog post titles on the home page smaller. But I can't see how to do it, and I don't know how to work with this sIFR that the previous person has generated. My boss thinks that it is something really simple - like just make them smaller. So I need to produce some results quickly. Can someone help? I am very desperate here after about a week of trying to get this to work. Thanks. . Hi, I'm using SIFR for the headlines on my website, to replace my <h1> text. Please look at http://209.172.34.108/~free/kpformations/test.html The three paragraphs are all <h1> tags but have different sizes. The CSS stylesheet is in the source of the page. Please can you have a look at this and tell me is there any way I can make the <h1> tags the same size and not resize autmatically? I have tried changing the font line height but that didnt work. Please help! I am new to coding so dont make fun of me or anything if this is stupid.. I'm coding my own tumblr right now, and it looks pretty good so far. I just dont know the code to make an image 'static' and stay at the top. If you take a look (hockey-lax-bro.tumblr.com/) you will see what i mean. The follow button and picture on the right 'follow' you wherever you scroll. Code: <div style="position:right;5px:top;25px">
<a href="https;||twitter.***/J_Harris012" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @J_Harris012</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.***/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style="position:right;30px:top;55px">
<a href="http;||i42.tinypic.***/2ai0etj.***" target="_blank">
<img class="normal" src="http;||i46.tinypic.***/15o8nj9.***" alt="install theme" />
</a>
</div>
Thats the coding that i have right now ^^ (i had to change a few things because new members are not allowed to post links) what do i need to change to make the buttons stay at the top? Hi, I'm trying to make my own custom CSS for Internet Explorer to load when I visit the www.tv.com site. How do I go about making it domain specific? Is there an IE alternative to Firefox's @-moz-document domain("tv.com") method? Can I use custom fields in IE or not? This is the complete example page I'm working with: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://localhost:9080/garage68/">
<title>TestCSS</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #00FF00;
background-color: black;
}
.content {
position:absolute;
width:75%;
margin:5px 0px 0px 165px;
border:0px;
line-height: 20px;
z-index:3;
}
fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
}
header {
font-weight: bolder;
color: blue;
}
date {
font-weight: bolder;
color: red;
}
-->
</style>
</head>
<body>
<version>version: 3.1.0</version>
<div class="content">
<fieldset>
<date>2004-05-04</date>
<hr />
<header>Title1</header>
And Entry
</fieldset>
<fieldset>
<date>2004-01-21</date>
<hr />
<header>Title 2</header>
A Second Entry
</fieldset>
</div>
</body>
</html>
You'll see the difference taking a look at it in IE versus Firefox. It seems like it's picking up some things (even from the custom tags) but leaves off other things. How can I get these two pages to look the same (as in both look like the firefox version)? I was wondering if there was a way to have a chapter listing in a OL or UL. I want to be able to have "Chapter <i>:" as the list style where <i> is the increment. is this possible. I thought I saw that somewhere floating around, but i can't seem to find it. thanks in advance. I have a question. If i create a custom class : p.q {color: black !important;} and a user has a css with the fallowing code: p {color: red !important;} will my text <p class="q">My text</p> be red or black and how can i prevent the user css from overriding my css Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. Hello, I'm working on converting my current table layout into strictly a CSS Layout . I've managed to get everything (layout wise at least...) displaying properly except for my right border. This is a small 30px x 1px drop shadow. I've been working with it for a few hours now, and I can't seem to get the image to even show up. Here is my CSS code: Code:
#container {
background-color: #726554;
width: 791px;
text-align: left;
margin: 0 auto;
}
#top {
position: absolute;
top: 0px;
left: 0px;
width: 791px;
height: 145px;
vertical-align: top;
}
#content {
background: #726554 url(PHP/img/right.jpg) right repeat-y;
margin-top: 30px;
width: 496px;
text-align: left;
vertical-align: top;
float: left;
}
#content p {
color: #f1f1f1;
font-family: Tahoma;
font-size: 13px;
margin: 0 0 10px 12px;
}
#content .date {
display: block;
color: #ff9100;
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
}
#left {
vertical-align: top;
float: left;
width: 265px;
height: 671px;
}
#contact {
clear: both;
background: #726554 url(PHP/img/right.jpg) right repeat-y;
font-size: 13px;
font-family: Tahoma;
text-align: center;
}
I don't think you'll need any HTML code for this problem, but let me know if you do! Thanks in advance, Jason I'm creating a box that should be able to be scaled by either setting the size of the element containing the box, or the box itself. Here is the HTML: html4strict Code: Original - html4strict Code <div id="container1"> <div id="panelBox1" class="panelbox"> <div class="header">My Panel Box</div> <div class="content"> <div>Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box</div> </div> </div>
The CSS: css Code: Original - css Code div.panelbox { background: transparent url("Styles/Default/Images/panel_box_head_left.gif") no-repeat left top; padding: 0px; margin: 0px; } div.panelbox div.header { background: transparent url("Styles/Default/Images/panel_box_head_right.gif") no-repeat right top; line-height: 24px; margin-left: 3px; font-size: 0.8em; font-weight: bold; padding: 0px; } div.panelbox div.content { border: solid 1px #b3b3b3; margin: 0px; padding: 2px; height: 100%; } div.panelbox div.content div { width: 100%; height: 100%; overflow: auto; } #panelBox1 { height: 100%; }
The content element should take up the remaining space left by the the header. How can I ensure that the height of the content is 100% of the box minus the height of the header? I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS I've been wrapping my head around how to apply a border at the bottom of an image, using the following: .menupic:link { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 0px solid #ffffff; border-left: 0px solid #ffffff; } .menupic:hover { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 4px solid #ffffff; border-left: 0px solid #ffffff; } It works fine in Mozilla, but I just cannot get the hover to work in IE, unless the border is completely solid and 1px+ for all a: states (kinda defeats what I'm trying to do), and it also works if I add float:left/right (which also is no good, as that messes up my design). Anybody found a css work around this problem? as seen in this forum when posting a message, i was wondering how they get it so that the title of a section appears inside the border? example: ------ Title here --------------------| | | | bit of content | | | | | ------------------------------------- to start: this is my first post and i hope this forum is as helpful as the others i am a member of.. i have a basic text game i am working on and code is already layed out for me.. but i am looking to give the game my own style.. i have created the look i want in photoshop and sliced and sent over to dreamweaver but i am a noob and dont know how to get the things functioning.. at all pretty much everything can be set as the background except for the form but i want the blue gradient in input fields and images as buttons. i would like to have big font size in boxes and also have white letters.. also i want the whole centered x and y when viewer goes to page like i said: im a noob and just getting back into the web dev stuff and am pretty rusty so if anyone can help me out i will be SOOOOOO thankful!!! here is the link to the jpg.. let me know if you need the psd but i have 2 or 3 dif fonts in it that are not common fonts Code: http://i951.photobucket.com/albums/ad353/zac_exuro/Untitled-1-2.jpg Hello all, I've been over at ALA and I came across this nice example on custom Borders and Corners and I've been playing with it but I'm still too green to get the effect I want. Basicaly, I just want to get ride of the footer text section and allow the main body section to streach all the way into the footer. If I just delete the footer text, it leaves an offely large gap between the main content and the bottom of the 'box'. So, how would I go about editing this example to not include a footer section, but still retain the bottom of the 'box'? Thanks for any help! Cheers, Fozzy I started using custom borders after seeing ALA's article on custom borders, but I'm running into a problem. If the overall width of the article isn't over 300px, then it doesn't bridge all the way, but I'm not wanting 300px width. Is there any way to eleminate the gap at the bottom. BTW, it's not just an IE thing, it's doing that in FF, and Opera too. Here's my code: Code: div.Article {
background:
url(images/menu/topleft.jpg)
top left no-repeat;
}
div.Article h2 {
background:
url(images/menu/topright.jpg)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
color: #000;
}
div.ArticleBody {
background:
url(images/menu/right.jpg)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(images/menu/bottomleft.jpg)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/menu/bottomright.jpg)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
HTML too: Code: <div class="Article" style="width: 210;">
<h2><b>Menu</b></h2>
<div align="center">
<div class="ArticleBody">
<p>Text</p>
</div>
<div class="ArticleFooter">
<p style="color: #000;">
A paragraph containing author information
</p>
</div>
</div>
</div>
Thanks, Marty J. |
|||||||