border / border radius and text alignment queries. Can you help?

2 replies [Last post]

Fri, 2016-12-09 14:03

Fookes74

Offline

newbie

Derbyshire, UK

Last seen: 5 years 6 weeks ago

Derbyshire, UK

Joined: 2016-11-18

Posts: 4

Points: 6

Hi,

I'm trying to style a table. This is the HTML (which I have to leave unaltered):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ultimate Frisbee - Teams</title>
	<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
	<header>
		<h1>Ulimate Frisbee Teams</h1>
		<nav>
			<a href="index.html">Home</a>
			<a href="history.html" class = "active">Teams</a>
			<a href="history.html">History</a>
			<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
		</nav>
	</header>
	<main>
		<aside class = "left">
			<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (<a href="http://creativecommons.org/licenses/by-sa/2.0" rel="nofollow">http://creativecommons.org/licenses/by-sa/2.0</a>)], via Wikimedia Commons"/> </a>
 
			<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>
 
 
			<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
		</aside>
		<section class = "right">
			<h2>College Teams</h2>
			<p>This is not meant to be a comprehensive list of all the teams, just a sampling from around the United States.  I focused on the ones that I though had cools names.</p>
			<table>
				<tr><th>Team Name</th>
					<th>Location</th>
					<th>League Type</th></tr>
				<tr>
					<td>Afterburn - Air Force</td>
					<td>Colorado</td>
					<td>Men's</td>
				</tr>
				<tr>
					<td>Cold Front (Bates College)</td>
					<td>Maine</td>
					<td>Women's</td>
				</tr>
				<tr>
					<td>Disco Inferno (Brown University)</td>
					<td>Rhode Island</td>
					<td>Women's</td>
				</tr>
				<tr>
					<td>Bad Habit (Catholic University)</td>
					<td>Washington DC</td>
					<td>Men's</td>
				</tr>
				<tr>
					<td>Jive Turkeys (Dickinson College)</td>
					<td>Pennsylvania</td>
					<td>Both</td>
				</tr>
				<tr>
					<td>Knights of the Round Disc(Longwood College)</td>
					<td>Virginia</td>
					<td>Men's</td>
				</tr>
				<tr>
					<td>Ninjas (University of Minnesota)</td>
					<td>Minnesota</td>
					<td>Women's</td>
				</tr>
				<tr>
					<td>Flying Squirrels (Hendrix College)</td>
					<td>Arizona</td>
					<td>Men's</td>
				</tr>
				<tr>
					<td>Superfly (Yale)</td>
					<td>Connecticut</td>
					<td>Men's</td>
				</tr>
				<tr>
					<td>Flywheel (University of Michigan</td>
					<td>Michigan</td>
					<td>Women's</td>
				</tr>
			</table>
		</section>
	</main>
</body>
</html>

and here is the CSS I've created:

body{
	margin: 2%;
	padding: 2%;
	font-size: 110%;
}
 
header{
	background: #A0A3A3;
	padding-top: 1%;
	padding-bottom: 1%;
	background-image: url(../images/flywheel.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 130%;
	border: none;
}
 
h1{
	text-align: center;
	font-variant: small-caps;
	color: #FFFFFF;
	font-family: arial, serif, century;
	border-radius: 8px;
}
 
nav{
	font-variant: normal;
	font-size: 120%;
	font-weight: bold;
	color: #F9E6E6;
	text-align: center;
}
 
nav a{
	display: inline-block;
	background-color: #FFFFFF; opacity: 0.5; filter: alpha (opacity=40);
	text-decoration: none;
	width: 15%;
	padding: 13px;
	margin: 25px;
	border-radius: 7%;
}
 
nav a:hover{
	background: #B3B3B3;
	color: #0006CC;
}
 
nav input:focus{
	background: #B3B3B3;
	color: #FFFFFF;
}
 
nav a:active{
	border: 3px solid #000000;
}
 
section{
	overflow: hidden;
	margin-left: 25px;
}
 
section.right
 
h2{
  margin-left: 25px;
}
 
p{
  margin-left:25px;
}
 
aside{
	float: left;
	text-align: center;
	width: 250px;
  height: 100%;
	background-color: #697C44
}
 
aside img{
	margin: 1em 0;
	max-width: 200px;
	border-style: solid;
}
 
main h2{
	display: inline-block;
	margin-top: 25px;
}
 
table{ margin-left: 150px;
  border: 3px 3px 5px 3px solid black;
  width: 70%;
  border-collapse: collapse;
  border-spacing: 0;
  font: normal Arial, "sans-serif"; 
}
 
.right th 
.right tr{
	opacity: 0.6;
}
 
.right tr: hover {
	opacity: 1.0;
}
 
.right td{
  color: #FFFFFF;
  background-color: #697C67;
  margin-left: 25px;
  padding: 8px;
}
 
.right th{
  background-color: #697C44;
  padding: 10px;
}

Trouble is that I cannot do the following - or at least it doesn't seem to be working with what I'm hoping is the right code:

1) I cannot place a border around the table header (including a thicker border along the th bottom.
2) I cannot text-align column one (inc th text) to the left.
3) same as 2 but I cannot align column 2 and 3 (inc th text)to the centre
4) I cannot seem to effect border radius on the top two corners of the table.

