CODEWITHSUNDEEP
htmlcss
Hollywood
Hollywood

Reputation: 175

edit footer in html page using css

I'm new in HTML, CSS and I'm having trouble with editing the footer on my html page. I'm trying to resize the facebook and twitter icon too much smaller size (both the same size), they have them side by side in the bottom centre of the html page along with the copyright sign.

HTML:

<!doctype html>
    <html lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="homepageuni.css">
    <meta charset="utf-8">
    <meta name="homepage" content="a homepage for the survey website">
    <title> Kingston University Survey Homepage</title>
    <body>
        <img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
        <div id = "buttons">
            <button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
            <button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
            <a href="http://www.w3schools.com/html/">LogIn</a>
        </div>
        <br/><br/><br/><br/><br/><br/>
        <img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
        <br/>
        <div id="footer">
            &copy;
            <img src="facebookpic.png" alt="facebookpic" />
            <img src="twitterpic.jpg" alt="twitterpic"/>
       </div>
   </body>
</html>

CSS:

#middlepic {
    display: block;
    margin: 0 auto;
}

#uni {
    display: block;
    width: 250px;
    height: 200px;
}

#footer {
    width: 100%;
    height:100px;
    display: inline-block;
    text-align: center;
}

button {
    height: 30px;
    width: 200px;
    background-color: #ccc;
    border-radius: 10px;
    float:left; 
}

a { 
    text-decoration: none;
    color: #000;
}

Upvotes: 0

Views: 3743

Answers (4)

Lexo Alonzo
Lexo Alonzo

Reputation: 492

Just add an class to the img tag an add a style from css like this.

CSS:

.socialimg { width: 10px; }

HTML:

<img class="socialimg" src="facebookpic.png"  alt="facebookpic">
<img class="socialimg" src="twitterpic.jpg" alt="twitterpic">

Upvotes: 0

sanoj lawrence
sanoj lawrence

Reputation: 993

just add css rule like bellow

#footer img {
     width: 25px;
     height: 25px
}

if you wish to change size just change width and height

Upvotes: 2

lv0gun9
lv0gun9

Reputation: 621

try this.

#footer {
  text-align: center;
}

.logos{
  width: 25px;
 height: 25px;
}
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo" />

<div id="buttons">
  <button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
  <button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>

  <a href="http://www.w3schools.com/html/">LogIn</a>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
  &copy;
  <img class="logos" src="facebookpic.png" alt="facebookpic" />
  <img class="logos" src="twitterpic.jpg" alt="twitterpic" />
</div>

Upvotes: 0

hungerstar
hungerstar

Reputation: 21685

I would add a class to each image and set their size that way.

HTML 

<div id="footer">
     &copy;
     <img class="social-badge" src="facebookpic.png" alt="facebook logo">
     <img class="social-badge" src="twitterpic.jpg" alt="twitter logo">
</div>

CSS 

.social-badge {
     width: 200px;
}

Upvotes: 0

Related Questions