Scroll, means that it has to be something extra for the scrollbars to appear. Extra, as in over the viewport (the part of the browser window content that you currently observe and see). Put some Lorem ipsum inside the body element. A bunch of it
And overflow:scroll is not needed. It’s the default behaviour.
If you mean you want for the background image to control the height for the body, it won’t happen. The actual content does that (or height CSS related declarations). The background image doesn’t.
What I meant was for you to start with the content first. Make it a HTML semantic markup. Then, as you apply CSS to achieve a certain presentation for the said content, you can start making concessions and add some html elements as hooks, if needed. Next, you can add functionality and influence presentation by adding Javascript code.
That’s called progressive enhancement. But, as you add functionality and enrich presentation, you need to make sure users choosing/forced not to “see” your CSS and JS, those users will still be able to get a usable and presentable web page, a decent HTML markup. That’s called graceful degradation.
Making a rounded corner box for your content is not doable just by placing an image as a background for the body element. That’s why I said you need to start lower: at the markup.
After you’re done with it, you can climb a level: apply CSS presentation. If needed it, you can escalate to another level: apply Javacript code.
noonnope is absolutely right. It is very important to understand what your doing. I know It’s very tempting, when reading a book on the process, to skip just a few pages to the part where it becomes more visual. But It is not a good idea to do that. When you have a better understanding of the basics it’s way easier to answer simple questions like about your background your self.
The problems Im having is trying to implement the ideas in the book into an actual design!
Im ok at designing a layout in photoshop and implementing the html/css in dreamweaver but I want to avoid this step. I want to build it all using HTML/CSS.
Am I best then to build the html including basic links, text, images then use css to make them into stylish buttons, position the text and images?
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Bluebelle Nail Bar & Beauty Studio - Wakefield</title>
<link href=“style1.css” rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div>
<center>
<img src=“images/Bluebelle-logo.gif” width=“344” height=“156” alt=“Bluebelle Logo” />
</center>
</div>
<div id=“navigation”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html.html”>About Us</a></li>
<Li><a href=“treatments.html”>Treatments</a></Li>
<Li><a href=“Parties.html”>Pamper Parties</a></Li>
<Li><a href=“special.html”>Special Offers</a></Li>
<li><a href=“contact.html.html”>Contact Us</a></li>
</ul>
</div> <!-- end of navigation div –>
<div>
<center>
<img src=“…/images/images/shop_03.png” width=“398” height=“267” alt=“Bluebelle Shop Front” /></div>
<h2> Welcome to Bluebelle</h2>
<p> Relax and unwind at Bluebelle Nail Bar & Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments there is something for everybody…</p>
</body>
</html>
If XHTML is what you wish, self closing tags should be consistent:
" /> and not
"/>
You’ll notice a space there before the slash.
No use of <center>. This element is deprecated.
About the img tags: unless there is an image of a product, of a graph or something like content, but instead it’s an ornament, it should be part of a CSS declaration.
Usually, the logo is some text, and then, for those accepting images when browsing, a CSS image replacement technique is used to replace the text with the graphic logo. That’s right, there are users browsing w/o accepting images (or CSS, or JS, they may only choose to accept X/HTML) and you need to make sure they understand and see the logic of your page too.
