Book support

Is there anyone at your site that does direct support for the book ( build your own website the right way using html & css 3rd edition by Ian Lloyd) … I am having some issues with some parts …not getting the expected result with the model … I am trying to figure out if it software related or not.

Somehow I am not getting the background images to mount to the site. Nor the float image to go past the half way point in the view window.

ridefree

What page have you managed to get to or having issues with, and what Browser are you using? Have you made sure you’ve done a page Refresh/Reload after saving the HTML and CSS files. If you still have problems post he CSS and HTML into this thread so we can see what is happening, as opposed to what is supposed to be happening.

Got to page 172:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title>Aktivate - reggae band in northeast Calgary</title>
<link href=“style2.css” rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div id=“header”>
<div id=“sitebranding”>
<h1>Aktivate.ca</h1>
</div>
<div id=“tagline”>
<p>Caribbean music - the way we like it!</p>
</div>
</div> <!-- end of header div –>
<div id=“navigation”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“contact.html”>Contact Us</a></li>
</ul>
</div> <!-- end of navigation div –>
<div id=“bodycontent”>
<h2>Welcome to where Aktivate’s music hangs out</h2>
<p><img src=“divers-circle.jpg” class=“feature” width=“200” height=“162”
alt=“A circle of divers practice their skills”/>
</p>
<p>We’ve got some Reggae, Calypso and Aka going on.</p>
</div> <!-- end of bodycontent div –>
</body>
</html>

The CSS:

/*
CSS
*/

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 0;
margin: 0;
}

p {
font-size: small;
color: navy;
}

h1, h2, h3 {
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
}

h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}

li {
font-size: small;
list-style-type: none;
}

h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}

em {
text-transform: uppercase;
}

#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}

a {
font-weight: bold;
}

a:link {
color: black;
}

a:visited {
color: navy;
}

a:hover {
text-decoration: none;
color: white;
background-color: navy;
}

a:active {
color: aqua;
background-color: navy;
}

.fun {
color: #339999;
font-family: Georgia, Times serif;
letter-spacing: 0.05em;
}

blockquote {
font-style: italic;
}

#navigation {
width: 180px;
background-color: #7da5d8;
}

h2, ul {
margin-top: 15px;
}

#header {
border-top: 3px solid #7da5d8;
}

.feature {
float: right;
margin: 10px;
}

#navigation, #bodycontent, #header {
position: absolute;
}

#navigation, #bodycontent {
top: 6.54em;
}

#bodycontent {
left: 200px;
}

#header{
width: 100%;
}

At this stage, you don’t have any background images called in your style sheet, so you might need to give more info on what you’ve tried so far.

Regarding the float image, sould you perhaps post a screen shot of what you are seeing, and tell us what browser you are using? The code you posted should be looking fine.

I tried for a screen shot

OK, but what’s wrong there? That looks lust like it should, doesn’t it?

Not at all, here is a screen shot from the archive download for the book with the same image and its position. Also attached is a zip with css mount background image instruction along with the html

For the nav background to appear on the page, you need to place it in a folder called “backgrounds”, because that’s where you are telling your style sheet to find it:

background: #7da5d8 url([COLOR="#FF0000"]backgrounds[/COLOR]/nav-bg.jpg) no-repeat;

I did that many times over and the background do not mount … can you put the css & html I sent together and let me know if it does mount the background picture … if does then I am dealing with something very different.

Did you notice that there is a difference between the 2 screen shots.

Yes, I did that and it worked. All I had to co it create an extra /backgrounds/ folder and put the background image in there. The alternative is to change the link in the CSS, which might be a good idea in the first place, while you are still learning. Just keep images in your main folder, along with your CSS file and home page, and change the CSS to:

background: #7da5d8 url(nav-bg.jpg) no-repeat;

Well, this is pretty restarting … since nothing works to get me past this hurdle … So this upload is exactly what I have done including adding the link as you suggested. Please see if it mounts the images …

You’ve left the background images inside the /backgrounds/ folder, but removed the ‘backgrounds’ bit from the CSS URL. With the folder setup you have right now—in the attachment above—your CSS should look like this:

background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;

BUT … I found that didn’t work, even though it should! I finally realised the reason: your “backgrounds” folder is not actually called that. It actually has a space at the end, meaning it’s really called "backgrounds ". Remove that space from the end of the folder name, and update the CSS file as shown above.

O, the small details!

I had written the CSS background link the way you have it above… that is the way it is written in the book but it did not work then either … did you manage to get that float image to move to 10px from the right side margin like it is shown in the archive download? Well what it is looking like, is I have a problem on my end, either the computer or the text writer … what is crazy here is the mark ups from the archive run just fine … I have actually tried copying the CSS line for line and still the snag hangs on. What is even crazier is I have 2 computers but the same text writer on both and I get the same snag at the same places… If you come up with any other ideas that I may try shoot them my way … let me know on the float image … thanks man

So did that solve the background issue for you? I gave you the solution to that in my last post.

Not sure what you mean there. You didn’t mention this as an issue, as far as I can see. There is a 10px margin around the image in the files you provided above, which works fine for me. Perhaps post another screen shot of what you are seeing and what you expect to see if there’s a problem.

Sorry I was not very clear in the posts 5 & 8. Here I post the screen shots of what it is support to look like and what I am getting. The backgrounds still not work.

Let’s sort this one first. Please make sure to give some kind of detail of what you are doing. I noted above the two things yo need to do to fix the background issue: fix the folder name (remove a space at the end) and keep the word “backgrounds” in your CSS file url( ). Did you try those steps? Did you understand them? I can’t help unless you give some feedback.

The layout issue is odd. What you show on the left above is the way it should be based on the code you posted above. Perhaps the author’s version is from a later stage when he has used a better layout technique. position: absolute should not be used for page layout, so I presume he’s presenting that initially just to show you how it works. (I haven’t read the book.)

Let me sat to have been such a pain: Sorry to have not said anything about what works or not … Nothing has worked so far one bit. Well I am sure what space your are asking me to remove : The background links in the css, I wrote it same as the above, the one you sent me : The background image folder is labeled as (backgrounds) and it is in the same folder as the html & the CSS pages.

The book I have of the author is the 3rd edition and just be sure I picked up a copy of the 2nd edition and the 2nd is exactly the same as the 3rd as far as the codes go from where the codes starts all the way to the background images, nav/ tagline and header. The absolute bit is in both books and is a part of the CSS styling and functions the same way …
Here is something… the float image does the float as instructed by the CSS to float right in a test before the all the styling starts and that is puzzling that as soon as the styling is in place and the image is assigned to to float right it stops in the middle of the page and it does look odd there. See in the CSS I sent for the way the float is written.

Yes, but you missed my point above. You do have a folder called "backgrounds ", but as you typed the word “backgrounds” as the folder name, you added an extra space at the end. You need to highlight the folder name and remove the space from the end. Unfortunately, computers take everything very literally, and that extra space at the end counts as part of the name. :slight_smile:

Now I understand what you were getting at and now the backgrounds mount. Such a small not knowing … Now is there a way to have this float image to move more to the right. It does look odd right there in the middle …

Now I can breath and keep what I have left of my hair…

Thanks for hanging in there with me…

Cool, glad that bit is sorted.

I’ve looked at the layout issue, and it is very strange that your layout differs from the code sample the book gives. It’s very odd, because I can’t see any differences. Will have to mull further over this one.

Unfortunately, using position: absolute is not a good page layout method anyway, so presumably the book goes on to describe better ways. I’d advise reading the book right through before deciding on this layout method.