Urgent help needed ! How to design this footer.

icode919 · 08-08-2012, 02:50 PM

Hello kindly help me designing this footer..

How to create this using HTML and CSS ? kindly provide me those "rounded tabs in image" and a sample that display that code

and if possible teach me..

i will love the help definitely

check the attachment for the work what i need to design similar to..

icode919 · 08-09-2012, 01:34 AM

i am still awaiting for any help.. please don't disappoint me.

Jordann · 08-09-2012, 02:10 PM

You can do this with css3 not that hard once you've got the hang of it

Code:

#rounded {
border-radius: 15px;
-moz-border-radius: 15px; /* Making it compatible for firefox users */
}

Unsure if it will work with IE but its still good to learn.

Hope this helped

icode919 · 08-10-2012, 10:41 AM

Well that can only help in bit.. can anyone provide me sample code for same looking with green border..

please..

ersilite · 08-10-2012, 12:23 PM

I am redesigning the front page and recurring header and footer for a Brooklyn NY based company.
check out your url

icode919 · 08-10-2012, 05:50 PM

what are you all replying ????

please anyone help me !!!

Jordann · 08-11-2012, 04:07 AM

try this

Code:

#rounded {
border:2px solid #83F52C;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
width: 80px;
height: auto;
}

icode919 · 08-11-2012, 06:18 PM

but how to divide them accordingly ?

Jordann · 08-12-2012, 01:08 AM

HTML & CSS

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#menu {
        float: left;
}

ul#menu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
        border:2px solid #83F52C;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        width: 80px;
        height: auto;
}

ul#menu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#83129E;
}

ul#menu a:hover{
	-webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
	color:#c6c6c6;
}
</style>
</head>

<body>
 <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">the Team</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>

</body>
</html>

What It does:

Code:

        ul#menu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
        border:2px solid #83F52C;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        width: 80px;
        height: auto;
}

The ul#menu li code is calling on the ul id menu which you can see as

Code:

<ul id="menu"></div>

This styles the menu with in that div using the ul and li codes which is known as an Un orded list. The display inline of the code is displayed as an inline element like a span, the inline element has no line break before or after it, It allows other HTML elements next to it like the result giving below:

Code:

Home About Services

Where with out it it would look like this:

Code:

Home
About
Services

The border radius element is part of CSS3 its pretty much an easier way of getting rounded corners with out the use of images or more div tags

This part of the code allows browsers using webkit such as chrome and safari to view the code, with out the webkit element the rounded corners would not be viewable to users using the menu

Code:

-webkit-border-radius: 15px;

The -moz element makes the code viewable to those using firefox

Code:

 -moz-border-radius: 15px;

Code:

ul#menu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#83129E;
}

This part of the code is self explanatory its sourcing the 'a' within the code and styling it making the font bold with the color of purple

Code:

ul#menu a:hover{
	-webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
	color:#c6c6c6;
}

The a:hover part of the CSS is also self explanatory all it is doing is saying when a is hovered over return the text color of light grey.

I hoped this help you if you have any questions feel free to pm me

The Result:
http://www.lampstudios.net/css3

icode919 · 08-12-2012, 09:16 AM

Quote:

Originally Posted by Jordann

HTML & CSS

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#menu {
        float: left;
}

ul#menu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
        border:2px solid #83F52C;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        width: 80px;
        height: auto;
}

ul#menu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#83129E;
}

ul#menu a:hover{
	-webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
	color:#c6c6c6;
}
</style>
</head>

<body>
 <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">the Team</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>

</body>
</html>

What It does:

Code:

        ul#menu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
        border:2px solid #83F52C;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        width: 80px;
        height: auto;
}

The ul#menu li code is calling on the ul id menu which you can see as

Code:

<ul id="menu"></div>

This styles the menu with in that div using the ul and li codes which is known as an Un orded list. The display inline of the code is displayed as an inline element like a span, the inline element has no line break before or after it, It allows other HTML elements next to it like the result giving below:

Code:

Home About Services

Where with out it it would look like this:

Code:

Home
About
Services

The border radius element is part of CSS3 its pretty much an easier way of getting rounded corners with out the use of images or more div tags

This part of the code allows browsers using webkit such as chrome and safari to view the code, with out the webkit element the rounded corners would not be viewable to users using the menu

Code:

-webkit-border-radius: 15px;

The -moz element makes the code viewable to those using firefox

Code:

 -moz-border-radius: 15px;

Code:

ul#menu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#83129E;
}

This part of the code is self explanatory its sourcing the 'a' within the code and styling it making the font bold with the color of purple

Code:

ul#menu a:hover{
	-webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
	color:#c6c6c6;
}

The a:hover part of the CSS is also self explanatory all it is doing is saying when a is hovered over return the text color of light grey.

I hoped this help you if you have any questions feel free to pm me

The Result:
http://www.lampstudios.net/css3

wow Thanks for that ! i understand the hover part.. but can you tell me how to fill in the color inside that green rings ? as like in the image..

Also, How to make it that spacing to give it a look ? as its not a menu its footer..

Jordann · 08-12-2012, 12:53 PM

um add background-color: to where you want the color to be and by spacing what do you mean?

icode919 · 08-12-2012, 01:13 PM

Quote:

Originally Posted by Jordann

um add background-color: to where you want the color to be and by spacing what do you mean?

by space means can you give me a code like having this work as output

Check the attachment for what i need..

icode919 · 08-14-2012, 10:16 AM

i can't get that output still..

Help me please ! i will pay 3$ LR whoever helps me !!!!