SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Text Spread

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Spread

    The text in my site spreads right accross the page?
    Where as in the book version is more condensed.
    am I missing something - everything looks the same.
    Thanks,
    Barry

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Most people won't know what book you are talking about, so specify that in each thread.

    You've made a mistake in your code somewhere. You'll need to post it so that we can identify the problem.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    r u using float right?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, yes from build your own web site the right way using HTML & CSS Ian Lloyd

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xm1ns="http://www.w3.org/1999/xhtml">
     <head>
       <title>Bubble Under - The diving club for the south-west UK</title>
       <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
       <link href="style1.css" rel="stylesheet" type="text/css" />
     </head>
     <body>
       <div id="header">
         <div id="sitebranding">
       <h1>BubbleUnder.com</h1>
       </div>
       <div id="tagline">
       <p>Diving club for the south-west UK - Let's make a splash</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 our super-dooper Scuba site</h2>
       <p><img src="images/divers-circle.jpg" width="200" height="162"
           alt="A circle of divers practice their skills" /></p>
       <p>Glad you could drop in and share some air with us! You've
           passed your underwater navigation skills and successfully
           found your way to the start point - or in this case, our
           home page.</p>
       <h3></h3>
       <p></p>
       <p></p>
       <p></p>
       <h3></h3>
       <p></p> 
       </div> <!-- end of bodycontent div -->  
     </body>
    </html>
    Thanks,
    Barry
    Last edited by ralph.m; Nov 8, 2011 at 04:03. Reason: code tags

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If your styles aren't being applied, the link to your style sheet is probably wrong.

    1. Do you have a file called style1.css?

    2. Is it in the same folder as the page your HTML file?

    If yes to both, then post your styles here too.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, yes CSS1 file is in the same file and being applied.

    /*
    CSS for Bubble Under site
    */

    Code:
    body {
      
      font-family: Verdana, Helvetica, Arial, sans-serif;
    
      background-color: #e2edff;
      line-height: 200%;
      padding: 15px;
    }
    
    p {
      font-size: small;
      color: navy;
    }
    
    #tagline p {
      font-style: italic;
      font-family: Georgia, Times, serif;
    }
    
    h1 {
      font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
      font-size: x-large;
    }
    
    li {
      font-size: small;
    }
    
    h1 {
      font-size: x-large;
    }
    
    h2 {
      color: blue;
      font-size: medium;
      font-weight: normal;
    }
    
    em {
      text-transform: uppercase;
    }
    
    h1, h2, h3 {
      font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
      background-color: navy;
      color: white;
    }
    
    a {   
      font-weight: bold; 
    }
    
    a:link {
      color: black;
    }
    
    a:visited {
      color: gray;
    }
    
    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.fun {
      font-style: italic;
    }
    Last edited by ralph.m; Nov 8, 2011 at 04:02.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Barry360 View Post
    yes CSS1 file is in the same file and being applied.
    Yes, but what is the file called? If it's called css1.css, it won't work. What is it called, and where is it?

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    File name style1.css it's in a folder with all the html web files

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, where are you up to in the book? I'm not sure at what stage the page is set to less than full width (I haven't read it). In lieu of that, you can do something like this (although it's not very efficient):

    Code:
    #header, #navigation, #bodycontent {width: 800px; margin: 0 auto;}

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm doing chapter 3 p93 (Adding some style with CSS)

    I understand the above code will condense but not sure yet how to add to the other code.

    I have not come accross any code like that in the book however the images of the site in the book
    display different to what I have.

    Will continue as is.
    Thanks,
    Barry

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Are you comparing your current page with an example page in the book's code files? If so, which one are you up to? Is your working example not looking the same?

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm comparing my onscreen display with the books onscreen display
    p93 chapter 3
    Though I have moved on to Chapter 4 now

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    So in the book files, that would be 07_blue_background/about.html ?

    Are you having a problem getting your page to look like that? That page has pretty much full-width text, just a bit of padding around the outside on the body, which you seem to have in your styles.

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes 07_blue, I'm feeling reassured as the code is looking OK you said - the book probable can't display how it actully is at present
    because of space constraint.
    I'm happy to plough on from here.
    Thanks,
    Barry


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
  •