SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    UGLY html . . . .

    What I would like is to pretty much keep the same look that I have at Properties With Stlye Home Page. (index.html) is my only page for now.

    I understand I need to have a menu. I plan to have a vertical menu on the left side of the viewport.

    I do have a menu suggestion from within the CSS forum that I'm going to try. By the way, which menu design is favored by end users, horizontal or vertical?

    NOW - my reason for writing.

    If you look at my html I'm sure you will agree that it's quite ugly!

    I need to know how to clean this up while keeping the same look and get rid of all of the <br> etc. and junk before I go any further.

    Here is my html.
    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=UTF-8">
    <title>Properties With Stlye Home Page</title>
    <link rel="stylesheet" href="css/homepage.css" type="text/css" media="all">
    </head>
    <body>
    
    <div id=outer>
    
    
    <div class="flair" align="right">Properties With Style</div>
    <div class="flair" align="right" style="font-size:160%">A California Real Estate Corporation</div>
    
    <p class="image"><img src="http://www.sitepoint.com/forums/images/ricksfadedpicture.jpg" width="120" height="180"><br><br><br><br><br><br><br><br><br>
      
    <p> Welcome to Properties With Stlye. We specialize in South Orange County residential real estate. We say that our Clients <em>Are Propeties With Style</em>. Our Internet Site is currently under development. We are upgrading our site with new and exciting real-time local  information. Detailed macro and micro data and charts that seriously enhance the understanding of local markets, very local. Currently we are working with investor buyers who are taking advantage of low pricing and stunning rates of return. Many buyers are snapping up properties via all cash offers.</p>
    
    <p class="content"> Please contact us directly at <a href="mailto:xxxxxx">Properties With Style</a>.</p>
    
    <br>
    
    <p>We will be adding content as soon as possible.</p>
    
    <p style="font-size:80%">Rick Schreiber is President of<em> Properties With Style </em>and has served the real estate industry for over 30 years.</p>
    <p style="font-size:80%">This site is optomized for Microsoft Internt Explorer.<p>
    
    <div id=footer>Copyright, Properties With Style Inc., a Real Estate Corporation©. The information being provided by SoCalMLS, CRISNet Regional MLS and/or CARETS is for the consumer's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumer may be interested in purchasing. Any information relating to real estate for sale referenced on this web site comes from the Internet Data Exchange (IDX) program of the SoCalMLS, CRISNet Regional MLS and/or CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site. The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals." The data contained herein is copyrighted by SoCalMLS, CRISNet Regional MLS and/or CARETS and is protected by all applicable copyright laws. Any unauthorized dissemination of this information is in violation of copyright laws and is strictly prohibited. Copyright © 2011 SoCalMLS®, CRISNet Regional MLS®, CARETS®" All Displays of Licensed Content shall include: &quotProperty Information © 2011&quot SoCalMLS Inc. All rights reserved. Certain information contained herein is derived from information which is the licensed property of, and copyrighted by, SoCalMLS Inc.</div>
    </div outer>
    </body>
    </html>
    Maybe I better insert my css page also.

    Code:
    	@charset "utf-8";
    /* CSS Document */
    /*http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/*/
    
    .flair		 {font-family: 'FlairRoman';
    			 font-size:300%;
    			 color: #6CF;
    			 src: url(/fonts/'FlairRoman.eot');
    			 src: local('☺'),
        		 url("FlairRoman.woff") format("woff"),
        		 url("FlairRoman.otf") format("opentype"),
        		 url("FlairRoman.svg#grablau") format("svg");
    			 text-align: right;
    }
    
    .night 	    {font-family: "NiteClub";
    			 font-size:400%;
    			 color:#6CF;
    			 src: url(/fonts/"NiteClub.eot");
    			 src: local('☺'),
        		 url("NiteClub.woff") format("woff"),
        		 url("NiteClub.otf") format("opentype"),
        		 url("NiteClub.svg#grablau") format("svg");
    			 text-align: right;
    }
    
    .tang 	    {font-family: "tangerine";
    			 font-size:400%;
    			 color:#6CF;
    			 src: url(/fonts/"tangerine.eot");
    			 src: local('☺'),
        		 url("tangerine.woff") format("woff"),
        		 url("tangerine.otf") format("opentype"),
        		 url("tangerine.svg#grablau") format("svg");
    			 text-align: right;
    }
    
    html, body	{color:#000;
    			 background-image: url(../images/blinds1.png);
    			 background-attachment:fixed;
    			 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 margin-top:1%;
    			 margin-right:1%;
    			 margin-bottom:1%;
    			 margin-left:1%;
    			 margin: 0;
    }
    
    #outer		{width: 94%;
    			 margin:auto;
    			 max-width:1200;
    			 min-width:600;
    }
    
    p			{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 font-size:100%; 
    			 line-height: 120%; 
    			 color:#6CF; 
    			 text-align: right;
    			 /*margin-right:160px;*/
    			 
    }
    			 
    .content p  {font-size:80%;
    			 text-align:right;
    			 line-height:100%;
    			 color: #6CF;
    }
    
    .titleb		 {font-family: "FlairRoman", sans serif; font-size:200%; color: #6CF; text-shadow:#999;
    
    }
    
    .titlem		 {font-family: "FlairRoman" ; font-size:160%; color:#6CF; text-shadow:#999;
    
    }
    
    .titles	   	{font-family: "FlairRoman";
    			 font-size:120%;
    			 color:#6CF;
    			 text-shadow:#999;
    			 text-align: right;
    
    }
    
    p.image img{float:right; 
    
    }
    
    p.image span {
    	overflow:hidden;
    	font-size:70%;
    	float:right;
    	text-align:justify;
    	width:100px;
    
    }
    
    #footer     {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 font-size:64%; 
    			 line-height: 100%; 
    			 color:#6CF; 
    			 text-align: justify;
    			 /*margin-right:160px;*/
    			 
    }
    
    
    footer p {margin:0;
    }
    
    
    /* eND css*/

    I'd really appreciate some help.

    Thanks.

    Rick
    Last edited by guido2004; Jul 21, 2011 at 02:14. Reason: edited out email address

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Rick,

    Just remember HTML/XHTML is for content only and not for stying, thats where CSS comes in :

    Rule of thumb is this:

    HTML = Content
    CSS = Style / Presenatation
    Javascript = Behaviour

    So where you have : align="right" style="font-size:160% in your first opening 2 <div> tags put these into your CSS, under there related class youve created..

    so for the font it will be written like (in your CSS): font-size:PUT SIZE HERE;
    Alignment (Written in your CSS)= text-align:left;

    Go through your whole document again and make sure you dont have any size/width/height/alignments declared in the HTML, put it all in your CSS.

    Also whereever you have special characters, like I have noted in your HTML document : copyright symbol, registered trademark symbol, forward/back slash etc etc , go to:

    http://www.degraeve.com/reference/specialcharacters.php and put the correct code to replace these special characters.

    Hope this helps

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Your HTML aint got no alibi. lol.


    but I only see a couple of <br>s, besides you can clean those up using a search and replace in your text editor.

    it makes your mark up easier too read if you indent things.. then you wcan quickly see which tag is inside which.

    Is there any reason why you arent using header tags?

    Be sure to close all your tags.

    be consistant about the use of quotes for IDs and classes. I always use quotes. Plus, in the case of classes. it comes in handy when you need to have multiple classes to one element.

    Example
    Code:
    <div class="class1 otherClass"></div>

    Now on to more advanced techniques...

    DONT use style="...", this is called "inline CSS", and tho completely valid it it essentially negates all the advantages of using CSS in the first place. figure out a pattern and create a rule around it, then add classes or ids to your HTML as needed.

    Optimized for M$.. really???

    The rest is CSS artistry...and diciplined organization.. for example

    when you created the class .flair... you bundled a lot of attributes together this is severely limiting. A better approach would be to create a class for the font-face... and then other classes or rule structures everything else.

    Incidental, you have made a mess of your font rules... it seems that you have tried to hybridize font-family and @font-face rules.


    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=UTF-8">
    <title>Properties With Stlye Home Page</title>
    <link rel="stylesheet" href="css/homepage.css" type="text/css" media="all">
    </head>
    <body>
    <div id=outer>
    	<div id="branding">
    		<h1 class="flair">Properties With Style
    		<br><small>A California Real Estate Corporation</small></h1>
    		<p class="image"><img src="http://www.sitepoint.com/forums/images/ricksfadedpicture.jpg" width="120" height="180"></p>
    	<!--branding--></div> 
    	<div id="content">
    			<div id="aside">
    			<!--aside--></div>
    			<div id="main">
    				<p> Welcome to Properties With Stlye. We specialize in South Orange County residential real estate. We say that our Clients <em>Are Propeties With Style</em>. Our Internet Site is currently under development. We are upgrading our site with new and exciting real-time local  information. Detailed macro and micro data and charts that seriously enhance the understanding of local markets, very local. Currently we are working with investor buyers who are taking advantage of low pricing and stunning rates of return. Many buyers are snapping up properties via all cash offers.</p>
    				
    				<p> Please contact us directly at <a href="mailto:xxxxxx">Properties With Style</a>.</p>
    				<p >We will be adding content as soon as possible.</p>
    				<div id="disclaim">
    					<p >Rick Schreiber is President of<em> Properties With Style</em>and has served the real estate industry for over 30 years.</p>		
    					<p>This site is optimized for Microsoft Internt Explorer.<p>
    				<!--disclaim--></div>
    	 		<!--main--></div>
    	<!--content--></div>
    		<p id="footer">Copyright, Properties With Style Inc., a Real Estate Corporation©. The information being provided by SoCalMLS, CRISNet Regional MLS and/or CARETS is for the consumer's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumer may be interested in purchasing. Any information relating to real estate for sale referenced on this web site comes from the Internet Data Exchange (IDX) program of the SoCalMLS, CRISNet Regional MLS and/or CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site. The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals." The data contained herein is copyrighted by SoCalMLS, CRISNet Regional MLS and/or CARETS and is protected by all applicable copyright laws. Any unauthorized dissemination of this information is in violation of copyright laws and is strictly prohibited. Copyright © 2011 SoCalMLS®, CRISNet Regional MLS®, CARETS®" All Displays of Licensed Content shall include: &quot;Property Information © 2011&quot SoCalMLS Inc. All rights reserved. Certain information contained herein is derived from information which is the licensed property of, and copyrighted by, SoCalMLS Inc.
    	<!--footer--></p>
    <!--outer--></div>
    </body>
    </html>
    CSS
    Code:
    @font-face{ font-family:'NiteClub'
    			 src: url(/fonts/"NiteClub.eot");
    			 src: local('☺'),
        		 url("NiteClub.woff") format("woff"),
        		 url("NiteClub.otf") format("opentype"),
        		 url("NiteClub.svg#grablau") format("svg");
    
    }
    @font-face{  font-family: 'FlairRoman'
    			 src: url(/fonts/'FlairRoman.eot');
    			 src: local('☺'),
        		 url("FlairRoman.woff") format("woff"),
        		 url("FlairRoman.otf") format("opentype"),
        		 url("FlairRoman.svg#grablau") format("svg");
    
    }
    @font-face{	font-family: 'tangerine'
    			 src: url(/fonts/"tangerine.eot");
    			 src: local('☺'),
        		 url("tangerine.woff") format("woff"),
        		 url("tangerine.otf") format("opentype"),
        		 url("tangerine.svg#grablau") format("svg");
    			 text-align: right;
    }
    .flair		 {font-family: 'FlairRoman';
    			 font-size:300%;
    			 color: #6CF;
                             font-weight:normal;
    }
    
    h1 br {display:none;}
    h1 small {display:block; font-size:40%;   font-weight:normal;}
    
    .night 	    {font-family: "NiteClub";
    			 font-size:400%;
    			 color:#6CF;
    			 text-align: right;
    }
    
    .tang 	    {font-family: "tangerine";
    			 font-size:400%;
    			 color:#6CF;
    }
    
    html, body	{color:#000;
    			 background-image: url(../images/blinds1.png);
    			 background-attachment:fixed;
    			 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 margin-top:1%;
    			 margin-right:1%;
    			 margin-bottom:1%;
    			 margin-left:1%;
    			 margin: 0;
    }
    
    #outer		{width: 94%;
    			 margin:auto;
    			 max-width:1200;
    			 min-width:600;
    }
    
    #content p	{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 line-height: 1.2; 
    			 color:#6CF; 
    			 text-align:right;
    			 /*margin-right:160px;*/
    			 
    }
    			 
    .titleb		 {font-family: "FlairRoman", sans serif; font-size:200%; color: #6CF; text-shadow:#999;
    
    }
    
    .titlem		 {font-family: "FlairRoman" ; font-size:160%; color:#6CF; text-shadow:#999;
    
    }
    
    .titles	   	{font-family: "FlairRoman";
    			 font-size:120%;
    			 color:#6CF;
    			 text-shadow:#999;
    			 text-align: right;
    
    }
    
    
    #branding{ text-align: right}
    .image img{float:right; }
    p.image {overflow: hidden}
    #disclaim {font-size: 80%; padding:2em}
    #disclaim p{padding:0; margin:.5em 0}
    #footer     {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 font-size:64%; 
    			 line-height: 100%; 
    			 color:#6CF; 
    			 text-align: justify;
    			 /*margin-right:160px;*/
    			 margin:0
    }
    
    
    /* eND css*/
    not like there are not quite a few other things to fix .. but this should improve your condition greatly.

    You need to write the CONTENT FIRST .. then you can structure and style properly.

    hope this helps.
    Last edited by guido2004; Jul 21, 2011 at 02:15. Reason: edited out email address

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is <div id="aside"> ?

    Does this clear a specific previous div ?

    I'm digesting what you both provided.

    I'll get back after I'm finished.

    Thanks much!

    Rick

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dresdin - it all appears to be working well enough except the <p id="footer">

    This does nothing as to rendering the footer text to the styles represented in the css footer definition.

    What am I missing something here?

    Thanks.

    Rick

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay - I've got it all working except the <div id="footer">

    I don't understand why.

    Also for my enlightenment what is "branding?" I see that it takes in the h1 text and picture. Is "branding" a unique technique or a box kind of thing?

    Also <div id="aside"> I have no clue on what this does.

    And the #content p does this take over if the {body} text falls outside some parameter?

    Lastly - what is #disclaim and #disclaim p ?

    Thanks.

    Rick

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Sorry it took me so long to get back to this post.

    <div id="aside"> is where you will put your side bar, feel free to omit it until needed. But it is good to structure your whole document CSS is really a pain when done piece-meal. I also do not use clearing elements.. use overflow:hidden; on the parent element instead.

    1) #branding is just a name of an ID , names of classes are arbitrary and really do nothing but identify the element . they don't even have semantic meaning., save maybe when you back an look at your code 3 years later they serve to let you know hat part is what.

    I like using branding in my sights because I target business clients, most of whom have an identity... so I break up or construct the the top of my page with div elements which include: search/ branding ( the name, logo, mottos or tagines, pictures of their flagship product or owner ,etc.. in other words: BRANDING ) I hope you see what I mean now.


    Think of CSS rules as a water fall. the longer the rule the more cascade power ( strength it has... and it is is more specific).

    so p{} or body p {} would apply to all paragraphs EVERYWHERE unless there is something more specific. that's why rather than style each paragraph individually I prefer to create chunked rules.

    #content p {} styles ALL Ps within the #content div. for the same token #content #main p {} would styles all Ps within the #main div IF/WHEN its inside the #content div. creating patterns such as this in your code makes it more streamed line.. it also eliminates you having to put CSS directly in the tag.. that's just SLOPPY!!

    I should have made #disclaim a class (.disclaim) instead of an ID but I so no reason to have more than one disclaimer. i created that style because ti seemed you had a different size text within your main content that served as a pseudo "disclaimer".. so thats the alternate style for that.

    I am looking at your footer and I am not seeing how id not conforming.. I mean you wanted smaller text in the same color...right? what exactly is it failing to do?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks much Dresden

    The footer works now. I had something further up in the css page preventing the footer <div> format from working.

    The only thing that I've discovered is that the tangerine font is not loading in any browser (at the top right of the page) part of the "branding" thing I think..

    I've checked the server and the "tangerine" and "nightClub" fonts are there.

    Any ideas?

    Rick

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    are your fonts in the same folder as the CSS file? if they are not, that could be the issue

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have them in a folder named "type".

    This I saw suggested in an Web Font explanation by Paul.

    Should they be in the css folder?

    thanks . . . Rick

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Where you put your font files is a matter of personal preference, but the PATH to the folder must be written in each CSS rule. Your CSS is tell the browser to look for the font files lose in the same directory (folder) as you CSS file.

    In other words, the way you have written it now, if you dropped all your font files in the same location as your CSS file then it would work. also you have to be consistent....


    SO
    if you have a ROOT DIRECTORY which has:
    index.html
    CSS (folder)
    IMAGES(folder)
    FONTS(folder)

    AND IF all your fonts are loose in the fonts folder, as opposed to being in individual folders for each font family you would need to write your path like this:


    Code:
    @font-face{	font-family: 'tangerine'
    			 src: url("../fonts/tangerine.eot");
    			 src: local('☺'),
        		 url("../fonts/tangerine.woff") format("woff"),
        		 url("../fonts/tangerine.otf") format("opentype"),
        		 url("../fonts/tangerine.svg#grablau") format("svg");
    			/* text-align: right; get rid of text align here @ font face rules do not take CSS, they are merely to let the computer know where you keep the font files, ok? */
    }
    you would need co correct all other @font-face rules similarly...

  12. #12
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Dresden - thanks.

    I get so stressed out over this I can't think straight.

    I do understand paths and the like.

    Is it better to have each font in a separate folder?

    That sounds more organized to me (I need organized) but my thought was that it would slow down the retrieval of the fonts and consequently the loading the web page.

    There is so much I don't know.

    Thanks Dresden . . . Rick

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been working on this for over an hour now.

    There must be some silly mistake or typos that I just can't see.

    I've tried changing this " to this ' but it makes no difference. (BTW, what is the requirement for each " ' ?)

    There are eight total font formats in the (../type/ folder, Tangerine_regular and bold, four each.

    All folders propagate directly from the root folder.

    There are no other font files in the type folder.

    Code:
    @font-face {
    font-family: 'TangerineRegular';
    src: url("../type/Tangerine_Regular-webfont.eot");
    src: url("../type/Tangerine_Regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("../type/Tangerine_Regular-webfont.woff") format("woff"),
    url("../type/Tangerine_Regular-webfont.ttf") format("ttf"),
    url("../type/Tangerine_Regular-webfont.svg#TangerineRegular") format("svg");
    font-weight: normal;
    font-style: normal;
    
    }
    
    	 /* calls font in html */
    .tang	{font-family:src: url('../type/TangerineRegular');
    	font-size:460%;
    	color:#6CF;
                  	font-weight:normal;
    	text-align: right;
    }
    Any ideas . . . ?

    Thanks Rick

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Is it better to have each font in a separate folder?
    it just organizational. If YOU can handle 4 files of each font and weight and style loose in a folder that's fine . I like strict organization , so hen I add/remove a font from a client's site, for example it is easier if they are grouped in a folder. again, this is just MY preference. I doesn't affect the performance of the page, and other than the longer url for you to type , it doesn't affect anything else.

    NOTE: unlike page URLs, some of which you may want to convey to possible clients font URLS are essentially private. So if you hear a "flat site is better".. it's merely because when you are guiding a visitor you don't have to say: mysite.com/pages/sections/somethiung_else/stuffIlike/forlderforpage/page.html


    single or double quotes should no make a difference.

    You are still not understanding the concept @font-face tho.


    Code:
    .tang	{font-family:'TangerineRegular', arial, san-serif;
    	font-size:460%;
    	color:#6CF;
                  	font-weight:normal;
    	text-align: right;
    }
    the @font-face is there to point to the font url for browsers that support @font-face. It's essentially progressive enhancement for CSS3 browsers. you dont "call " the font from anywhere. so when you write your font-family: or font: rules you write them normally; font: and font-family: DONT USE URLs.

    that is:

    font-family: "preferred font", "some other", replacement, Georgia, Times, Serif.

    if you have an @font-face rule for "preferred font" the browser will load from the URL specified in it.

    I hope this clears the issue for you.

  15. #15
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dresden . . .

    That did the trick - I think.

    I've got to upload my css page and then check it from the server side.

    I had this working well enough a few days ago so somehow I must of made changes to the .tang portion of the css not realizing my mistake.

    Rick

  16. #16
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not working again . . ?

    Code:
    @font-face{ font-family: 'tangerineregular'
    	     src: url("../type/tangerine.eot");
    	     src: local('☺'),
        	 url("../type/tangerine.woff") format("woff"),
        	 url("../type/tangerine.otf") format("opentype"),
        	 url("../type/tangerine.svg#grablau") format("svg");
    
    }
    This is not working
    Code:
    @font-face { font-family: 'tangerine_regular'
        	src: url("../type/Tangerine_Regular-webfont.eot");
        	src: url("../type/Tangerine_Regular-webfont.eot?#iefix") format("embedded-opentype"),
             	url("../type/Tangerine_Regular-webfont.woff") format("woff"),
             	url("../type/Tangerine_Regular-webfont.ttf") format("truetype"),
             	url("../type/Tangerine_Regular-webfont.svg#TangerineRegular") format("svg");
        	 	
    }
    And this either . . .
    Code:
    @font-face {
        	 	font-family: 'tangerine_Bold'
        	 	src: url("../type/Tangerine_Bold-webfont.eot");
        	 	src: url("../type/Tangerine_Bold-webfont.eot?#iefix") format("embedded-opentype"),
             	url("../type/Tangerine_Bold-webfont.woff") format("woff"),
             	url("../type/Tangerine_Bold-webfont.ttf") format("truetype"),
             	url("../type/Tangerine_Bold-webfont.svg#TangerineBold") format("svg");
        	 	font-weight: normal;
        	 	font-style: normal;
    
    }
    This either.

    Code:
    .tang   {font-family:'tangerineregular', arial, san-serif;
                font-size:460%;
                color:#6CF;
                font-weight:normal;
    	text-align: right;
    }
    You know I had this working yesterday or the day before but when I make changes it all goes down the tubes . . .

    What I'm saying is that I've tried all of these again. somewhere in this it fails and I just C A N 'T see it and it's driving me crazy!

    root directory Index.html
    css
    graphs
    images
    scripts
    type (fonts in here} only tangerine fonts. does the fontkit file need to be in here also?


    H. E. L. P. Please Rick

  17. #17
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As suggested to me but for unknown reason it fails!

    ../type/ is the folder where the Tangerine_Regular font files are located.

    To me it should work. This is exasperating!

    Thanks Rick

    Code:
    @font-face {font-family: 'tangerine'
      			src: url("../type/Tangerine_Regular.eot");
      			src: local("☺"),
        	url("../type/Tangerine_Regular.woff") format("woff"),
        	url("../type/Tangerine_Regular.otf") format("opentype"),
        	url("../type/Tangerine_Regular.svg#filename") format("svg");
    }
    
    .tang	{font-family:'tangerine', arial, san-serif;
    		 font-size:460%;
    		 color:#6CF;
                     font-weight:normal;
    		 text-align: right;
    }

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ..\ would point at

    http://www.propertieswithstyle.com/t...ne_Regular.eot

    returns 404. The URL stated in a CSS file is relative to the CSS file location... Even the directory you're trying to point at:

    http://www.propertieswithstyle.com/type/

    is 404. The file isn't there... the Directory isn't even there! Doesn't appear to be in your css directory or subdirectories of it... just where is it located? (silly question, you didn't make it kin to web root by any chance? I've seen people do that then wonder why they can't get at it from the web side)

    As a rule of thumb, I consider it bad practice to place files called by CSS anyplace but in the same directory or subdirectories of the css file's location. If you have to resort to "../" or absolute URL's, there's something hideously wrong with your directory structure!

    Don't know where you uploaded the files to, but it doesn't seem to be in any of the places you're trying to link to on the server. The files aren't there.

    Oh, and your embed seems to be omitting TTF. In fact it does NOT look like the output of fontsquirrel at all.

    My advice, make a /fonts directory under /css, then use

    "fonts/Tangerine_blahblahblah" on each of those. Guaranteed to point at what you want. It's what I do with all files called by css like images.

    /theme -- where CSS files go. (along with template .php files)
    /theme/images -- images called by CSS
    /theme/fonts -- fonts called by CSS

    etc, etc, etc... that way it's
    url(images/image.png) for background-image
    url(fonts/font.ttf) for fonts

    and so on and so forth. Easiest way to organize it.

  19. #19
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See my FileZilla.jpg attached.

    Why do all of my folders have a ? on them?

    Rick
    Attached Images Attached Images

  20. #20
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Question marks (?) appear on directories you haven't accessed yet, indicating that the FileZilla Client can't tell if there are subdirectories within those directories. If you access the directory the question mark will vanish.

  21. #21
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    ALSO NOTE you use the name "type" in the CSS code and "fonts" in the directories. You have ot use the same name in the code as you use for the directories.


    EDIT: but it seems to be work for you now., so you must have caught that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •