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!
Related
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>
here is part of the CSS code, i cant seem to figure it out.
#About{
height:500px;
background: url("murano.jpg") no-repeat center;
}
I want to decrease the opacity of the imported background image
Add Opacity with your css
#About{
opacity :0.4;
height:500px;
background: url("murano.jpg") no-repeat center;
}
the best solution would be to create another div inside your #about div and position that div absolute while position your #about div to relative and give the background of this newly added div as rgba(0,0,0,0.5) where 0.5 represents the opacity
there is no css rule to provide opacity to background images.
when you put the opacity of #about div to 0.4 of course its child will inherit this property and any text inside about div will get the opacity of 0.4
<div id="about">
<div class="absolute">
</div>
</div>
#about{
position:relative;
background:url(..);
}
.absolute{
position:absolute;
background:rgba(0,0,0,0.5);
}
Use background-color: rgba(255, 255, 0, 0.3);
The 0.3 being the the alpha(opacity channel).
OR
Add an extra div to hold the background, and change the opacity there.
opacity: 0.4; filter:alpha(opacity=40);
Example :
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
}
.head {
width: 150px;
height: 160px;
}
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 12px;
text-align: center;
background: #000;
color: #ddd4d4;
padding-top: 12px;
line-height: 2;
}
td,
th {
font-size: 12px;
text-align: left;
line-height: 2;
}
#wrapper {
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
}
#body {
background: url(images/body_bg_1.gif) repeat-y;
width: 832px;
}
#bodyi {
background: url(images/body_top_1.gif) no-repeat;
width: 832px;
}
#bodyj {
background: url(images/body_bot_1.gif) bottom no-repeat;
padding: 1px 0;
}
#body2 {
background: url(images/body_bg_2.gif) repeat-y;
width: 832px;
}
#bodyi2 {
background: url(images/body_top_2.gif) no-repeat;
width: 832px;
}
#bodyj2 {
background: url(images/body_bot_2.gif) bottom no-repeat;
padding: 1px 0;
}
h1,
h2,
h3,
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav {
font-size: 10px;
position: absolute;
right: 0;
top: 12px;
line-height: 1.2;
padding-left: 120px;
}
#nav li {
float: left;
width: 108px;
list-style: none;
margin-left: 2px;
border-bottom: 1px solid black;
}
#nav a {
background: #738d09;
color: #2e3901;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
padding: 1px 0;
}
#sidebar {
float: left;
width: 250px;
padding-left: 4px;
}
#sidebar .content {
padding-left: 24px;
}
#sidebar .content img {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
#sidebar .divider {
background: url(images/left_splitter.gif) center no-repeat;
height: 5px;
width: 169px;
}
#content {
float: right;
width: 462px;
}
#content1 {
float: left;
width: 800px;
}
#content1 .content {
margin: 7px 35px 7px 20px;
padding-left: 20px;
}
#content .content {
margin: 7px 55px 7px 17px;
}
#content .content table {
width: 310px;
margin-right: 0px;
}
#content .content table td,
#content .content table th {
padding-right: 10px;
}
#content .content table td.download {
text-align: right;
padding-right: 0px;
}
#content .divider {
background: url(images/right_splitter.gif) repeat-x;
height: 5px;
}
h1 {
position: absolute;
left: 0;
top: 0;
}
h2 {
font-size: 10px;
color: #cf9118;
margin: 1em 0;
}
h3 {
font-size: 10px;
margin: 1em 0;
}
h5 {
font-size: 20px;
color: #cf9118;
margin: 1em 0;
text-align: center;
}
h6 {
font-size: 18px;
margin: 1em 0;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
img.left {
float: left;
margin-right: 14px;
}
img.right {
float: right;
margin-left: 14px;
}
.readmore {
text-align: right;
}
.hidden {
visibility: hidden;
}
.clear {
clear: both;
}
a {
color: #f0b33c;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #cf9118;
}
a:hover {
text-decoration: underline;
}
table a {
text-decoration: underline;
font-weight: normal;
color: #7f7c79;
}
#power {
color: #fff;
text-align: center;
}
#power a {
color: #fff;
}
<div id="background"></div>
<div class="head">
</div>
<div id="wrapper">
<ul id="nav">
<li>Inicio
</li>
<li>Sobre a banda
</li>
<li>Membros
</li>
<li>Bilhetes
</li>
<li>Galeria
</li>
<li>Área Pessoal
</li>
</ul>
<h1></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Galeria de imagens</h2>
<p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos, entre outras imagens.</p>
<p class="readmore">Ver
</p>
</div>
<div class="content">
<h2>Noticias</h2>
<h3>18 de Abril, 2011</h3>
<h4>"So Far Away" vai ter videoclip</h4>
<p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip. Já foram divulgadas algumas fotos do set de
filmagens.</p>
<h3>10 de Março, 2011</h3>
<h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
<p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias. As categorias onde os A7X estão a participar são as seguintes:
<p>
- Best International Band (Melhor Banda Internacional)
<p>
- Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
</div>
</div>
<div id="content">
<center>
<img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" />
</center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. Fundados
em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com
cinco discos de originais na sua carreira.</p>
<div class="divider"></div>
<h2>Musicas com maior sucesso</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Faixa</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Bat Country</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Beast and the Harlot</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Seize the Day</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Almost Easy</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Afterlife</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Nightmare</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Welcome to the Family</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div align="right">
<font size="2">text</font>
</div>
</div>
you would want to add the background to the #about:after and then apply the transparency to that. there is no way to add the transparency directly to the background as far as I know.
here is a link to a good article on this.
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
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;
}