0

I'm new to html and css and i'm having trouble with a lot of elements. The elements in my page keep overlapping each other. Also another problem i keep having is that the CSS doesn't work properly thus making the pictures and other elements the wrong size etc..

this is my HTML code... 

        <!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>
        </head>
        <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" />

        <div id="footer">
        <p> copyright </p> 
        <img src="facebookpic.png" alt="facebookpic" />
        <br/>
        <img src="twitterpic.jpg" alt="twitterpic"/>
        </body>
        </div>
        </html>

This is my CSS code...

    #middlepic
    {
        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    #uni
    {
        display: block;  
        padding-left:50px;
        max-height: 150px;
        max-width: 200px;
        width: 250px;
        height: 250px;
    }

    #buttons
    {

        top: 50%;
        left: 50%;
        margin-right: auto;
        margin-left: auto;
        width: 300px;
        height: 40px;
    }

    #footer
    {
    width: 100px;
    height:100px;
    }
Hollywood
  • 175
  • 1
  • 2
  • 13
  • well for one in your buttons css you haven't stated which type of positioning your using `position:relative;` `position:absolute;` `position:fixed;` in your uni css, you have a `max-height: 150px` but your `height:250px`. also `padding` of any kind will add the value you stated to the `width` therefore the width of the element will be `width:250 + 50 (padding-left)` – Colum Dec 29 '14 at 15:55

1 Answers1

0

I'm not sure which elements should be where, but make sure the closing body tag is the last tag before the ending html tag. Move the closing div tag before it.

Here's some revised CSS:

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

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

#buttons
{
    margin: 0 auto;
    width: 300px;
    line-height: 40px;
}

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

http://jsfiddle.net/om7qfebz/1/

  • Thanks very much indeed, however the uni logo is now in the moddile of the page. how do i move it to the top left corner of the page? and also how do i resize the buttons? I'm trying to make the width a lot bigger I tried posting a wireframe but stackoverflow doesn't allow me topost images just yet... – Hollywood Dec 29 '14 at 16:32
  • You can remove the margin: 0 auto from the uni id, the margin: 0 auto is an easy way to center block elements. That'll move it back to the left. As for the buttons, you may want to consider using input tags over button tags and then you can style your input elements accordingly with CSS height and width properties. This may help too. http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use –  Dec 29 '14 at 16:37
  • Thanks a lot, The logo has now been taken care of thanks to you. However, those two really do need to be buttons or tabs of some sort where users can click on them and be navigated to another page, not input where user puts in info...your help is very much appreciated – Hollywood Dec 29 '14 at 16:42
  • Is there perhaps another option i could use? – Hollywood Dec 29 '14 at 16:53
  • Gotcha... buttons with anchor tags should work, or you could make a inline ul nav with anchor tags. You can add id's or classes and get pretty creative here. http://jsfiddle.net/kv9j7bjg/ –  Dec 29 '14 at 16:54
  • thanks a lot for your guidance. I have now used this method and the buttons are placed under each other, whereas i'd like them to be side by side if possible...any advice? – Hollywood Dec 29 '14 at 21:23
  • I have now managed to place them side by side however they are not aligned to the left of the page whereas i'd like them to be positioned a bit more in the centre of the page... – Hollywood Dec 29 '14 at 21:29
  • #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; } THIS IS MY CURRENT CSS – Hollywood Dec 29 '14 at 21:30
  • Few ways we could do it. Try this fiddle: http://jsfiddle.net/om7qfebz/2/ ...I added the buttons id back in and set it to center the block elements - you can set the width of the id higher to position the element to the left. These links might also give you some better info than what I can provide: http://stackoverflow.com/questions/15300234/how-can-i-make-a-button-element-be-horizontally-displayed-in-center-alignment-in http://css-tricks.com/centering-css-complete-guide/ –  Dec 29 '14 at 22:05