Text Spread

Get Started
1

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

Most people won’t know what book you are talking about, so specify that in each thread. :slight_smile:

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

3

r u using float right?

4

Hi, yes from build your own web site the right way using HTML & CSS Ian Lloyd

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

5

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

Hi, yes CSS1 file is in the same file and being applied.

/*
CSS for Bubble Under site
*/

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;
}
7

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

File name style1.css it’s in a folder with all the html web files

9

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):

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

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

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

I’m comparing my onscreen display with the books onscreen display
p93 chapter 3
Though I have moved on to Chapter 4 now

13

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

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