- #1
jeff1evesque
- 312
- 0
Hello,
I have a website that was a project for one of my computer science courses. The class is over now, but I wanted to touch up and gain more experience designing webpages. I was wondering if there is a way of indenting tables? My site is: http://pubpages.unh.edu/~jmm42/FINAL/main.html . The eight links to the left along with the two paragraphs to the right are infact in a table. However, I didn't like the fact that the links (the first column) are lined up to the far left. I was wondering is there a way I could indent the whole table to the right- by say 20pixels?? This way the list of links could be flush with my picture on the top. I've been searching online for ways to do this but couldn't find anything. If there is code that allows this to be done in CSS- that would be preferable.
Oh by the way, this the following is my CSS code for the page:
================================================== ===============
/* Comments in CSS files differ from XHTML- it is not '<!-- comment -->'
File includes rules to add presentation details to main.html */
/* Set the body of the page to specified format */
body { background-color: #00003B; color: black;
font-size: large; }
/* Set top-layer background-green, dimension of green page*/
#pageContent { background: url(../PICTURES/greenBackground2.jpg)
no-repeat center;
width: 810px;
margin: 0px auto; /* See definitions below (#7) */
border-style: solid;
border-color: #006400;
border-width: 8px; }
/* Set topPic */
#topPic { text-align: center; }
/* musicPlayer */
#musicPlayer { text-indent: 20px; }
/* Table format: breaks into two columns (list of links and text-column)
#menu-list { text-indent: 20px; }
/* Set CSS atrributes for menu bar*/
#menu { background: #fff;
letter-spacing : 7px;
background: url(../PICTURES/greenBackground2.jpg) no-repeat center; }
#menu li { display: inline; } /* See definitions below (#5) */
#menu li a { padding: 1px 2.2em; /* See definitions below (#6) */
text-indent: 3px; }
/* NOTE: HTML elements are either shown as block or inline elements: */
#menu a { display: block; /* See definitions below (#1) */
float: left; /* See explanation below (#2) */
height: 23px;
text-align: center;
text-decoration: none; /* See below (#4)....*/
/* background: #9ACD32 */ }
/* Attributes when cursor is over "menu" hyperlinks */
#menu a:hover { color: navy;
text-decoration: underline;
background : #6B8E23;}
#menu a:visited { color: #00008B; }
/* Establishes columns of text, images for main area */
#leftCol1 { width: 250px;
border-right: 1px dashed #000;
padding: 10px;
float: left;
text-align: justify; }
/* margin: 10px 40px;
width: 40%;
color: black;
border-style: solid;
border-color: #006400;
border-width: 1px; } */
#rightCol1 { width: 250px;
border-right: 1px dashed #000;
padding: 10px;
float: left;
text-align: justify; }
/* margin: 10px 200px;
width: 40%;
color: black;
border-style: solid;
border-color: #006400;
border-width: 1px; } */
/* Copyright */
#copyright { text-indent: 2px;
font-size: 12px; }
/* W3C validator */
#validator { text-align: center; }
================================================== ==============
Thanks,
Jeffrey
I have a website that was a project for one of my computer science courses. The class is over now, but I wanted to touch up and gain more experience designing webpages. I was wondering if there is a way of indenting tables? My site is: http://pubpages.unh.edu/~jmm42/FINAL/main.html . The eight links to the left along with the two paragraphs to the right are infact in a table. However, I didn't like the fact that the links (the first column) are lined up to the far left. I was wondering is there a way I could indent the whole table to the right- by say 20pixels?? This way the list of links could be flush with my picture on the top. I've been searching online for ways to do this but couldn't find anything. If there is code that allows this to be done in CSS- that would be preferable.
Oh by the way, this the following is my CSS code for the page:
================================================== ===============
/* Comments in CSS files differ from XHTML- it is not '<!-- comment -->'
File includes rules to add presentation details to main.html */
/* Set the body of the page to specified format */
body { background-color: #00003B; color: black;
font-size: large; }
/* Set top-layer background-green, dimension of green page*/
#pageContent { background: url(../PICTURES/greenBackground2.jpg)
no-repeat center;
width: 810px;
margin: 0px auto; /* See definitions below (#7) */
border-style: solid;
border-color: #006400;
border-width: 8px; }
/* Set topPic */
#topPic { text-align: center; }
/* musicPlayer */
#musicPlayer { text-indent: 20px; }
/* Table format: breaks into two columns (list of links and text-column)
#menu-list { text-indent: 20px; }
/* Set CSS atrributes for menu bar*/
#menu { background: #fff;
letter-spacing : 7px;
background: url(../PICTURES/greenBackground2.jpg) no-repeat center; }
#menu li { display: inline; } /* See definitions below (#5) */
#menu li a { padding: 1px 2.2em; /* See definitions below (#6) */
text-indent: 3px; }
/* NOTE: HTML elements are either shown as block or inline elements: */
#menu a { display: block; /* See definitions below (#1) */
float: left; /* See explanation below (#2) */
height: 23px;
text-align: center;
text-decoration: none; /* See below (#4)....*/
/* background: #9ACD32 */ }
/* Attributes when cursor is over "menu" hyperlinks */
#menu a:hover { color: navy;
text-decoration: underline;
background : #6B8E23;}
#menu a:visited { color: #00008B; }
/* Establishes columns of text, images for main area */
#leftCol1 { width: 250px;
border-right: 1px dashed #000;
padding: 10px;
float: left;
text-align: justify; }
/* margin: 10px 40px;
width: 40%;
color: black;
border-style: solid;
border-color: #006400;
border-width: 1px; } */
#rightCol1 { width: 250px;
border-right: 1px dashed #000;
padding: 10px;
float: left;
text-align: justify; }
/* margin: 10px 200px;
width: 40%;
color: black;
border-style: solid;
border-color: #006400;
border-width: 1px; } */
/* Copyright */
#copyright { text-indent: 2px;
font-size: 12px; }
/* W3C validator */
#validator { text-align: center; }
================================================== ==============
Thanks,
Jeffrey
Last edited by a moderator: