SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: advice

  1. #1
    SitePoint Addict pentium10's Avatar
    Join Date
    Apr 2004
    Location
    Transilvania
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    advice

    Hy

    i have to redesign a site. I got the design, can be viewed here: http://www.powerdesign.ro/jobtrans/

    My question is how to make such menu buttons with those fonts what you see there with css?
    If somebody can help be with some css code from where i can start, i will be very greatfull.
    Rype :: book, do, charge, collect,
    track time, track expenses and invoice easily on the go.
    Available on Mac, Win, iPhone, WinMobile.
    http://www.rypenow.com

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    do you know the font name ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- -->
    <head>
    <title>12345 12345 12345 123435 12345</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    
    	.nav a{
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:8px;
    	font-weight:600;
    	background:#ebeff2;
    	color:#55616d;
    	padding: 5px 0 7px 5px;
    	border-width:1px 1px 0px 1px;
    	border-color:#7c8991 #7c8991 #7c8991 #7c8991;
    	border-style: solid;
    	text-decoration:none;
    	display:block;/*  */
    	text-align:left;
    	width:150px;
    	}/* */
    	
    	.nav a:hover{color:#ec9b4c;background:#fafbfd url(x.jpg) 95% no-repeat;}
    	
    	.nav .b{border-width:1px 1px 1px 1px;}
    	
    </style>
    </head>
    <body>
    
    <div class="nav">
    <a href="##">HOME</a>
    <a href="##">CONTACTS</a>
    <a href="##">ABOUT US</a>
    <a href="##">FREE SMS</a>
    <a href="##">HELP</a>
    <a href="##">COMMENTS</a>
    <a href="##">GUEST BOOK</a>
    <a href="##">USEFULL TIPS</a>
    <a href="##">LINK EXCHANGE</a>
    <a href="##">FOR EMPLOYERS</a>
    <a href="##">SEND IT TO A FRIEND</a>
    <a href="##" class="b">LTD. PRESENTATION</a>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict pentium10's Avatar
    Join Date
    Apr 2004
    Location
    Transilvania
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont know rigth now but I can get it.
    Thanks for css code.

    What happens if the visitor hasn't installed that specific font?
    Rype :: book, do, charge, collect,
    track time, track expenses and invoice easily on the go.
    Available on Mac, Win, iPhone, WinMobile.
    http://www.rypenow.com

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can specify any font you like, but as you said if the visitor hasn't got in installed they will see whatever other fonts you specify (or their default if you don't specify a fallback option).

    The only fool-proof way to use the exact fonts you want is to use images (either directly for the navigation, or using an image-replacement technique), but then you are introducing accessibility issues such as not being able to resize the nav text.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Ahhee Buddy beat me to it.

    use the standard fonts and if you need absolute control swap bgr images

  6. #6
    SitePoint Addict pentium10's Avatar
    Join Date
    Apr 2004
    Location
    Transilvania
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it hard to create this images with GD library ?
    Rype :: book, do, charge, collect,
    track time, track expenses and invoice easily on the go.
    Available on Mac, Win, iPhone, WinMobile.
    http://www.rypenow.com

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    GD library=GD Graphics Library ?= New for me

    no images are ezy but do a small test if it works, and make the final images when
    page menu is ready.

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    you can use em or %, but you have to rethink your design

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- -->
    <head>
    <title>12345 12345 12345 123435 12345</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    	body{background:#ebebeb;font-size:1em;}
    
    	.nav a{
    	font-family: Arial, Verdana , Helvetica , sans-serif;
    	font-size:60%;
    	font-weight:600;
    	background:#ebeff2;
    	color:#55616d;
    	padding: .5em 0 .7em .5em;
    	border-width:.1em .1em 0 .1em;
    	border-color:#7c8991 #7c8991 #7c8991 #7c8991;
    	border-style: solid;
    	text-decoration:none;
    	display:block;/*  */
    	text-align:left;
    	width:16em;
    	}/* */
    	
    	.nav a:hover{color:#ec9b4c;background:#fafbfd url(x.jpg) 95% no-repeat;}
    	
    	.nav .b{border-width:.1em .1em .1em .1em;}
    	
    </style>
    </head>
    <body>
    <div class="nav">
    <a href="##">HOME</a>
    <a href="##">CONTACTS</a>
    <a href="##">ABOUT US</a>
    <a href="##">FREE SMS</a>
    <a href="##">HELP</a>
    <a href="##">COMMENTS</a>
    <a href="##">GUEST BOOK</a>
    <a href="##">USEFULL TIPS</a>
    <a href="##">LINK EXCHANGE</a>
    <a href="##">FOR EMPLOYERS</a>
    <a href="##">SEND IT TO A FRIEND</a>
    <a href="##" class="b">LTD. PRESENTATION</a>
    </div>
    </body>
    </html>

  9. #9
    SitePoint Addict pentium10's Avatar
    Join Date
    Apr 2004
    Location
    Transilvania
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why i have to rethink my design ?
    Rype :: book, do, charge, collect,
    track time, track expenses and invoice easily on the go.
    Available on Mac, Win, iPhone, WinMobile.
    http://www.rypenow.com

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    font, menu are now resizable by the user, so the design hase to adapt to that
    (resize body font to 2 em and see)


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
  •