more on lists and CSS
We re-visited our template today, looking at how we could apply CSS to the blocks on the page in more detail.
A couple of the areas we covered were:
- playing with the padding, margin and border settings for each div
- viewing the page in both firefox and internet explorer and trying to minimise the differences between them
- using the margin-top, float and clear selectors to position various elements
- creating some nifty effects by combining lists and CSS in imaginative ways
Here's how the html template looked like when we'd finished with it:
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div class="breadcrumbs">
<a href="index.html">Home</a> .
</div>
<div class="title">
<h1>Title</h1>
</div>
<div class="pic">
<img src="xxx.gif" alt="a picture" height="200px" width="150px" />
</div>
<div class="wikiquote">
<p>some text from the wikipedia</p>
</div>
<div class="backgroundinfo">
<p>why this item made my list</p>
</div>
<div class="credits">
<p>Flickr Image: <a href="#">pic name</a></p>
<p>Wikipedia Article: <a href="#">wiki article title</a></p>
</div>
<div class="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="thing1.html">Thing 1</a></li>
<li><a href="thing2.html">Thing 2</a></li>
<li><a href="thing3.html">Thing 3</a></li>
<li><a href="thing4.html">Thing 4</a></li>
<li><a href="thing5.html">Thing 5</a></li>
<li><a href="thing6.html">Thing 6</a></li>
<li><a href="thing7.html">Thing 7</a></li>
<li><a href="thing8.html">Thing 8</a></li>
<li><a href="thing9.html">Thing 9</a></li>
<li><a href="thing10.html">Thing 10</a></li>
</ul>
</div>
</body>
</html>
and here's the final CSS:
.backgroundinfo {
background-color: pink;
text-align: center;
margin-left: 20%;
margin-right: 20%;
border: 2px;
border-style: dotted;
border-color: purple;
}
.breadcrumbs {
background-color: red;
padding: 5px;
border: 0px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: left;
width: 10em;
}
.breadcrumbs a:link {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:visited {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:hover {
text-decoration: underline;
color: blue;
}
.credits {
background-color: #eeeeee;
padding: 5px;
border: 1px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: right;
width: 25%;
margin-top: -45px;
font-family: sans-serif;
font-size: x-small;
}
.footer {
clear:both;
}
.footer a:link {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:visited {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:hover {
background-color: skyblue;
color: navy;
text-decoration: none;
padding: 3px;
}
.footer li {
display: inline;
padding-right: 7px;
list-style-type: none;
}
.footer ul {
background-color: navy;
color: white;
padding-left: 0;
margin-left: 0;
font-family: sans-serif;
font-size: xx-small;
}
.title {
background: gray;
clear:both;
text-align:center;
margin-top:1px;
}
.pic {
background: skyblue;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
.pic img {
border: 5px;
border-style: ridge;
}
.wikiquote {
background-color: purple;
text-align: center;
font-style: italic;
margin-left: 20%;
margin-right: 20%;
margin-top: -20px;
border: 5px;
border-style: double;
border-color: orange;
}
body {
margin: 0px;
}
Image: 'consume now3'
www.flickr.com/photos/17949364@N00/202924682
No comments:
Post a Comment