Continuing my efforts from yesterday, I completed the example and used div’s to make a coherent layout. Although I loved the snowboarding one I did, for this one I actually understood what I was doing a bit.
I set up four div elements, each with their own id and then set up the stylesheet. In the example they used the float property, which I had no idea how to use, so I looked it up.
Float allows you to have an element be pushed to the left or right, allowing other elements to wrap around it. It’s used often to put images in text, and also for layout. It will move as far to the left or right as it can, then any elements listed after it will flow around it. Elements before it in the HTML will not be affected. If you have several float elements right after one another, they’ll try to fliggity float together so long as there is room.
Finally, you’ll want to make sure you clear the float, otherwise everything after that element with it continue to float around it. To do this, simply do:
.classname
{
clear:both;
}
To add to my list of CSS things I forgot – when setting the hex code value for the background-color property, you need to make sure to put a # sign before it or it won’t work.
background-color:0076bc; = No background color.
background-color:#0076bc; = Color city, population background
Next, I wanted to remove the dots from my side navigation unordered list, as well as the indent. After some googling, I found this solution, which removed those pesky dots..
ul
{
list-style: none;
}
I’m very confused about why sometimes classes and id’s don’t work for property values when doing the CSS. For example, I wanted to set the margin-bottom for the h1 to zero so that it touched the colored boxes below it, but since I had assigned a class to the div that contained my h1 element, I assumed that would apply to all elements in the div. However, it seems that I need to instead put it directly on the h1 like this for this to work:
#header
{
background-color:orange;
}
h1
{
margin-bottom: 0px;
}
I then ran into an issue where putting the padding into the #header for the div instead of the h1 tag, caused it to have some weird extra spacing. Eventually fixed it by just putting the padding on the h1.
Another example would be above when I wanted to remove the indent and dots for the ul element. It didn’t work when entered for the div, only when I did it for the ul tag itself. Maybe it has to do with block level elements? Yet when I do a font change or something for a div containing a p tag it does seem to work for that.
For the footer, I had a p element saying the copyright stuff, but it had too much spacing due to a 10px padding value I had put on p tags. So, I added an id just for the footer text, and was able to lessen that by using css on the more specific id. It looked like this
p#footerp
{
padding:5px;
}
Finally, I found out an awesome thing when you right click something and choose Inspect element. If you use the css checker on the left, it tells you how much space each of the Margin, Border, Padding and Content is taking up for that element. In the example below, you can see I’m checking out the padding for my h1 element.
Also, I made another crappy website, fuck yea! I feel like I really learned a lot with this one, and it helped solidify a lot of the MBPC concepts I had learned earlier.
Kyle's Awesome Awful Websites 