CODEWITHSUNDEEP
htmlcss
jahan
jahan

Reputation: 521

How to give two footers in a html document

I want to give two footers to a html page. My page looks like this:enter image description here

I wanted to make both links as the footers for both para. My html code is here:

<html>
    <head>
        <link rel="stylesheet" href="style2.css"/>
    </head>
    <body>
        <h1 class="header"> My site </h1>
        <p class="first"> 
            <span>T</span>the textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe text
        </p>
        <p class="second">
            <span class="my">Y</span> My second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second para
            <span class="footer"> Link:<a href="#" > First link </a></span>
        </p>
        <h3> Link:<a href="#">Secondlink</a> </h3>
    </body>
</html>

CSS is here:

body
{
    width: 500px;
}
.my
{
    font-size: 200%;
    float:left;
    margin: 0 5px 0 0 ;
}
.header
{
    background-color:blue;
    text-align: center;
    color:#fff;
        margin:0;

}
.first
{
    float:left;
    max-width:200px;
    border-right:1px solid green;
    margin:0;
    padding:4px;
    border-left:1px solid green;
}
.second
{
    border-left:1px solid green;
    float:right;
    max-width:200px;
    border-right:1px solid green;
    margin:0;
    padding:4px;
}
h3
{
    clear:both;
    background-color: green;
    color:#fff;
    max-width:210px;
}
.footer
{
    font-size: 27px;
    background-color: green;
    color:#fff;
    padding:0;
    border-collapse:collapse;
}

Also tell me how can I add data between both para. How can I obtain the desired result?

Upvotes: 0

Views: 297

Answers (2)

napendra
napendra

Reputation: 378

Here i have made all changes in your code as per your requirements Check this JSFiddle Link

  ( http://jsfiddle.net/ugLMy/  )

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

DEMO

enter image description here

The markup: could look like this.

<html>
    <head>
        <link rel="stylesheet" href="style2.css"/>
    </head>
    <body>
        <header>
             <h1 class="header"> My site </h1>
        </header>
        <section>
        <article class="first"> 
            <p><span>T</span>the textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe text</p>
            <footer class="footer"> Link:<a href="#" > First link </a></footer>
        </article>
        <article class="second">
            <p><span class="my">Y</span> My second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second para</p>
            <footer class="footer"> Link:<a href="#" > Second link </a></footer>
        </article>
        </section>
    </body>
</html>

**The style:**could look like this.

   *{
       padding:0;
       margin:0;
   }
   body{
       text-align:center;
       width: 500px;
   }
   header{
    clear:both;
    background-color: green;
    color:#fff;
   }
   article{
     width:40%;
     text-align:left;
   }

   [class=first]{
        float:left;
        max-width:200px;
        border-right:1px solid green;
        margin:0;
        padding:4px;
        border-left:1px solid green;
   }
   [class=second]{
        border-left:1px solid green;
        float:right;
        max-width:200px;
        border-right:1px solid green;
        margin:0;
        padding:4px;
   }

   footer{
       font-size: 27px;
        background-color: green;
        color:#fff;
        padding:0;
        border-collapse:collapse;
   }

Upvotes: 1

Related Questions