<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cougar Inn Directions</title>
<link rel="stylesheet" type="text/css" href="case.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="case.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div id="header">
<h1>This is the Cougar Hotel</h1>
</div>
<div id="navcon">
<div id="nav">
<ul>
<li style="border-Left: 1px solid #e9e9e9">Home</li>
<li>About Cougar Inn
<ul>
<li>Accommodations</li>
<li>Services/Amenities</li>
<li>Meeting/Events</li>
</ul>
</li>
<li>Reservations</li>
<li>Directions</li>
<li>Contact Us
<ul>
<li>Phone</li>
<li>Email</li>
<li>Feedback</li>
</ul>
</li>
</ul>
</div>
<!-- end navcon -->
</div>
<!-- end nav -->
<div id="pagewrapper">
<div class="pagecon">
<h2>This is class pagecon</h2>
<p>
<div id="slideshow">
<div>
<img src="hotel 1 s.jpg" alt="HomePic1">
</div>
<div>
<img src="hotel 4 s.jpg">
</div>
<div>
<img src="hotel 6 s.jpg">
</div>
</div>
<div class="bodycon">
<h1>Directions to</h1>
<iframe width="425" height="350"
src="https://maps.google.com/maps;output=embed"></iframe>
</div>
<!--end bodycon -->
<table border='1' class="tablecon">
<tbody>
<tr>
<td>
<p>
*From Hwy 37 get off at the Stadium exit and head<br>
east down Broadway to N College Ave. Turn right on College<br>
onto Bangle Street. We are right next to Columbia College.
</p>
</td>
<tr>
<td>
<p>
*From I-141 get off at the Hues St exit. Head south<br>
on Hues till you get to Bangle St. Turn right on Bangle<br>
and you will see the Bangle Inn next to the College.<p>
</td>
</tr>
</tbody>
</table>
</div>
<!--end class pagecont -->
</div>
<!-- end pagewrapper -->
</body>
</html>
Here is the css:
* {
margin: 0px;
padding: 0px;
}
#header {
background-image: url(./headimg.jpg);
height: 60px;
background-repeat: repeat;
}
#navcon {
background-image: url(./wood.jpg);
width: 100%;
border-bottom-style: solid;
border-bottom-width: thick;
border-bottom-color: #083272;
}
#nav {
width: 450px;
height: 30px;
position: relative;
color: #080808;
font-family: arial, sans-serif;
margin: 0px auto;
font-size: .9em;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
border-right: 1px solid #e9e9e9;
padding: 5px;
display: block;
text-align: center;
color: #080808;
text-decoration: none;
}
#nav ul li a:hover {
background: #144678;
color: #fff;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position: absolute;
z-index: 1;
}
#nav ul li:hover ul li a {
display: block;
background: #144678;
color: #fff;
width: 120px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background: #4879A5;
color: #fff;
}
body {
background: #B5C4D9;
}
#pagecont {
width: 980px;
margin: 0 auto;
position: relative;
}
.pagecon {
background-image: url(./mainbackimg.jpg);
margin: 15px;
padding: 15px;
border-style: solid;
position: relative;
min-height: 100%;
float: left;
}
.bodycon {
background: #5F86C0;
margin: 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
float: left;
}
.tablecon {
margin: 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
float: left;
}
#slideshow {
margin: 10px auto;
position: relative;
width: 350px;
height: 247px;
padding: 10px;
float: left;
border-style: solid;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
Im trying to get the boxes to line up so that he pictures are on the left. The "directions to" box should be next to the pictures box and even with it on top. The table should be directly below the pictures box (not do far down). I have been playing with this for a while and could really use some help.
Well, I changed your code around a bit. I created a wrapper around your #slideshow div and inserted the table with slideshow into that wrapper to make them a column like so:
<div class="left-wrapper">
<div id="slideshow">
<div>
<img src="hotel 1 s.jpg" alt="HomePic1">
</div>
<div>
<img src="hotel 4 s.jpg">
</div>
<div>
<img src="hotel 6 s.jpg">
</div>
</div>
<table border='1' class="tablecon">
<tbody>
<tr>
<td>
<p>
*From Hwy 37 get off at the Stadium exit and head<br>
east down Broadway to N College Ave. Turn right on College<br>
onto Bangle Street. We are right next to Columbia College.
</p>
</td>
<tr>
<td>
<p>
*From I-141 get off at the Hues St exit. Head south<br>
on Hues till you get to Bangle St. Turn right on Bangle<br>
and you will see the Bangle Inn next to the College.<p>
</td>
</tr>
</tbody>
</table>
</div>
Class of that wrapper is :
.left-wrapper {
display: inline-block;
}
The new css for #slideshow is:
#slideshow {
margin: 10px auto;
position: relative;
width: 350px;
height: 247px;
padding: 10px;
border-style: solid;
}
The new css for .bodycon is :
.bodycon {
background: #5F86C0;
margin: 10px 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
display: inline-block;
vertical-align: top;
}
And findally updated fiddle
Your div.bodycon appears lower than your div#slideshow because their top-margin settings differ. Set both to an equal number.
http://jsbin.com/yovit/1/
.bodycon {
margin: 10px;
/* Etc. */
}
#slideshow {
margin: 10px;
/* Etc. */
}
Related
I'm building a website for my DofE expedition but am having some trouble making things work properly. The text that is currently floating on the right of the main container should be sat next to the navigation section but ma attempts to make it do so have been thus far unsuccessful. Any ideas on this?
If it helps, i'd like it to look something like this : W3schools CSS Help Code
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: right;
background-color:#f2f2f2;
clear: left;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
width: 25%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
fl
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "clearfix">
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
</div>
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
You'll need to play with the padding and such, but this will get the nav and main content side by side. Basically you had your clearfix container wrapping around just the nav, which was full width. Also I applied float: left; to both nav and main.
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: left;
background-color:#f2f2f2;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
width: 25%;
float: left;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content" class="clearfix">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
Set your css like this
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
position: absolute;
width: 100%;
}
I am making a website and I want, on different displays, for it to look almost the same, if I zoom the margin to be smaller - I think you know what I am trying to say. I am looking at another site to see how it works. You can check it here: http://motika.com.mk/. Try to zoom there. I don't know what the problem is.
This is my code:
<head>
<link rel="stylesheet" href="dodatoci/stilovi/stilovi.css">
<meta charset="utf-8"/>
<title>Услуги | Што се нуди?</title>
</head>
<body>
<div id = "glavendrzac">
<!--<table id = "goretabela">
<tr>
<td style="width:220px;"><img src="dodatoci/sliki/logo.png" id = "logoslika" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></td>
<div class="dropdown">
<td style="width:220px;"><button class = "dropbtn"></button></td>
</div>
</div>
</tr>
</table>-->
<div id = "meni">
<nav>
<ul id = "meninav">
<li><img src="dodatoci/sliki/logo.png" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></li>
<li><div class="dropdown" style="float:left;">
<button class="dropbtn"></button>
<div class="dropdown-content" style="left:0;">
<table id = "tabelamenispusti">
<tr>
<td>
Берово
Битола
Богданци
Валандово
Велес
Виница
Гевгелија
Гостивар
Дебар
</td>
<td>
Делчево
Демир Капија
Демир Хисар
Кавадарци
Кичево
Кочани
Кратово
Крива Паланка
Куманово
</td>
<td>
Крушево
М. Брод
M. Каменица
Неготино
Охрид
Пехчево
Прилеп
Пробиштип
Радовиш
</td>
<td>
Ресен
Свети Николе
<strong>Скопје</strong>
Струга
Струмица
Тетово
Штип
</td>
</tr>
</table>
</div>
</div></li>
</ul>
</nav>
</div>
<div id = "uslugibn">
<img style="width:100%; height: 300px;" src="dodatoci/sliki/banner.png"/>
</div>
<div id = "reklama">
<img src="dodatoci/reklami/setec1.jpg" style = "width:100%;"/>
</div>
</div>
</body>
And this is CSS code:
body{
background-color: #e4e4e4;
margin: 0;
}
#glavendrzac{
margin-left: 10%;
margin-right: 10%;
margin-top: 1em;
background-size: contain;
}
.logoslika:hover{
cursor:text;
}
#goretabela{
border-collapse: collapse;
background-color: #41c2ac;
width: 100%;
}
#goretabela td{
border-collapse: collapse;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
#goretabela td tr{
border-collapse: collapse;
}
.dropbtn {
background-image: url("../sliki/meni.jpg");
width: 220px;
height: 60px;
border: none;
cursor: pointer;
display: inline;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 0;
margin: 0;
}
.dropdown-content a {
color: black;
padding: 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #51d2bc}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-image: url("../sliki/menihover.jpg");
}
#uslugibn{
background-image: url("../sliki/banner.png");
width: 100%;
height: 300px;
}
#meninav{
background-color: #41c2ac;
height: 60px;
margin: 0;
}
#meninav li{
display: inline-block;
}
#tabelamenispusti{
border: 2px solid #41c2ac;
padding: 0;
margin: 0;
}
#tabelamenispusti a{
width: 150px;
}
#tabelamenispusti td{
padding: 0;
margin: 0;
}
Can you add this code
#main {
max-width: 1278px;
width: 90%;
}
My CSS style sheet header is not working. It works best in internal stylesheet or embedded stylesheet, but did not work when its code in external stylesheet. Only the header class did not wok but other code working best.
.header1{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
#pic{
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float:left;
background-color: #333;
border-top-left-radius: 35%;
border-top-right-radius: 35%;
margin-left:2px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: green;
}
.navbar{
padding: 20px;
margin-top: 150px;
}
/* End nav bar */
.skin{
background-color: lightblue;
}
.table {
margin-top: 0px;
width: 100%;
}
.table .sidebar{
border-right: 2px solid black;
width: 20%;
}
.footer{
background-color: blue;
padding: 20px;
padding: 100px;
}
.left{
float: left;
display: block;
width: 40%;
color: gray;
border-right: 2px solid white;
border-color: gray;
padding-right: 70px;
}
.right{
float: right;
display: block;
width: 40%;
color: gray;
}
pre a{
font-family: helvatic, sanshrif;
font-size: 15px;
color: white;
}
pre a:hover{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
<meta charset="UTF-8"/>
</head>
<body>
<header class="header">
<div id="pic"> <img src="pics/saqib.png"/></div>
<div class="navbar">
<ul>
<li>Home</li>
<li>Software</li>
<li>Contact Us</li>
<li>About us</li>
</ul>
</div>
</header>
<div class="skin">
<table class="table">
<tr>
<td class="sidebar">
This is sidebar
</td>
<td style="padding: 50px;">
<h1>My First Website</h1>
<p> A collection of all steps to complete a process in known as Transaction. DBMS should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p>
</td>
</tr>
<tr>
<th colspan="2">
<footer class="footer">
<div class="left">
<pre>Home | Software | Contact Us | About us</pre>
</div>
<div class="right">
The most important function of DBMS
is data processing. It includes creation,
storage and arrangements of data in database.
</div>
</footer>
</th>
</tr>
</table>
</div>
<body>
</html>
Your stylesheet defines a .header1 class but your HTML is looking for header. Make those the same.
You can change in either one place to make it work:
In HTML:
<header class="header">
to:
<header class="header1">
or in CSS:
.header1 {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
to:
.header {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
It should be:
.header{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
I have several different sections in which I'm trying to center a set of tabs. One set of tabs I've tried to put in an unordered list and the other set I've tried with several <p> tags within a <div> but nothing seems to be working. I know others have had this problem but I haven't been able to find it so I apologize if this is a repetitive question.
I've tried <position: absolute>, <display: inline>, and others. I just can't seem to get it. Thanks in advance!
Also, they're not supposed to functioning tabs at the moment because I don't want to have to worry about jQuery right now, just supposed to look like them!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>STARSHIP CHRONICLES</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>STARSHIP CHRONICLES</h1>
<p id="topmenu">SEARCH - FAQ - FEEDBACK - ABOUT</p>
</div>
<div id="ships">
<!--ships go here-->
</div>
<!--This section is the area for the tabs that attach to the boxinfo-->
<div id="tabs">
<ul id="tabs">
<li id="tabs">OVERVIEW</li> <!--link to div id="geninfo"-->
<li id="tabs">STATS</li> <!--link to div id="statsinfo"-->
<li id="tabs">IMAGES</li> <!--link to div id="imagesinfo"-->
<li id="tabs">CONTEXT</li> <!--link to div id="contextinfo"-->
</ul>
</div>
<!--need to figure out how to place different information in same box when click on separate tabs-->
<div id="geninfo">
<table>
<tr>
<td><p class="info">SHIP NAME:</td>
<td><span class="text">Recursant-Class Star Destroyer</span> </p></td>
</tr>
<tr>
<td><p class="info">ALLIANCE:</td>
<td><span class="text"> Commerce Guild</span> </p></td>
</tr>
<tr>
<td><p class="info">ORIGIN:</td>
<td><span class="text"> Star Wars</span> </p></td>
</tr>
<tr>
<td><p class="info">SIZE:</td>
<td><span class="text"> 1,187 meters </spam></p></td>
</tr>
</table>
</div>
<div id="bottommenu">
<!--This is the scale-->
<p id="length">0m-479m</p><p id="length">480m-1299m</p><p id="length">1300m-1999m</p><p id="length">2000m-4999m</p><p id="length">5000m+</p>
</div>
</div>
</body>
</html>
CSS
body {
background: url(../images/spacebg.jpg) no-repeat fixed ;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 50%;
height: 100px;
border: solid 1px #0071BC;
background-color: transparent;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#info {
margin-left: auto;
margin-right: auto;
position: relative;
}
#geninfo {
margin-top: 100px;
width: 35%;
height: 200px;
background-color: #000000;
border: solid 1px #0071BC;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
/*tab shape*/
#tabs {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
width: 100px;
text-decoration: none;
}
#tabs ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#tabs li {
margin: 0 0.5em 0 0;
}
h1 {
color: white;
font-family: OratorSlant;
font-size: 50px;
margin-left: auto;
margin-right: auto;
}
#topmenu {
color: #ffffff;
font-family: DinBlack;
font-size: 15px;
}
table {
padding: 0px;
margin: 0px;
line-height: 1px;
}
/*h2*/
.info {
color: #0071BC;
font-size: 25px;
font-family: Captain;
}
/*infotext*/
.text {
color: #0071Bc;
font-size: 18px;
font-family: DinReg;
}
#bottommenu {
position: absolute;
bottom: 5px;
display: inline-block;
}
#length {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
display: inline-block;
margin: 5px;
width: 200px;
height: 20px;
}
To horizontally center p's within a div, you can make the parent div text-align: center;, and the inner p's display: inline-block;
Inside of #bottommenu, remove absolute positioning (there are better ways to place a footer), and add text-align: center
Many possible duplicates, such as this one
I am working on an assignment and I need to place some images in a table, which normally isn't a problem for me. Today when I added the images to the table it just displays a square border with the alt text written in it. I am pretty sure that I am pointing to the right directory.
My folder structure is:
Website
css
fonts
html (Page with table in here)
js
images (Images for table in here)
#font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
margin: 0;
border: 0;
padding: 0;
font-size: 12px;
font-family: arial, sans-serif;
}
body {
width: 100%;
height: 300%;
background-color: #D8D8D8;
}
nav {
font-family: customFont;
font-size: 30px;
width: 100%;
height: 40px;
position: fixed;
z-index: 50;
}
.nav-background {
width: 100%;
height: 100%;
background: #12A7CB;
opacity: 0;
position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
width: 100%;
height: 320px;
}
#slideshow {
position:relative;
height:320px;
width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
width: 100%;
height: 320px;
box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
float: left;
padding-left: 100px;
padding-right: 200px;
}
#nav {
background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
width:100%;
height:50px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title {
display:none;
color:#EDEDED;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.navigation li{
list-style-image: url('navIcon.png');
float: left;
padding-right:45px;
margin-bottom: 25px;
color: black;
}
li {
}
.navigation a {
font-size: 19px;
font-family: customFont;
text-decoration:none;
color: #01ebfe;
}
.navigation a:hover {
}
.wrapper {
width: 900px;
height: 1000%;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: white;
padding-top: 100px;
box-shadow: 10px 10px 5px #888888;
}
p{
font-size: 14px;
padding-bottom: 32px;
}
p:first-letter {
font-size: 32px;
color: #71CAE0;
}
h1 {
font-family: customFont;
font-size: 32px;
font-weight: bolder;
color: #12A7CB;
text-align: center;
}
h2 {
font-family: customFont;
font-size: 22px;
font-weight: bold;
color: #12A7CB;
text-align: left;
text-decoration: underline;
}
section {
width: 100%;
height: 100%;
background-color: #D8D8D8;
}
img.logo {
text-align: center;
margin: auto;
display: block;
}
img.slideshow {
width: 100%;
height: 480px;
}
footer {
width: 900px;
margin: 25px auto 0 auto;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background-color: white;
text-align: center;
box-shadow: 10px 10px 5px #888888;
}
.members {
padding: 10px;
display: inline-block;
background-color: #e4f4f8;
margin-top: 15px;
margin-left: 15px;
border: 1px solid #12A7CB;
float: right;
}
ol.test {
list-style-type: lower-alpha;
}
.members ol {
list-style-type: lower-alpha;
}
.members li {
display: list-item;
color: #6c6c6c;
list-style-type: lower-alpha;
padding: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
/* TABLE STUFF */
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 5px;
color: #12A7CB;
background-color: #e4f4f8;
}
td {
background-color: #f2eded;
width: 150px;
height: 150px;
}
/* END TABLE STUFF */
.video-wrapper {
width: 100%;
text-align: center;
}
.video-wrapper a {
color: blue;
text-decoration: none;
font-size: 12px;
font-family: arial, sans-serif;
}
.social img {
padding-top: 32px;
padding-right: 8px;
width: 48px;
height: 48px;
border: none;
}
<!DOCTYPE html>
<html>
<!--
Author: #####
Date: 11/08/2014
-->
<head>
<meta charset="utf-8" />
<title>Home - Three Doors Down</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<script type="text/javascript" src="../js/header.js"></script>
</head>
<body>
<nav class="nav">
<div class="nav-background">
</div>
<div class="nav-content">
<img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</nav>
<header class="header">
<div id="slideshow">
<img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
<img src="../images/header2.jpg" alt="Three Doors Down" />
<img src="../images/header3.jpg" alt="Three Doors Down" />
</div>
</header>
<section>
<div class="wrapper">
<h1>Discography</h1>
<div class="disco" >
<table >
<tr>
<th>
Album
</th>
<th>
Year
</th>
<th>
Record Label
</th>
<th>
CD Cover
</th>
</tr>
<tr>
<td >
The Better Life
</td>
<td>
2000
</td>
<td>
Universal Republic
</td>
<td>
<img href="../images/theBetterLifeCover.jpg" alt="The Better Life" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Away from the Sun
</td>
<td>
2002
</td>
<td>
Universal Republic
</td>
<td>
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Seventeen Days
</td>
<td>
2005
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
<tr>
<td >
3 Doors Down
</td>
<td>
2008
</td>
<td>
Universal Republic
</td>
<td>
<image />
</td>
</tr>
<tr>
<td >
Time of My Life
</td>
<td>
2011
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
</table>
</div>
</div>
</section>
<footer>
<div class="nav-content">
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</footer>
</body>
</html>
Changed href="../images/imageName.png" to src="../images/imageName.png"
change the code below code...
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
New code
<image src="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
href attr is for links i.e for a tag. For image use src attr
I checked your code. The image path is you mentioned in your HTML code is point to this link only. So check the path and make sure the images are there
It's < img src="" >, not < img href="" >.