Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have discussed layout, we are going to turn our focus towards styling content. We will begin by opening another exercise file and if you are doing the exercises along with me, we are working on the index_background file located in the Chapter 3 Starting Files directory. As you can see, this file is a little further along than our previous file. Most of the interior content has already been styled and in fact other than the navigation and some of the graphics, the page is pretty much finished. So we are going to focus on the use of background graphics and how important they are to CSS layouts. Occasionally you are going to have an element inside your XHTML that you want there for either accessibility purposes for screen readers or for other devices as a way of identifying that content or passing along some type of information but you might not want that really to be visible.
You can see at the top of our page, we have Welcome to Cheek Chastain Gallery. That's a Heading 1 file and any screen reader that hits this file will read that right off of the bat and give a Welcome to the Cheek Chastain Gallery. Well, that's nice for screen readers and it might be nice for other devices that are parsing the content but we really don't need that in there visually. We would like to have maybe the logo or the name of the gallery represented in a visual fashion. So we can do that by using a background graphic. So what we are going to we are going to do a technique called Image Replacement where we take an element on the page and we replace it with a graphic and that's usually done through the use of background graphics.
So let's go to our CSS Styles panel and we will start by editing some of the styles that are already here. So let's go to the CSS Styles panel and we will start by adding a style that will hide our header H1. So again, if I click inside that text I can see that it's inside the header div tag and it is H1. So we can write a selector to target that specific style. In the CSS Styles panel, I will actually click on the header style itself. Now not only does that sort of give me an idea of what's going on with the header but when I create a new style it will place it relative to that position instead of at the very bottom of my style. So I don't have to keep dragging things around.
So we will go down to the Add New CSS Rule dialog box, we will click on that and the selector I am looking for here is #header h1 because we have actually selected it inside of the header to begin with, it gives us a descendant selector that lists every element in order. Well, we don't need all of them; we just need the #header h1. So if you selected someplace else, you just click the advanced selector type and type in #header h1 for a descendant selector. We will go ahead and click OK and then this is going to be a very simple selector. I am going to go to my Box properties and where it says Margin I will deselect Same for all and for my left margin, I am going to type in -9000 pixels. Now that may seem like bit of overkill but let me explain what this is doing.
There are two ways of hiding an element on the page. You can change the Display property to none and you would actually in this dialog box, go to your Block category and you can choose Display and you can choose None and that would hide it from the screen. The problem with this technique is it also hides it from a lot of the screen readers out there. So if your desire is to have this content accessible than that's maybe not the best way to do that. There is nothing wrong with turning Display to None in certain cases but if your goal is to have that content accessible that's not something you want to do.
So I am going to click back on my Box properties and let's talk a little bit more about what we just did here with the negative margin. So by applying a -9000 pixel margin to the left side of this one, what's going to happen is-- remember negative margins to the left move us actually to the left because positive values move us to the right. So we are going -9000 pixels off the page basically. Now only on a really, really, really big monitor where you would be able to see that. So we give it a high enough value where we are pretty much safe on any monitor that somebody might look at this on. So I am going to go ahead and click OK and sure enough that gets rid of our header. Off it goes. We don't see it anymore.
You get preview of the browser all day long and you wouldn't see it. Now we actually need to go back and add a background graphic to our header div tag now and the easiest way to do that is actually in Code View. So I am going to up to my layout_background.css and even if you hadn't opened that before it should be open now, because the default value in Dreamweaver is if you edit an external style sheet it will go ahead and open that up. Because Dreamweaver assumes that you might want to go ahead and do some manual editing. So click on that. And I need to find my header div tag. So I am going to scroll up all through my sidebar code, favorites, current, so you can see each of the sections that we have in there now. Featured, current, sidebar, there are a lot of rules that pertain to those. And I am going to go up and right over here are all my header styles.
Now notice that because we have clicked on the header style, Dreamweaver inserted the header h1 directly in header styles. So we are going to our background. Currently our background only has a color but what we are going to do now is we are going to apply a background graphic. So if you click right after the color definition in the background rule, you can hit your Spacebar and a lot of other options for working with the background come up. One of those, and using the code hinting I love this, is URL. So if you don't remember where you placed the graphic or exactly what you named it, Dreamweaver allows you to go ahead and browse for that by using the short hand notation. So, I'll go ahead and click URL and hit Return and you can see it actually lets me browse.
So I am going to click on my images and what I am looking for is I am looking for -- as I scroll down through my images directory -- I am looking for the file title.gif and there it is. This is a transparent GIF file and it has the Cheek Chastain Gallery and you can see that we have done a matte edge of the same red color so that it will blend with the background really nicely. So I am going to go ahead and click Choose and now if we were to preview it we would see the logo over there but the problem is we would see the logo over and over and over again. The default behavior for using a background graphic is that the background graphic will tile as many times as it can fit inside of the container element. So we only want to see this logo once.
So we want to make sure that we actually add a little something to this. So after our URL we are going to tell it to no- repeat. So I am going to leave the code hint up here so you can see this but it says no-repeat and underneath that we have repeat, which is the default behavior, and then we have repeat-x and repeat-y. Those two bottom options, repeat-x and repeat-y, would repeat it along an axis, so either horizontally or vertically if you don't want to tile along both of them. That's really good for backgrounds for long vertical elements or for horizontal elements.
So we will say no-repeat and we can also change exactly where this is positioned. Now the default is to position at top left corner and so we don't really need to be explicit as far as that goes but we could specify top, left, bottom, right, we could even give pixel values or em values for the horizontal and vertical positioning. We will just go ahead and be explicit and pass in top and then left and noticed that we're not putting a comma between those; we are just putting spaces between them and the browser knows how to render that. It knows that these are different elements inside the background category.
So we will save our layout_ background and we will go back to our index_background page and sure enough there is our Cheek Chastain Gallery. So, our header now has the Cheek Chastain title in a graphic format. The heading is off the page and we still need a position the logo and the logo is going to go in the bottom right hand corner of the header and the reason why we didn't just make one big background graphic is because maybe the client might change their mind and want a flexible layout rather than a fixed layout. Well, if I have got a background graphic for the header that is 9000 pixels wide and somebody comes to me and says, hey can you make it to where our design stretches? Well now I have to go back and totally redo that. So even though we are working with a fixed layout, we are going to go ahead and work with this as if it were a flexible layout and show you how easy it is to have a header that would stretch both to the left and to the right.
So if we go back in the Code View, I can see that there is one little bit of code that's been adding to this. So I am going to go up underneath the actual navigation menu and right down on line 24, I can see that there is empty div tag and it just says id=logoImage. So again, we have some non-semantic markup here for some web standards people. They get kind of finicky about that but it's just one line of code, so it's not really hurting anybody and it's going to allow us to assign a background graphic to that. So we will finish this up by going back over to our layout_background.css and remaining up in the header, I am going to add a little after #header h1 and our new rule is going to #header #logoImage. Now we don't really need to be that specific.
We could have just said #logoImage and we would have been fine, but by putting the header in front of it, we are giving an identity as well and we are making sure that there are no specificity issues later on. So here I am going to give it a positioning attribute and I am going to position it absolute now. If you remember from the previous movie, we took our header and you can see right up here on line 35, the header has a position relative attribute. That means that anything inside of it and if we include logoImage div tag, it will now position itself relative to that element. So we are positioning ourselves from the top left-hand corner of the header graphic itself. So go down to our next line and I will give it a top position of zero and we will give it a right position of zero.
Now what that's going to do for us is it will take the top right hand corner of this div tag and it will align it towards the top right hand corner of our header. So we go down to our next line and we will do a width of 200 pixels and that's going to be the exact width of the background graphic. So we know that this container is empty but by giving it a 200 pixel width, we are making it the exact size of our graphic. Now to do that we will also assign a height value. So assign it a height value and give it a height value of 141 pixels. So you are going to need to know what your graphic's width and height are before you begin writing your styles and the last thing we'll do is we'll assign our background graphic. So we will type in background and once again, I can go ahead and just hit you to go to my Dreamweaver URL hinting and go ahead and hit there and I can browse.
So I will go in the Images directory again and what I am looking for this time is the logo.gif. So we will find logo.gif and you can see a representation of what that's going to look like and we will hit Choose and we will give that a semicolon and we will finally close the header logo image style out. So we will save the file. We go back into our index_background and we will switch over to Design view and over there on the right hand side, let's scroll over there is our logo. You will notice that it's repeating and that's because we didn't give it any repeating information. So you can see when you don't specify a no-repeat it's going to tile as many times as it can.
So we are going to have to go back and modify that and that's very simple to do. Just go right after you have described the URL and you are going to type in that no-repeat and once again, we are going to give it a top right positioning and that again the default is for the graphic to appear at the top left hand of the div tag and this will make the graphic appear on top right hand corner of the graphic. It will line up with the top right hand corner of the div tag. We will save this again. I will go back to our index_background and that looks a little better.
So we will go ahead and preview that in a browser and there is our finished header. Now we will have to deal with that navigation later on but before we do that, our next movie will look at applying background graphics to our sidebar and we will explore a technique that's called faux columns.
Get unlimited access to all courses for just $25/month.Become a member