Can anybody offer pointers / suggestions as to what I've done wrong and ways I may remedy?

Many thanks in advance,

Chris

Tags:

Sun, 2016-12-11 12:44

Fookes74

Offline

newbie

Derbyshire, UK

Last seen: 5 years 6 weeks ago

Derbyshire, UK

Joined: 2016-11-18

Posts: 4

Points: 6

Anyone?

Mon, 2016-12-12 01:46

gary.turner

Offline

Moderator

Dallas

Last seen: 46 weeks 5 days ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

More homework? :)

{Border-collapse:collapse;} can mess up some borders. Use border-spacing if there's a problem.

Your instructor writes some ugly code.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    html {
        padding: 0;}
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;}
 
    p {
        font-size: 1em;}
 
    /* end boilerplate */
 
    table {
	border: 3px solid black;
	border-bottom: 5px solid black;
	border-radius: 7px 7px 0 0;
	border-spacing: 0;
	margin: 1em auto;}
 
    tr:first-child th {
	border-bottom: 5px solid black;}
 
    tr td,
    tr th {
	padding: 0.5em 1em;
	text-align: center;}
 
    tr td:first-child,
    tr:first-child th:first-child {
	text-align: left;}
 
    /*]]>*/ 
    </style>
  </head>
  <body>
    <section class = "right">
      <!-- Really dumb class name. What if you want it on the left? -->
      <h2>College Teams</h2>
 
      <p>This is not meant to be a comprehensive list of all the teams, just a
	sampling from around the United States.  I focused on the ones that I
	though[sic] had cools names.</p>
 
      <table>
	<!-- Where is thead? -->
	<tr>
	  <th>Team Name</th>
	  <th>Location</th>
	  <th>League Type</th>
	</tr>
 
	<tr>
	  <td>Afterburn - Air Force</td>
	  <td>Colorado</td>
	  <td>Men's</td>
	</tr>
 
	<tr>
	  <td>Cold Front (Bates College)</td>
	  <td>Maine</td>
	  <td>Women's</td>
	</tr>
 
	<tr>
	  <td>Disco Inferno (Brown University)</td>
	  <td>Rhode Island</td>
	  <td>Women's</td>
	</tr>
 
	<tr>
	  <td>Bad Habit (Catholic University)</td>
	  <td>Washington DC</td>
	  <td>Men's</td>
	</tr>
 
	<tr>
	  <td>Jive Turkeys (Dickinson College)</td>
	  <td>Pennsylvania</td>
	  <td>Both</td>
	</tr>
 
	<tr>
	  <td>Knights of the Round Disc(Longwood College)</td>
	  <td>Virginia</td>
	  <td>Men's</td>
	</tr>
 
	<tr>
	  <td>Ninjas (University of Minnesota)</td>
	  <td>Minnesota</td>
	  <td>Women's</td>
	</tr>
 
	<tr>
	  <td>Flying Squirrels (Hendrix College)</td>
	  <td>Arizona</td>
	  <td>Men's</td>
	</tr>
 
	<tr>
	  <td>Superfly (Yale)</td>
	  <td>Connecticut</td>
	  <td>Men's</td>
	</tr>
 
	<tr>
	  <td>Flywheel (University of Michigan</td>
	  <td>Michigan</td>
	  <td>Women's</td>
	</tr>
      </table>
    </section>
  </body>
</html>

gary

Now it's time for football.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

border / border radius and text alignment queries. Can you help?

Anyone?

More homework? :)

User login

Navigation