My first site with a coherent layout

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.

inspector

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.

Comcast is terrible. Also, working on a layout

Page layout is the key to making your website look good. Or just actually like a website. Ever see a site that looks like a bunch of text and colors randomly placed? That would be a combination of poor layout/design and css skills.

W3C suggests you arrange content in multiple columns, like a magazine or newspaper. You use <div> elements to group the content, and then css to style it.

For this exercise, I wanted to use the example on the link above to make a site for a construction company. First step was to write some html. I forgot how to link it to a stylesheet exactly. This was my first try:

<link type=”html/css” href=”file:///Users/kyledamken/Desktop/code%20stuff/CSS/construction.css”>

Anddd here is the correct version:

<link rel=”stylesheet” type=”text/css” href=”file:///Users/kyledamken/Desktop/code%20stuff/CSS/snowboard.css”>

I forgot to set the rel attribute to stylesheet. What is the rel attribute? It specifies the type of relationship between the current document and the linked document, which is why I set it to stylesheet.

Now it was time to use my stylesheet. I had a pneumonic device for remembering whether . or # goes with class or id in stylesheets. The closest I have is: “If you get your period in class (.classname) you’ll get pounded, unless you have an id (#idname).

I also had trouble writing a copyright sign for my footer. Turns out, there are specific codes for symbols like that. The copyright one is &copy;. In my code it looked like.

<div id=”footer”>

<p> Copyright &copy; Big Joe’s Construction 2014</p>

</div>

More to come, but I had to spend 2 hours fighting the fucking awfulness that is comcast to get my internet back on, so I’ll finish up tomorrow.