I am beginner to web development. In fact, this is my second html page so its not very neat and tidy.
I have added three navigation links in the navigation header but all of them are lying outside the line and no matter what I can't fix them.
Can anyone help please? You can ignore the other code and check only navigation one.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The cutest creatures</title>
<style>
body {
margin-left: 80px;
background-image: url("img/wallpaper2.jpg");
background-size: cover;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
#unique {
overflow: auto;
}
#image {
float: left;
margin-right: 20px;
}
#tab {
background-image: url("img/wallpaper31.jpg");
height: 120px;
padding-top: 50px;
background-color: black;
margin-top: 25px;
}
#content {
background-color: rgba(255, 231, 0, 0.5);
padding: 1px 25px;
margin: 1px 1px 25px 1px;
}
ul {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
ol {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
div {
padding: 20px;
margin-bottom: 30px;
}
.a {
border: 2px teal dashed;
float: left;
margin-left: 6px;
}
.b {
border: 2px teal dashed;
float: right;
margin-right: 80px;
}
table {
margin: 80px;
padding: 15px;
border: 3px solid black;
width: 100%;
border-collapse: collapse;
margin-left: 1px;
}
caption {
font-size: 20px;
text-align: left;
padding: 10px;
margin: 10px;
}
th, td {
height: 8px;
padding: 8px;
border: 3px solid black;
}
th {
background-color: #ececec;
}
nav {
overflow: hidden;
margin: 0px;
padding: 0px;
}
li a {
display: block;
color: #ffff00;
text-decoration: none;
float: right;
padding: 0px 20px;
margin: 0px;
position: relative;
}
#header {
padding: 0px 0px;
border-bottom: 1px solid black;
margin: auto;
height: 100px;
line-height: 103px;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/logo.jpg" width="100" height="100">
<nav>
<ul style="list-style-type:none;">
<li>Famous quotes</li>
<li>Some Famous Minions</li>
<li>Notable Minions</li>
</ul>
</nav>
</div>
<div id="tab">
<div id="content">
<center>
<h1>Minions</h1>
<h2><b><i>Bello!!!</i></b></h2>
</center>
</div>
</div>
<div id="unique">
<img src="img/mmm.jpg" id="image">
<p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
<br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
<br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
<br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.Click here to know more about minions.</p>
</div>
<div class="a">
<h3>Famous quotes</h3>
<ul>
<li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
<li>"POOPAYE" - Goodbye</li>
<li>"TULALILOO TI AMO!" - We love you!</li>
</ul>
</div>
<div class="b">
<h3>Some Famous Minions</h3>
<ol>
<li>Bob</li>
<li>Kevin</li>
<li>Stuart</li>
</ol>
</div>
<table>
<caption><b>Notable Minions</b></caption>
<tbody>
<tr>
<th>NAME</th>
<th>APPEARANCE</th>
</tr>
<tr>
<td>Carl</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Dave</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Bob</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Stuart</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Kevin</td>
<td>Orientation Day</td>
</tr>
</tbody>
</table>
</body>
</html>
I believe this is better :
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The cutest creatures</title>
<style>
body {
margin-left: 80px;
background-image: url("img/wallpaper2.jpg");
background-size: cover;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
#unique {
overflow: auto;
}
#image {
float: left;
margin-right: 20px;
}
#tab {
background-image: url("img/wallpaper31.jpg");
height: 130px;
padding-bottom: 50px;
background-color: black;
margin-top: 15px;
}
#content {
background-color: rgba(255, 231, 0, 0.5);
padding: 1px 25px;
margin: 1px;
}
ul {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
ol {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
div {
padding: 20px;
margin-bottom: 30px;
}
.a {
border: 2px teal dashed;
float: left;
margin-left: 6px;
}
.b {
border: 2px teal dashed;
float: right;
margin-right: 80px;
}
table {
margin: 80px;
padding: 15px;
border: 3px solid black;
width: 100%;
border-collapse: collapse;
margin-left: 1px;
}
caption {
font-size: 20px;
text-align: left;
padding: 10px;
margin: 10px;
}
th, td {
height: 8px;
padding: 8px;
border: 3px solid black;
}
th {
background-color: #ececec;
}
nav {
overflow: hidden;
margin: 0px;
padding: 0px;
text-align: center;
width:100%;
}
li, li a {
display: inline;
color: #ffff00;
text-decoration: none;
padding: 0px 10px;
}
#header {
padding: 0px 0px;
border-bottom: 1px solid black;
margin: auto;
height: 100px;
line-height: 103px;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/logo.jpg" width="100" height="100">
</div>
<div id="tab">
<div align="center" id="content">
<h1>Minions</h1>
<h2><b><i>Bello!!!</i></b></h2>
</div>
<nav>
<ul style="list-style-type:none;">
<li>Famous quotes</li>
<li>Some Famous Minions</li>
<li>Notable Minions</li>
</ul>
</nav>
</div>
<div id="unique">
<img src="img/mmm.jpg" id="image">
<p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
<br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
<br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
<br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.Click here to know more about minions.</p>
</div>
<div class="a">
<h3>Famous quotes</h3>
<ul>
<li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
<li>"POOPAYE" - Goodbye</li>
<li>"TULALILOO TI AMO!" - We love you!</li>
</ul>
</div>
<div class="b">
<h3>Some Famous Minions</h3>
<ol>
<li>Bob</li>
<li>Kevin</li>
<li>Stuart</li>
</ol>
</div>
<table>
<caption><b>Notable Minions</b></caption>
<tbody>
<tr>
<th>NAME</th>
<th>APPEARANCE</th>
</tr>
<tr>
<td>Carl</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Dave</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Bob</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Stuart</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Kevin</td>
<td>Orientation Day</td>
</tr>
</tbody>
</table>
</body>
</html>
These two setting should help you to get started:
nav {
float: right;
}
nav li {
display: inline-block;
}
The first one allows you to place the whole nav right of the image, the second one causes the li elements to be aligned horizontally instead of vertically (as they would be with their default display: block setting).
(Switch the snippet to full page view to see the proper result)
body {
margin-left: 80px;
background-image: url("img/wallpaper2.jpg");
background-size: cover;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
#unique {
overflow: auto;
}
#image {
float: left;
margin-right: 20px;
}
#tab {
background-image: url("img/wallpaper31.jpg");
height: 120px;
padding-top: 50px;
background-color: black;
margin-top: 25px;
}
#content {
background-color: rgba(255, 231, 0, 0.5);
padding: 1px 25px;
margin: 1px 1px 25px 1px;
}
ul {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
ol {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
div {
padding: 20px;
margin-bottom: 30px;
}
.a {
border: 2px teal dashed;
float: left;
margin-left: 6px;
}
.b {
border: 2px teal dashed;
float: right;
margin-right: 80px;
}
table {
margin: 80px;
padding: 15px;
border: 3px solid black;
width: 100%;
border-collapse: collapse;
margin-left: 1px;
}
caption {
font-size: 20px;
text-align: left;
padding: 10px;
margin: 10px;
}
th,
td {
height: 8px;
padding: 8px;
border: 3px solid black;
}
th {
background-color: #ececec;
}
nav {
overflow: hidden;
margin: 0px;
padding: 0px;
}
li a {
display: block;
color: #ffff00;
text-decoration: none;
float: right;
padding: 0px 20px;
margin: 0px;
position: relative;
}
#header {
padding: 0px 0px;
border-bottom: 1px solid black;
margin: auto;
height: 100px;
line-height: 103px;
margin-top: 1px;
}
nav {
float: right;
}
nav li {
display: inline-block;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The cutest creatures</title>
</head>
<body>
<div id="header">
<img src="img/logo.jpg" width="100" height="100">
<nav>
<ul style="list-style-type:none;">
<li>Famous quotes</li>
<li>Some Famous Minions</li>
<li>Notable Minions</li>
</ul>
</nav>
</div>
<div id="tab">
<div id="content">
<center>
<h1>Minions</h1>
<h2><b><i>Bello!!!</i></b></h2>
</center>
</div>
</div>
<div id="unique">
<img src="img/mmm.jpg" id="image">
<p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
<br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
<br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
<br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.Click here to know more about minions.</p>
</div>
<div class="a">
<h3>Famous quotes</h3>
<ul>
<li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
<li>"POOPAYE" - Goodbye</li>
<li>"TULALILOO TI AMO!" - We love you!</li>
</ul>
</div>
<div class="b">
<h3>Some Famous Minions</h3>
<ol>
<li>Bob</li>
<li>Kevin</li>
<li>Stuart</li>
</ol>
</div>
<table>
<caption><b>Notable Minions</b></caption>
<tbody>
<tr>
<th>NAME</th>
<th>APPEARANCE</th>
</tr>
<tr>
<td>Carl</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Dave</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Bob</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Stuart</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Kevin</td>
<td>Orientation Day</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I have a problem laying out and centering the navbar and the table. I want the navbar to be right under the h2 element and centered. At the moment, the navbar breaks onto the next line. The layout of the table is fine, but it should be centered. I wonder if there is a better technique for making a navbar.
Here is my code:
* {
background-color: #2c2f33;
text-decoration: none;
}
.bet-table {
display: table-cell;
margin: 0;
color: white;
}
.bet-table th,
td {
border: 1px solid;
text-align: center;
padding: 5px 5px 5px;
}
.bet-table table {
margin-left: auto;
margin-right: auto;
}
.logo {
text-align: center;
font-size: 40px;
font-family: arial;
font-weight: lighter;
color: white;
}
.nav-g ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-g li {
list-style: none;
display: inline-block;
}
.nav-g a {
text-decoration: none;
width: 100px;
display: block;
padding: 2px 2px 2px;
font-size: 15px;
font-weight: lighter;
text-align: center;
color: white;
font-family: arial;
float: left;
}
.Choose h3 {
color: white;
background-color: #7289da;
padding: 8px 8px 8px 8px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
margin-top: 5pc;
}
.navbar a:hover {
color: #7289da;
}
<div id="h-container">
<h2 class="logo">Betbowl
<h2>
<div class="nav-g">
<ul>
<li><a href="#">Make-A-Bet</li>
<li><a href="#">Pending</li>
<li><a href="#">Completed</li>
</ul>
</div>
</div>
<div class="Choose">
<h3>Choose</h3>
</div>
<div class="bet-table">
<table style="width:100%; margin-left: auto; margin-right: auto;">
<tr>
<th>Situation</th>
<th>Bet</th>
<th>Winner</th>
<th>Earnings</th>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
</tr>
</table>
</div>
</div>
First you need to close your <a> tags. like this:
I AM A LINK
ul needs to be centered:
text-align:center
for the table you should remove display property from the container, default value works fine:
.bet-table{
/* display: table-cell; REMOVE THIS LINE */
margin: 0;
color: white;
text-align: center;
width: 100%;
}
table{
margin: 0 auto
}
find the edited version here: https://codepen.io/theBehrouz/pen/QWmXZbr
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've been trying for hours to center a table div on a website I'm creating, and I can't figure it out. I've tried using margin: 0 auto with a defined width, and that doesn't work. I've also 'margin-right: auto; margin-left: auto;", but that didn't work either. I'm really not sure what else to try.
Also, I'm trying to fix my footer to stay on the bottom of the page. It'll look great on one page, coming after all the content, but on another page it will be right on top of the content. Should I make another topic for that, or can someone help me out with that in this one?
HTML for the page with the table:
#body {
background-color: #8AD4E6;
font-color: #3E3E3E;
font-family: "Akzidenz Grotesk" sans-serif;
}
#content {
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: center;
vertical-align: middle;
position: relative;
}
#header {
background-color: #6cf;
margin: 10px;
height: 120px;
font-family: "Akzidenz Grotesk" sans-serif;
text-align: center;
color: #4D8B4D;
border: 2px solid black;
}
#headerimg {
border: 2px solid;
float: left;
margin: 10px 5px 5px 5px;
margin-left: 20px;
}
#sidebar{
position: relative;
float: right;
margin: 10px;
padding: 25px;
background-color: #6cf;
border: 2px solid black;
}
.sideheading {
text-align: center;
color: #4D8B4D;
font-family: "Akzidenz Grotesk" sans-serif;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
margin-left: 35%;
position: relative;
text-align: center;
vertical-align: middle;
}
table th {
font-style: bold;
}
.female {
background-color: #FFE6FF;
}
.male {
background-color: #D6EBFF;
}
.uni{
background-color: #D4FFD4;
}
#name{
margin-left: 35%;
text-align: center;
vertical-align: middle;
position: relative;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
width: 20px;
background-color: #6EC66E;
margin-left: 44%;
margin-top: 30px;
text-align: center;
}
#navigation li {
display: inline-block;
}
a:link, a:visited {
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #CC6699;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: #4D8B4D;
}
#footer {
position: relative;
margin: 5px;
padding: 5px;
height: 60px;
background-color: #6cf;
border: 2px solid black;
}
`<!DOCTYPE html>
<html>
<head>
<title>Writer's Toolbox</title>
<link rel="stylesheet" type="text/css" href="writerstoolbox.css" />
</head>
<body>
<div id="headerimg">
<img src="logo.jpg" alt="Writer's Toolbox header image" />
</div>
<div id="header"> <h1> Writer's Toolbox</h1><h3>All of your writing needs in one place </h3></div>
<div id="sidebar">
<h3 class="sideheading">
<!-- <img src="" alt="" /> -->
<br />
What are you looking for?
</h3>
<p>Names<br>Settings<br>Character Traits<br>Mary Sue Test<br>Plot ideas<br>Title ideas<br>Writing Tips<br>Resources</p>
</div>
<div id="content">
<h3 id="name">'A' Names</h3><br>
<table id="tablename">
<tr>
<th>Names</th>
<th>Alternate Spelling</th>
<th>Gender </th>
<th>Origin</th>
<th>Meaning</th>
</tr>
<tr class="male">
<td>Aaron</td>
<td>Arron, Aaren</td>
<td>m</td>
<td>Hebrew</td>
<td>Exalted, strong</td>
</tr>
<tr class="male">
<td>Abbott</td>
<td>Abbot</td>
<td>m</td>
<td>English</td>
<td>Head of a monastery</td>
</table>
</div>
<footer id="footer">
<ul id="navigation">
<li>Homepage</li>
<li> | </li>
<li>Back to Names</li>
</ul>
</footer>`
u have some problems with the globe styling like u style the table and it's element together
Any way here's the solution in js fiddle
http://jsfiddle.net/phonexdoda/ze6dddoh/
i changed the #content style to
#content {
width: 1020px;
text-align: center;
vertical-align: middle;
position: relative;
}
add $tablename style
#tablename{
margin: auto;
}
and last the table styling
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
position: relative;
text-align: center;
vertical-align: middle;
}
and for the #name
#name {
text-align: center;
vertical-align: middle;
position: relative;
}
And the footer need this
#footer {
position: relative;
clear: both;
margin: 5px;
padding: 5px;
height: 60px;
background-color: #6cf;
border: 2px solid black;
}
If you use text-align: center; and vertical-align: middle; in the content class it will try and format the contents of the div to those attributes. These don't apply to the actual div itself.
Create a new div around the content div, like content_container and apply text-align: center; and vertical-align: middle; to the class.
This will center and vertically align your content div.
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="" >.
Any help would be great. I have created a logo in Photoshop CC and for some reason I cannot center it on the page. I might be overlooking something simple, but I'm stuck. I have tried fixed, relative and absolute positioning (I don't want to use absolute), but the logo simply floats a bit to the right of the nav bar. I have been using the header, but I'm thinking I need to create a new id to contain it. I just don't understand why this is happening.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="adv_web.css">
<!--link-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><img src="logo_6.png" width="1200" height="110" alt="logo"></h1>
<!--need logo-->
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Concept</li>
<li>Menu</li>
<li>Contact Us</li>
<li>Find Us</li>
</ul>
</div>
<h2>Join Us For A Great Time</h2>
<!--<p>More than a place to eat, it's a place to meet!</p>-->
<div class="photos">
<table>
<tr>
<td><img src="rib_fl.jpg" width="250" height="190" alt="Grilled Ribeye"></td>
<td><img src="sirloin.jpg" width="250" height="190" alt="Sirloin steak"></td>
<td><img src="Ribeye.jpg" width="250" height="190" alt="Ribeye"></td>
<tr>
<td><img src="t_bone.jpg" width="250" height="190" alt="t_bone steak"></td>
<td><img src="filet.jpg" width="250" height="190" alt="Filet dish"></td>
<td><img src="p_rib.jpg" width="250" height="190" alt="prime rib carved"></td>
</tr>
</table>
</div>
<div id="content">
<table>
<tr>
<td><img src="sub_1.jpg" width="250" height="170" alt="Bottle Red"></td>
<td><img src="sub_2.jpg" width="250" height="170" alt="Bottle Red"></td>
<td><img src="sub_3.jpg" width="250" height="170" alt="Bottle Red"></td>
</tr>
</table>
</div>
<div id="footer">
<p>Copyright © The Beef Warehouse: 2014-thebeefwarehouse#gmail.com</p>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 100%;
/* background-color: #fff;*/
background-image: url("wood_1.jpg");
width: 100%;
margin: 0 auto;
background-color: #000;
}
#header{
width: 1200px;
padding: 20px;
position: relative;
margin: 0 auto;
}
article {
padding: 0 25px;
margin-top: 25px;
}
#wrapper { background-color: transparent;
color: #000066;
width: 900px;
margin: 0 auto;
min-width: 400px;
}
#nav { background-color: #4c0000;
height: 50px;
border-radius: 5px;
}
#nav ul {
height: 30px;
width: 750px;
margin: 0 auto;
}
#nav ul li {
list-style-type: none;
width: 150px;
float: left;
text-align: center;
}
#nav ul li a {
text-decoration: none;
color: #fff;
line-height: 30px;
display: block;
}
#nav li a:hover {
background-color: black;
color: blue;
}
#gallery { padding: 0 25px;
margin-top: 25px;
}
table, tr {
text-align: center;
width: 100%;
margin: 20px auto;
border-collapse: collapse;
border-radius: 10px 5px;
}
photos {
margin: 0 auto;
width: 794px;
padding: 10px;
background-color: #fff;
border-radius: 10px 5px;
}
#content { width: 100%;
background-color: transparent;
color: #000000;
padding: 10px 0;
overflow: auto;
margin: 0 auto;
/*text-align: center;*/
}
h1 {
margin: 0 auto;
/*color: #fff;*/
text-align: center;
padding-top: 25px;
width: 1200px;
position: relative;
}
h2 { margin: 10px;
padding: 15px;
color: blue;
font-size: 20px;
font-weight: bold;
text-align: center;
}
ul { text-decoration: none;
list-style-type: none;
margin: 10px;
padding: 10px;
text-align: center;
}
li {
display: inline;
}
#footer { font-size: 90%;
text-align: center;
position: relative;
bottom: 0;
margin: 0;
color: #fff;
}
I'm so frustrated with this. I just need an answer.
You could do it like this:
JSFiddle - DEMO or Full Screen DEMO
HTML:
<div id="header">
<h1><img src="logo_6.png" width="1200" height="110" alt="logo"></h1>
<!--need logo-->
</div>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home
</li>
<li>Concept
</li>
<li>Menu
</li>
<li>Contact Us
</li>
<li>Find Us
</li>
</ul>
</div>
<h2>Join Us For A Great Time</h2>
<!--<p>More than a place to eat, it's a place to meet!</p>-->
<div class="photos">
<table>
<tr>
<td>
<img src="rib_fl.jpg" width="250" height="190" alt="Grilled Ribeye">
</td>
<td>
<img src="sirloin.jpg" width="250" height="190" alt="Sirloin steak">
</td>
<td>
<img src="Ribeye.jpg" width="250" height="190" alt="Ribeye">
</td>
<tr>
<td>
<img src="t_bone.jpg" width="250" height="190" alt="t_bone steak">
</td>
<td>
<img src="filet.jpg" width="250" height="190" alt="Filet dish">
</td>
<td>
<img src="p_rib.jpg" width="250" height="190" alt="prime rib carved">
</td>
</tr>
</table>
</div>
<div id="content">
<table>
<tr>
<td>
<img src="sub_1.jpg" width="250" height="170" alt="Bottle Red">
</td>
<td>
<img src="sub_2.jpg" width="250" height="170" alt="Bottle Red">
</td>
<td>
<img src="sub_3.jpg" width="250" height="170" alt="Bottle Red">
</td>
</tr>
</table>
</div>
<div id="footer">
<p>Copyright © The Beef Warehouse: 2014-thebeefwarehouse#gmail.com
</p>
</div>
</div>
CSS:
body {
font-family:"Comic Sans MS", cursive, sans-serif;
font-size: 100%;
/* background-color: #fff;*/
background-image: url("wood_1.jpg");
width: 100%;
min-width: 1200px;
margin: 0 auto;
background-color: #000;
}
#header {
width: 1200px;
padding: 20px;
position: relative;
margin: 0 auto;
}
article {
padding: 0 25px;
margin-top: 25px;
}
#wrapper {
background-color: transparent;
color: #000066;
width: 900px;
margin: 0 auto;
min-width: 400px;
}
#nav {
background-color: #4c0000;
height: 50px;
border-radius: 5px;
}
#nav ul {
height: 30px;
margin: 0 auto;
display: table;
}
#nav ul li {
list-style-type: none;
width: 150px;
float: left;
text-align: center;
}
#nav ul li a {
text-decoration: none;
color: #fff;
line-height: 30px;
display: block;
}
#nav li a:hover {
background-color: black;
color: blue;
}
#gallery {
padding: 0 25px;
margin-top: 25px;
}
table, tr {
text-align: center;
width: 100%;
margin: 20px auto;
border-collapse: collapse;
border-radius: 10px 5px;
}
photos {
margin: 0 auto;
width: 794px;
padding: 10px;
background-color: #fff;
border-radius: 10px 5px;
}
#content {
width: 100%;
background-color: transparent;
color: #000000;
padding: 10px 0;
overflow: auto;
margin: 0 auto;
/*text-align: center;*/
}
h1 {
margin: 0 auto;
/*color: #fff;*/
text-align: center;
padding-top: 25px;
width: 1200px;
position: relative;
}
h2 {
margin: 10px;
padding: 15px;
color: blue;
font-size: 20px;
font-weight: bold;
text-align: center;
}
ul {
text-decoration: none;
list-style-type: none;
margin: 10px;
padding: 10px;
text-align: center;
}
li {
display: inline;
}
#footer {
font-size: 90%;
text-align: center;
position: relative;
bottom: 0;
margin: 0;
color: #fff;
}