...

View Full Version : 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



#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 (http://www.anvir.com/forum/viewtopic.php?f=4&t=447&p=1361#p1361)

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


#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



<!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:


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

<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:


Home About Services

Where with out it it would look like this:


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

-webkit-border-radius: 15px;

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


-moz-border-radius: 15px;








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



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
HTML & CSS



<!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:


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

<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:


Home About Services

Where with out it it would look like this:


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

-webkit-border-radius: 15px;

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


-moz-border-radius: 15px;








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



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
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 !!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum