How to create a border in CSS

Get Started
1

Hello Everyone,

I wonder if I could ask some advice please.

I am very new to web design and am currently trying to design a webpage using the book “Build your own web site the right way” By Ian Lloyd.
I am about half way through the book and have just done “positioning elements”. I was quite pleased with what I’d done so far apart from one thing. I originally had a border around the the body as described on page 136. However, when positioning elements the author tells you to remove this. I quite liked it and so left it in, but it simply doesn’t work once you’ve added the various positioning rules. Could anyone advise me what I’m doing wrong please?

Many thanks.

Emma

2

Hi Emma! Welcome to SitePoint. :slight_smile:

Hmm, to be honest, I can’t think why this wouldn’t work. Could you post a link to what you are doing, or the code you are using? What exactly do you mean by positioning elements? If you are using things like position: absolute, to be honest, they are not the best tools for page layout.

3

Hi Ralph,

Thanks for your reply :slight_smile:

To be honest I’m largely following the instructions in the book.
In my style.css file I have:

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

and then further down I have:


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

#navigation, #bodycontent {
  top: 120px;
}

#bodycontent {
  left: 245px;
}

#header {
  width: 100%;
}

However if I add a “border” instruction in the body section it no longer works whereas it did before I added the position markup.

Hope this makes sense.

Thanks in advance

Emma

4

Ah, right. The problem with positioning elements like that is that they are ‘taken out of the flow’ of the document, which basically means that positioned elements aren’t aware of each other. That may or may not be why the border has disappeared. It would be good if you could post your HTML too, and add in the border, just so we can test it.

Position:absolute is very handy for positioning small elements around the place, but is not appropriate for laying out a page as a whole. I haven’t read the book, but I assume it will go on to demonstrate other layout methods that are more appropriate for a whole page, so perhaps treat this as a learning exercise rather than the finished product.

5

Thanks Ralph - that makes sense.

Sorry really stupid question now - what do you mean by "post your HTML?

6

I mean the page code that the CSS applies to, with all the content, header, navigation etc. So you will have a page something like this:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">

</style>
	
</head>


<body>
<div id="header">
  … header content
</div>

<div id="nav">
  … navigation
</div>

<div id="bodycontent">
  … content
</div>

</body>

</html>
7

It’s definitely a work in progress but the HTML is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Tony Lee Hypnotherapy</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="site branding">
    <h1>Tony Lee Hypnotherapy</h1> 
   </div> <!-- end of site branding div -->
   <div id="tagline">
    <p>Welcome to the online home of Tony Lee Hypnotherapy.</p>
   </div> <!-- end of tagline div -->
  </div> <!-- end of header div -->
<div id="navigation">
   <u1>
    <li><a href="Tonyindex.html">Home</a></li>
    <li><a href="Tonyabout.html">About Me</a></li>
    <li><a href="Tonycontact.html">Contact Me</a></li>
   </u1>
  </div> <!-- end of navigation div --> 
  <div id="bodycontent"> 
<h2>Home</h2>
   <p>I am a Hypnotherapist and Psychotherapist based in Abingdon and Oxford.</p>
   <p>Please take a look at the many services I offer or get in touch for more information.</p>
  <p><img src="jigsaw-keyhole.jpg" class="feature" width="200" height="162" alt="A lock   and key"/></p> 
  </div><!-- end of bodycontent div -->
 </body>
</html>

and the CSS is:

/*
CSS for Tony's Site
*/


h1, h2, h3 {
  font-family: "Trebuchets MS", Arial, Helvetica, sans-serif; 
}

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

h2 {
  font-weight: normal;
  font-size: large;
  color: navy;
  background-color: white;
  padding-top: 15px;
}

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

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: white;
  line-height: 125%;
  border: 5px double navy;
  padding: 0;
  margin: 0; 
}

li {
  font-size: 11pt;
}

p {
  font-size: 11pt;
  color: navy;
}

#tagline p {
  font-style: italic;
  font-family: Georgia, Times, serif;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  margin: 0;
}

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

#navigation a {
  text-decoration: none;
}

a {
  font-weight: bold;
}

a:link {
  color: navy;
}

a:visited {
  color: navy;
}

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

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

#navigation {
  width: 180px;
  border: 1px dotted navy;
  background-color: #E0E0E0;
  padding-top: .4em;
  padding-bottom: .4em;
  padding-left: .8em;
}

/* 
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured from the top-left corner of the browser's content display.
*/

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

#navigation, #bodycontent {
  top: 120px;
}

#bodycontent {
  left: 245px;
}

#header {
  width: 100%;
}

.feature {
  float: right;
}

I’ve added the border instruction - thanks!

8

Something like this would work better. (I’ve included the CSS on the page itself for testing purposes, but you can move it back to the external file.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Tony Lee Hypnotherapy</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <style type="text/css" media="all">
h1, h2, h3 {
  font-family: "Trebuchets MS", Arial, Helvetica, sans-serif; 
}

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

h2 {
  font-weight: normal;
  font-size: large;
  color: navy;
  background-color: white;
}

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

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: white;
  line-height: 125%;
  border: 5px double navy;
  padding: 0;
  margin: 0; 
}

li {
  font-size: 11pt;
}

p {
  font-size: 11pt;
  color: navy;
}

#tagline p {
  font-style: italic;
  font-family: Georgia, Times, serif;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  margin: 0;
}

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

#navigation a {
  text-decoration: none;
}

a {
  font-weight: bold;
}

a:link {
  color: navy;
}

a:visited {
  color: navy;
}

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

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

#navigation {
  width: 180px;
  border: 1px dotted navy;
  background-color: #E0E0E0;
  padding-top: .4em;
  padding-bottom: .4em;
  padding-left: .8em;
  float: left;
}

#bodycontent {
  margin-left: 245px;
}

#header {
  width: 100%;
}

.feature {
  float: right;
}
</style>
 </head>
 <body>
  <div id="header"> 
   <div id="site branding">
    <h1>Tony Lee Hypnotherapy</h1> 
   </div> <!-- end of site branding div -->
   <div id="tagline">
    <p>Welcome to the online home of Tony Lee Hypnotherapy.</p>
   </div> <!-- end of tagline div -->
  </div> <!-- end of header div -->
<div id="navigation">
   <u1>
    <li><a href="Tonyindex.html">Home</a></li>
    <li><a href="Tonyabout.html">About Me</a></li>
    <li><a href="Tonycontact.html">Contact Me</a></li>
   </u1>
  </div> <!-- end of navigation div --> 
  <div id="bodycontent"> 
<h2>Home</h2>
   <p>I am a Hypnotherapist and Psychotherapist based in Abingdon and Oxford.</p>
   <p>Please take a look at the many services I offer or get in touch for more information.</p>
  <p><img src="jigsaw-keyhole.jpg" class="feature" width="200" height="162" alt="A lock   and key"/></p> 
  </div><!-- end of bodycontent div -->
 </body>
</html>

I floated the navigation left, and put a left margin on the #bodycontent div so that it will stay to the right of the navigation. This is just one way to do it. If you don’t want the page to be the full width of the browser, there are other methods.

9

Wow yes that works :slight_smile:

Thank you very much!!