Graphic Design Blog - newdesign7

Apr 17, 2010

Alchemist

Browse Inside this book

Get this for your site

Apr 4, 2010

Simple Business Layout

Hello Readers,
Hope all of you are doing fine. This is a very simple Business Layout created in Photoshop CS2. Let me know if you like it.

Mar 15, 2010

Hello Readers,
Though this post doesn't suits my blog which I started only to uphold some of my graphic design skills and knowledge but I understand my role as a responsible citizen. Hence, I join the cause to "Save Our Tigers".
Visit this touchy You tube video about a 2 months old tiger cub.
Also visit the website http://saveourtigers.com to know more details about the project.

Thanks

Mar 7, 2010

Simple Css Menu

Hello Readers,
Hope all of you are doing fine. As this is my online diary which I use as a notebook I'm posting this post as a note for my future reference and obviously as a little help to those who need it.
In this post I'm going to create a very simple Css rollover menu.
I'm not posting about the Photoshop section......only the Html and the Css.
Html Part

<body>
<div id="nav">
<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
<li><a href="">Button 4</a></li>
<li><a href="">Button 5</a></li>
</ul>
</div>
</body>

Css Part

body {
margin-left: 0px; /* Sets the margins around the page or the 'BODY', as we want our navigation to go to the end of our browser so that it looks nice. The only margin we need is the top margin which is set at 10pixels. */
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}

#nav{
position:relative; /* The position property places an element in a static, relative, absolute or fixed position. Here the menu element is placed in relative postition. */
display:block; /* The element will be displayed as a block-level element, with a line break before and after the element. */
height:50px; /* Height of the navigation. */
font-size:11px; /* Sets the size of the text to 11pixels. */
font-weight:normal;
background:transparent url(images/menu.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;
}

#nav ul{
margin:0px; /* Margin around the unordered list. */
padding:0; /* Padding around the unordered list. */
list-style-type:none; /* The listStyle property sets all list properties in one declaration. */
width:auto; /* Wdith of the unordered list is set to auto so it doesn't matter what size the browser window is. */
}

#nav ul li{
display:block;
float:left;
margin:0 1px 0 0;
}

#nav ul li a{
display:block;
float:left;
color:#000;
text-decoration:none;
padding:14px 22px 0 22px;
height:28px;
}

#nav ul li a:hover, #nav ul li a.current{
color:#fff;
height:50px;
background:transparent url(images/hover.gif) no-repeat top center;
}

Other than this I have created two images in Photoshop.
They are menu.gif and hover.gif
menu.gif is of 600 pixel width and 50 pixel height but after slicing its of width 1 pixel and hover.gif is of 180 pixel width and 50 pixel height.