Html5 and Css how to create separate ul li and move <aside> to the left

Question

How do I push the image to the side and to the top? Also how do I control each UL LI on their own and not as a general?

Current Result

HTML

<div class="header">
  <h1>Merry Christmas</h1>
  <ul id="lil">
    <li><a href="">About Us</a></li>
    <li><a href="">Christmas</a></li>
    <li><a href="">Snow</a></li>
    <li><a href="">Other Holidays</a></li>
  </ul>
  <img src="http://ntt.cc/wp-content/uploads/2009/11/Bell.png" />
</div>
<aside id="sideBar">
  <ul>
    <li>What is Christmas</li>
    <li>Do I celebrate Christmas</li>
    <li>Is Christmas fun?</li>
    <li>Conclusion</li>
  </ul>
</aside>

CSS

div.header {
  background-color: #E32636;
  color: white;
  text-align: center;
  padding: 2px;
  margin: 0px;
  font-family: 'Nemo Nightmares', Arial;
  font-size: 300%;
}

ul#lil li {
  list-style-type: none;
  display: inline;
  color: white;
  font-family: 'Courier New';
  text-align: center;
  margin: 6px;
}

img {
  float: left;
  width: 270px;
  height: 270px;
  position: relative;
  bottom: 190px;
}

a:link {
  text-decoration: none;
  color: white;
}

a:hover {
  color: white;
  text-decoration: underline;
}

a:visited {
  text-decoration: none;
  color: white;
}

ul li {
  color: black;
  list-style-type: none;
  margin: 12px;
  font-size: 100%;
  position: relative;
  right: 350px;
}

#sideBar {
  background-color: #87A96B;
  float: left;
  left: 350px;
}

Answer 1

First off, you have some syntax errors in your HTML.

1) Several of you anchor tags are not closed. You forgot the / in the closing tags.

2) Your image tag is inside a <ul> , but not inside a <li> . Anything you put in a list tag needs to be a <li> .

Corrected HTML:

<div class="header">
  <h1>Merry Christmas</h1>
  <img src="http://ntt.cc/wp-content/uploads/2009/11/Bell.png" class="bells" />
  <ul id="lil">
    <li><a href="">Aboutus</a></li>
    <li><a href="">Christmas</a></li>
    <li><a href="">Snow</a></li>
    <li><a href="">OtherHolidays</a></li>
  </ul>
</div>
<aside id="sideBar">
  <ul>
    <li>What is christmas</li>
    <li>Do I celebrate Christmas</li>
    <li>Is Christmas fun?</li>
    <li>Conclustion</li>
  </ul>
</aside>

There are a lot of options here.. you could use absolute positioning for a quick fix..

img{
    position: absolute;
    top: 10px;
    left: 10px;
}

You could use media queries to make it different sizes deending on the size of the screen..

/* Large desktop */
@media (min-width: 1200px) {
    img{
        width:30px;
        height: 30px;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    img{
        width:25px;
        height: 25px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Or any number of other tricks, but ideally, you should use some kind of scaffolding. Something like Bootstrap makes this kind of thing much easier to manage.

---

If you're interested in Bootstrap, these 3 links should help get you going very quickly. Google is now checking for mobile compatibility, so using BS will also improve your search ranking.

• This one is a single page blank bootstrap template that pulls the BS files from a CDN so you can get started without downloading anything. Just copy this into a blank html document and you're ready to use any of the examples in the next two links.

• This one explains the scaffolding and how to position items on the page. Bootstrap is a responsive framework, meaning it automatically resizes the page for smaller devices.

• And this one explains all the built-in styling tools it comes with. Jumbotron might be useful for this.