Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Urgent help needed ! How to design this footer.

    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..
    Attached Thumbnails Attached Thumbnails Urgent help needed ! How to design this footer.-1212121.png  

  • #2
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i am still awaiting for any help.. please don't disappoint me.

  • #3
    New Coder
    Join Date
    Aug 2012
    Location
    New Zealand
    Posts
    52
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well that can only help in bit.. can anyone provide me sample code for same looking with green border.. please..

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am redesigning the front page and recurring header and footer for a Brooklyn NY based company.
    check out your url

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what are you all replying ????

    please anyone help me !!!

  • #7
    New Coder
    Join Date
    Aug 2012
    Location
    New Zealand
    Posts
    52
    Thanks
    2
    Thanked 4 Times in 4 Posts
    try this
    Code:
    #rounded {
    border:2px solid #83F52C;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    width: 80px;
    height: auto;
    }

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but how to divide them accordingly ?

  • #9
    New Coder
    Join Date
    Aug 2012
    Location
    New Zealand
    Posts
    52
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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

  • #10
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jordann View Post
    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..

  • #11
    New Coder
    Join Date
    Aug 2012
    Location
    New Zealand
    Posts
    52
    Thanks
    2
    Thanked 4 Times in 4 Posts
    um add background-color: to where you want the color to be and by spacing what do you mean?

  • #12
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jordann View Post
    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..
    Attached Thumbnails Attached Thumbnails Urgent help needed ! How to design this footer.-untitl21.jpg  

  • #13
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i can't get that output still..

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •