in css by fyd on 05 Mar 2008
Using CSS we will add a class to the img tag so that our text will wrap nicely around our image. This can be done fairly quickly and can really make your content look better. I recommend adding these classes to every CSS file - or if you have a base CSS file that you always use put these in it.
Popularity: 16% [?]
in illustrator by fyd on 27 Feb 2008
in css by fyd on 21 Feb 2008
Let's use CSS to make a Horizontal Menu. We will be using and styling an unordered list for our menu. There's not a lot to it and the code has comments by each line - so just follow along and you'll have your own menu in no time.
So, make a new .css file and name it style.css - You can use notepad and save the file as .css instead of .txt
We start off with our main styling container. In it we will setup styles like the width of our menu - the background color - font size - and tell it we don't want any bullets next to our list items.
/* main container - ul id="menu" */ #menu { margin: 0; /* reset the margins */ padding: 0; /* reset the padding */ width: auto; /* this size depends on your menu */ float: left; /* line things up */ font-size: 1.4em; /* increase the font size a bit */ background: #656565; /* any background color you want */ list-style: none; /* no bullets on our list items */ }
Now we will style the list items. If you have items in your menu that aren't linked then this is where you would add any extra formatting for those. Most of the time everything in a menu is linked so all we need to do for our menu is tell it to display our items horizontally.
/* list elements */ #menu li { display: inline; /* make it horizontal */ }
Let's style our links. This is where we put in formatting like the color of our links - text decorations - and anything else you want. The padding here is important and is used to give extra space around the words - without it the menu would take the height of just slightly more than the text. The a:visited is added to make the links stay the same color even if the user has already visited a link.
/* style our links */ #menu li a:link, #menu li a:visited { float: left; /* line things up */ color: #ffffff; /* the color of our linked items */ padding: 10px 10px; /* spread it out */ text-decoration: none; /* no underline *//* white border to the right of link */ border-right: 1px solid #ffffff; }
Now we format how the link will look when our mouse hovers over it.
/* style link hover */ /* .active_link class - optional - styles the current pages link */ #menu li a:hover, #menu li a:active, #menu .active_link { text-decoration: none; /* no underline */ /* color to change to when we hover over link */ background: #009900; }
We had float: left above so we need to clear out the left margin so the rest of our page items will fall under our menu instead of to the right of it.
/* optional - but a good class to have in every stylesheet */ /* we had float:left; above so in order to clear out the left margin and allow elements on our page to start under our menu we should clear the left margin after we creat the menu */ .clearLeft { clear: left; }
Open a new HTML file and add a link to our style sheet somewhere within the <head></head> tags.
<head> <link href="sytle.css" rel="stylesheet" type="text/css" media="screen" / > </head>
Within the <body> tags we will setup our menu. Remember we are using an unordered list for our menu.
<!– use an unordered list –> <ul id="menu"> <!– each link goes in a list element –> <!– class active_link would be moved to the link of whatever page you are on –> <!– so if you if this was the About Us page you would move the class="active_link" within the About Us a href –> <li><a href="csshzmenu.html" class="active_link">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <– clear out left margin - see stylesheet for more info –> <div class="clearLeft"></div>
There you have it - customize it to your liking and add it to your site. Here are the files for download (right-click save as)
THE HTML
THE CSS
Popularity: 13% [?]
in resources by fyd on 09 Feb 2008
16 Photoshop resources including tips, tricks, and tutorials - for the beginner all the way up to the advanced Phothshop user.
Just learning Photoshop? Opening the program and seeing all the different options can be very daunting to a beginner. Here are a few resources I found that should be very useful to anyone new to Photoshop, upgrading to a newer version, or someone who just wants to better understand the basics.
Popularity: 6% [?]
in photoshop by fyd on 06 Feb 2008
©2009 freeyourdesign | Designed by Michael Hargis |
| 
