SitePoint Sponsor

User Tag List

Results 1 to 24 of 24

Thread: Book support

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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%;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ridefree View Post
    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.
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the first stuck point

    I tried for a screen shot
    Attached Images Attached Images
    Last edited by ridefree; Mar 12, 2013 at 22:28. Reason: add screen shot

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    OK, but what's wrong there? That looks lust like it should, doesn't it?

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Put together and see

    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
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by ridefree; Mar 13, 2013 at 02:26. Reason: Adding attachments

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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:

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

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ridefree View Post
    can you put the css & html I sent together and let me know if it does mount the background picture
    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:

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

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please try again

    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 ..
    Attached Files Attached Files
    Last edited by ridefree; Mar 13, 2013 at 19:33. Reason: Still not get this

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    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!

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    So did that solve the background issue for you? I gave you the solution to that in my last post.

    Quote Originally Posted by ridefree View Post
    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?
    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.

  15. #15
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying for a solution

    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.
    Attached Images Attached Images
    Last edited by ridefree; Mar 14, 2013 at 13:18. Reason: Screen shots

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ridefree View Post
    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.)

  17. #17
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ridefree View Post
    The background image folder is labeled as (backgrounds) and it is in the same folder as the html & the CSS pages.
    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.

  19. #19
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

  21. #21
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will continue with the book and see what goes.. now what I just now notice is that the float image goes to the right spot on my laptop Mac OS 10.6.11 but not on Mac OS 10.8.2 .. so my thinking is that something will be a or is a problem if the layout display view is different from one opp system version to another ... any ideas?

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ridefree View Post
    if the layout display view is different from one opp system version to another ... any ideas?
    Normally I wouldn't expect that to be the case, but I can't say for sure. I'm on 10.8.2, but I can't test earlier versions.

  23. #23
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will continue along and will drop you a note as I go .. thanks again

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ridefree View Post
    I will continue along and will drop you a note as I go .. thanks again
    No probs! Good luck with it, and don't hesitate to come back if you have more questions.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •