Blogspot doesnt seem to like html a whole lot in the posts. The formatting of the divs may look nothing like it is supposed to, but i'll work on that. For now just do everything in your html editor so you can see what it is actually supposed to look like.
In the last post we made a div and put some text inside it, but often we need to place divs inside of other divs and position it a certain way. We'll start by setting up our divisions with the following CSS and HTML
.outer{
width: 600px;
height: 200px;
background-color: black;
color:white;
}
.inner{
width: 400px;
height: 100px;
background-color: lime;
}
_________
<div class="outer">
Outer div.
<div class="inner">
Inner div.
</div>
</div>
The CSS is pretty basic, one black div that will be 600x200px with white text and one lime green div 400x100px with black text.
The HTML is fairly simple too. We open the "outer" div, add the "inner" div, and close the "outer" div. When writing code in layers like this it is good practice to tab each new section in so it stays organized. When you have layers of 5 or more divisions it can be a little tough keeping track of what closing tag belongs to each div, so we put a tab space before each layer. The tab spaces won't show up in plain text, so you can put a space before the text in the inner div and it will line up normally.
That code ends up looking like this:
Outer div.
Inner div.
By default, everything lines up to the top left corner. There are a few ways to align divisions a different way.
Aligning text is very easy, just add "text-align:##" to the div. Change ## to left, center, right, or justify.
Positioning a div requires a little more knowledge. We can add margins to our div, which is like invisible space we add to the border of the div. There are two ways to write margins in CSS. You can choose each side of the div individually and add:
margin-left: 10px;
margin-top: 50px;
Or you can write it as one line like this:
margin: [top]px [right]px [bottom]px [left]px;
Think of the directions like a clock. Its easier to remember the order that way.
So if we wanted to combine both the left and top margin in one line we'd write it like this:
margin: 50px 0px 0px 10px;
You have to include every direction, even if its is just 0px. This is going to lower our div by 50px by adding an invisible 50px to the top of it, and move it right 10px by adding 10 invisible px to the left.
Outer div. Text-align is centered.
Inner div. Text-align is right, margins are 50px top, 10px left.
We can use margins to center a div as well. Horizontal centering is the easiest, we can use the "auto" option for margins. Add this the the CSS for the inner div:
margin: 0px auto 0px auto;
That sets our top and bottom margins to nothing, and automatically sets the left and right margins.
Outer div. Text-align is centered.
Inner div. Text-align is right, margins are 0px top and bottom, auto on left and right.
The potential problem with this is that the inner div now fills the entire width of the outer div. This means that any content after it will appear below it. If you want to add a div with some text wrapped around it, like a magazine article, you'll have to 'float' the div.
Floating a div means other objects can position themselves around it without any one item taking up the whole width of the page.
This time we will change our markup a little.
<div class="outer">
<div class="inner">
Inner div.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales sapien nec justo scelerisque mollis. Duis velit ante, bibendum sit amet mollis ac, fermentum et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sagittis quam dolor, a tincidunt massa. Etiam ut nulla metus, vel blandit augue. Ut aliquet lacinia magna, a pulvinar sem consectetur id. Nullam pellentesque enim lectus, viverra hendrerit arcu. Aenean dignissim vulputate metus vitae varius. Nulla gravida, neque vitae fringilla tempus, erat leo elementum risus, non cursus sem lorem ullamcorper mi. Vivamus quis elit nulla. Aliquam quam sapien, adipiscing non scelerisque at, tempor sed justo. Pellentesque imperdiet aliquam ultrices. Donec scelerisque fringilla odio et hendrerit. Etiam vitae hendrerit tellus. Curabitur a egestas quam.
</div>
I moved the inner div on top of the text in the outer div. We need the inner div to be positioned first, then the text inside. I also added a bunch of filler text so you can see how it works.
For the inner div's CSS, take out all of the margin settings before you float it. You can add margins later, but for now we just want to float it to the left.
.inner{
width: 100px;
height: 100px;
background-color: lime;
color: black;
text-align: right;
float: right;
}
You can float the div left or right and the text will wrap itself around for you. Try both in your html editor to see how it affects it. I changed the width of the div to 100px just because it looks better that way for now.
Floated right, it looks like this:
Inner div.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales sapien nec justo scelerisque mollis. Duis velit ante, bibendum sit amet mollis ac, fermentum et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sagittis quam dolor, a tincidunt massa. Etiam ut nulla metus, vel blandit augue. Ut aliquet lacinia magna, a pulvinar sem consectetur id. Nullam pellentesque enim lectus, viverra hendrerit arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales sapien nec justo scelerisque mollis. Duis velit ante, bibendum sit amet mollis ac, fermentum et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sagittis quam dolor, a tincidunt massa.
Inner div.
Etiam ut nulla metus, vel blandit augue. Ut aliquet lacinia magna, a pulvinar sem consectetur id. Nullam pellentesque enim lectus, viverra hendrerit arcu.
I'll show one more example where we will float several divs inside our outer div and space them out with margins.
Start over with a new page and use the following CSS:
.outer{
width: 600px;
height: 400px;
background-color:black;
}
.inner{
width: 100px;
height: 100px;
background-color: gray;
}
And the HTML markup is:
<div class="outer">
<div class="inner">
Inner div 1.
</div>
<div class="inner">
Inner div 2.
</div>
<div class="inner">
Inner div 3.
</div>
</div>
You can see we used the same class for several divs on the inside. CSS lets you apply a class to as many different divs as you want, but remember they will all appear exactly the same.
You can see that the divs automatically stack themselves on top of each other. If we want them lined up horizontally we can add a float to the CSS. I'll add float:right for this example.
Inner div 1.
Inner div 2.
Inner div 3.
The are all lined up the way we want, but i want them spaced out a little. 10px between each div should be enough, so add a margin line to the CSS:
.inner{
width: 100px;
height: 100px;
background-color: gray;
float:right;
margin: 0px 5px 0px 5px;
}
I added 5px to the left and right, which means they will be 5px from the edge and 10px from each other.
Inner div 1.
Inner div 2.
Inner div 3.
You can add margins to the top and bottom if you need them spaced out vertically as well.
Positioning is one of the most time consuming parts of HTML. Lining things up can be a huge pain and there is a lot of trial and error involved. The best way to learn it is to play with all of the options and see what happens.
Some easier things I'll cover are images and links.
To add an image to your page you don't need to bother with CSS, just HTML. You'd use this line:
<img src="URL" alt="TEXT" />
There are 3 main parts to the markup. You put the url of the image in the 'src' section, which stands for Source. Replace "TEXT" with a name for your image. If your image doesn't load for any reason the browser displays this text instead. Since img markups are self-contained you close it with the "/" at the end.
So to post the google logo we'd write:
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="google logo" />
Which gives us this:
Generally you'll have an 'images' folder next to your html document. If you are loading images from there you don't need to put the full url for the image. You can write it like this:
<img src="images/pic1.jpg" alt="pic1" />
If you have your images organized more than that you just type in the folder path, for example:
<img src="images/people/steve/pic1.jpg" alt="steve" />
The same rules apply for links. To write a link you use this line:
<a href="www.google.com">This text is a link</a>
This text is a link
The "a" stands for link (i don't get it either), and "href" tells your browser what page to link to. Inside the "a" tags you put whatever you want the user to click. If you have several pages on your site you can link to them the same way you link to pictures, like this:
<a href="page2.html">This text is a link</a>
Your main page must be named "index.html" but you can name the other pages anything you want. Calling the main page "index.html" tells the server to direct you to that page first. In page2 you can link back to the main page with:
<a href="index.html">Home</a>
You can make images links very easily too. Just put the "img" line inside the "a" line, like this:
<a href="page2.html"><img src="images/pic1.jpg" alt="pic1" /></a>
Everything between and will be a link.
That means we can make a link to google using the google logo like this:
<a href="www.google.com"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="google" /></a>
One last thing. Your HTML and CSS documents are going to get huge and complex, and it can be hard to keep track of everything. One thing that helps a lot is adding plenty of comments. Comments are lines in the code that don't get processed by the web browser so you are free to add any notes you need for yourself.
In HTML you add comment lines like this:
<!-- This is a comment -->
In your HTML editor they will likely show up as a completely different color than anything else. In Coda they are bright green, which makes them super easy to see. You can add them anywhere in the HTML document as long as they are outside of any other tags. You cant write:
<div class="header" <!--comment--> >
But you can write
<div class="header"> <!--this is the header div-->
</div>
Adding comments is CSS is done differently, but has the same effect. They can be added like this:
.header {
width: 800px; /*this is a comment*/
background-color: #ff0000; /*the background will be bright red*/
margin: 0px auto 0px auto; /*this line centers the div*/
}
When coding anything it is a good idea to add plenty of comments. You might have to go back to the code a long time from now and its good to know what you were thinking back then.
No comments:
Post a Comment