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="" >.
Related
I tried to create my first E-mail template, when I open it by Live Server it looks good, but when I send it via mail with putsmail it looks very crappy and broken.
I tried to upload pictures online but it doesn't change anything.
On code snippet it also looks good so I think that code is fine?
I have run out of ideas, is there anyone who can help me?
Mail preview
-
Live Server preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VANS E-Mail Template</title>
<style type="text/css">
body {
margin: 0;
background-color: #cccccc;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 40px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.main {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
color: #4a4a4a;
}
.two-columns {
text-align: center;
font-size: 0;
padding: 40px 0;
}
.two-columns .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 18px;
padding-bottom: 40px;
}
.button {
background-color: #C9192E;
color: #ffffff;
text-decoration: none;
padding: 15px 20px;
border-radius: 2px;
}
.banner {
max-width: 600px;
}
.container {
position: relative;
text-align: center;
color: white;
margin-top: 0px;
}
.container2 {
position: relative;
text-align: center;
margin-top: -60px;
display: block;
}
.background {
height: 70px;
width: 600px;
margin-top: 0px;
background-color: #1C1C1C;
}
.background2 {
height: 70px;
width: 600px;
background-color: #1C1C1C;
background: #1C1C1C;
background-size: 100%;
}
.background-text {
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: white;
}
.background-text2 {
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: white;
white-space: nowrap;
}
.first {
margin-left: 15px;
margin-top: 15px;
z-index: 9;
display: block;
position: absolute;
}
.first-text {
font-size: 32px;
padding: 0;
margin-top: -30px;
margin-left: 45px;
color: #272727;
}
.first2-text {
font-size: 22px;
padding: 0;
margin-top: -30px;
margin-left: 50px;
color: #272727;
}
.second {
margin-left: 315px;
margin-top: 40px;
display: block;
position: absolute;
}
.second-text {
font-size: 32px;
padding: -300px;
margin-left: 380px;
line-height: 0;
color: #272727;
}
.second2-text {
font-size: 22px;
padding: -300px;
margin-left: 380px;
line-height: 0;
color: #272727;
}
.third {
margin-top: 290px;
margin-left: 15px;
}
.third-text {
font-size: 32px;
padding: -300px;
margin-top: -275px;
margin-left: 340px;
line-height: 0;
color: #272727;
}
.third2-text {
font-size: 22px;
padding: -300px;
margin-left: 340px;
line-height: 0;
background: "#D0CFC8";
background-size: "100%";
color: #272727;
}
.see-more {
margin-left: 380px;
margin-top: 80px;
font-size: 26px;
}
.background-rect {
background: #D0CFC8;
height: 150px;
width: 600px;
}
.icons {
position: relative;
display: block;
margin-top: -58px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width="100%">
<!-- LOGO SECTION -->
<!-- BANNER IMAGE !! -->
<tr>
<td>
<img src="https://i.ibb.co/MPsmk9q/banner.png" alt="Banner" class="banner">
</td>
</tr>
<!-- BACKGROUND COLOR TEXT !!-->
<tr>
<td class="container">
<div class="background"></div>
SHOP CLASSICS
</td>
</td>
</tr>
<!-- TWO COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td class="two-columns" style="background-color: #D8D7D3; padding-bottom: 0;">
<table class="column">
<tr>
<td>
<img src="https://i.ibb.co/YfSffKs/women.webp" alt="Women" title="Women" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px;">
BUY WOMENS
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="column">
<a href="#"><img src="https://i.ibb.co/bvHdthf/men.webp" alt="Men" title="Men" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px; -webkit-transform: scaleX(-1);
transform: scaleX(-1);"></a>
</a>
BUY MEN
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container">
<div class="background"></div>
OUR LATEST COLLECTION
</td>
</tr>
<!-- FOOTER SECTION -->
<tr style="background: #D0CFC8; background-size: 100%;">
<td>
<div class="first">
<img src="https://i.ibb.co/YQ09v1N/Eco.webp" alt="Eco" style="max-width: 350px">
<div class="first-text">
<p>PAISLEY PATTERN</p>
</div>
<div class="first2-text">
<p>Embrace bohemian style.</p>
</div>
</div>
<div class="second-text">
<p>ECO</p>
<p>POSITIVITY</p>
<p>COLLECTION</p>
</div>
<div class="second2-text">
<p>Make a difference,</p>
<p>be the change.</p>
</div>
<div class="second">
<img src="https://i.ibb.co/4tVLfzn/paisley.webp" alt="Paisley" style="max-width: 270px;">
</div>
<div class="third">
<img src="https://i.ibb.co/CVw2t2R/Spring-HUes.webp" alt="SpringHues" style="max-width: 310px;">
</div>
<div class="third-text">
<p>SPRING HUES</p>
</div>
<div class="third2-text">
<p>Colours That Celebrate</p>
<p>Spring.</p>
</div>
<div class="see-more">
SEE MORE
</div>
<div class="background-rect"></div>
</td>
</tr>
<!-- SOCIAL MEDIA ICONS -->
<div>
<td class="container2">
<div class="background2"></div>
<div class="icons">
<img src="https://i.ibb.co/bQgqb1L/icons.png" alt="">
</div>
</td>
</div>
<!-- BROWN BORDER -->
</table>
</center>
</body>
</html>
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>
I am creating a vertical layout of stacked divs. Everything was going well until the #resume div, which keeps on hiding beneath the div containing a table above it. I tried changing float and position, but can't quite get the div underneath the .samples div. I tried to copy the code onto JS Fiddle, but the same problem does not appear. I would really appreciate any help.
Here's the code:
HTML:
<head>
<title>Charles's Bio</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<html>
<body>
<link rel="stylesheet" type="text/css" href="bio.css">
<nav>
<br>
<h1>Learn More About Charles</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td><button>About Me</button></td>
<td><button>Work Samples</button></td>
<td><button>Resume</button></td>
<td><button>Blog</button></td>
<td><button>Contact</button></td>
</tr>
</table>
</div>
</nav>
<a NAME = "bout"></a>
<div class = "space"></div>
<div id="AboutPictures">
<img src="">
<h3>Charles is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Edward's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>
</div>
<div class="samples">
<a NAME = "work"></a>
<div class = "space"></div>
<table>
<th>Pokemon</th>
<tr>
<td>
<p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
</td>
</tr>
<tr>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
</td>
<td>
<p>Hello Charzard</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
</td>
</tr>
</table>
</div>
<div id="resume"> <a NAME ="resume1"></a><div class = "space">Resume Page </div></div>
<div id="blog"><a NAME = "blog1"></a><div class = "space"><br><br><br><br><br><br><br><br>Blog Page</div></div>
<div id="contacts"><a NAME="contact1"></a><div class = "space">contact Page</div></div>
</body>
</html>
CSS:
html, body{
font-family: 'Lato', sans-serif;
width: 100%;
padding-top: 0px;
margin: 0;
}
p{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-family: Arial, Helvetica, sans-serif;
color: white;
}
nav{
position: fixed;
width: 100%;
background-color: black;
text-align: center;
top:0;
left:0;
z-index:9999;
}
.navrow{
background-color: white;
width: 100%;
}
.navrow table td{
padding-left: 150px;
}
button{
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
}
.aboutpage h1{
color:red;
}
.samples {
float: left;
height: 70%;
width: 100%;
}
#resume {
float: left;
width: 100%;
height: 100%;
background-color: rgb(0,300,200);
}
#blog {
float: left;
width: 100%;
height: 900px;
background-color: rgb(0,300,150);
position: relative;
}
#contacts {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
}
#AboutPictures {
float: right;
background-color: rgb(0,200,255);
}
#AboutPictures h3{
margin-left: 20px;
}
img[src*="tumblr"]{
height:360px;
width:40%;
float: right;
top: 10px;
padding:0 0 0 0;
}
.biopage {
position:relative;
}
.samples table{
position: relative;
width: 100%;
}
.samples td{
text-align: center;
width: 30%;
height:300px;
position:relative;
table-layout: fixed;
background-color: rgb(0,300,300);
}
.samples td img{
width: 290px;
height:290px;
z-index: 0;
}
.samples td:hover img{
opacity: .5;
}
.samples p{
margin: 0;
position:absolute;
left: 0;
top: 50%;
right:0;
color: #fff;
font-size: 20px;
text-align: center;
z-index:10;
}
.samples td:hover p{
visibility: visible;
}
.samples td p{
visibility: hidden;
}
.container{
background color: white;
width: 25%;
float: right;
}
.container img{
width: 100%;
}
.space {
height:125px;
background-color: rgb(0,300,300);
}
and a snapshot of the problem div:
`
Use Z-Index to place higher priority on .samples. The higher the Z-Index given, will put it above other layers. Your current CSS for .samples is at 0.
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;
}
I would like the table inside this image: http://postimg.org/image/tlkfdlao3/
to be aligned like: http://postimg.org/image/motp2rkit/
This is my Html code:
<table>
<tr>
<td width="132px">
<span>iNotes è qui!</span>
<br />
<p id="inotesText">Una nuova app per prendere note in un modo completamente nuovo ed intuitivo!</p>
</td>
<td width="52px">
<img src="images/pencil.png" alt="pencil" />
</td>
</tr>
</table>
and CSS:
#pencil {
padding-left:0px;
width: 52px;
height: 204px;
}
#appStoreAvailable {
padding-top:50px;
width: 149px;
height: 101px;
}
#description1 {
}
#description1 span {
color:#2d2d2d;
font-size:16px;
}
#inotesText {
text-align: left;
font-weight: 400;
font-size: 13px;
color: #616161;
}
Here's a rough idea how you might lay this out with CSS. Realize that this is incomplete and doesn't account for browser variation.
http://jsfiddle.net/93TBf/2
.wrapper {
margin: 30px;
padding: 15px;
display: inline-block;
overflow: hidden;
background-color: #fff;
border-radius: 10px;
box-shadow: 2px 2px 15px #aaa;
font-family: arial;
}
.header {
border-bottom: 1px solid #bbb;
padding: 8px 0;
overflow: hidden;
}
.icon {
float: left;
margin-right: 10px;
}
.item {
float: right;
margin-left: 10px;
}
<div class="wrapper">
<div class="header">
<img class="icon" src="http://placehold.it/50x50" />
<strong>iNotes HD</strong>
<br />Utility
<button>0,89 $</button>
</div>
<div class="body">
<img class="item" src="http://placehold.it/50x150" />
<h2>iNotes e qui!</h2>
Una nuova app per prendere note in un
</div>
</div>
You should use li
for example
<ul class="yourclass">
<li>
Yourcontent
</li>
</ul>
This is the best you can do to layout!