When i re-size my browser and scroll to the right end,
I get the header like the following figure, http://awesomescreenshot.com/02a29uof91
This is my output
Even stackoverflow Header too display like this..
How to fill the header when scrolling right?
CSS
body
{
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
color: #666;
background: #fff;
}
#templatemo_header_wrapper
{
height: 114px;
margin: 0 auto;
background: #19446a url(images/templatemo_header_bg.jpg) repeat-x;
}
#templatemo_header
{
width: 1200px;
margin: 0 auto;
}
#templatemo_menu_wrapper
{
clear: both;
width: 100%;
height: 41px;
margin: 0 auto;
background: url(images/templatemo_menu_bg.jpg) repeat-x;
}
#templatemo_menu
{
width: 1320px;
height: 41px;
margin: 0 auto;
}
#templatemo_menu ul
{
margin: 0 0 0 28px;
padding: 0px;
list-style: none;
}
#templatemo_menu ul li
{
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a
{
float: left;
display: block;
height: 22px;
width: 115px;
padding: 13px 0 0 0;
background: url(images/templatemo_menu.jpg) bottom no-repeat;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #FFF;
font-weight: bold;
outline: none;
}
HTML
<div id="templatemo_header_wrapper" >
<div id="templatemo_header">
<div class="style1">
<table width="1200px">
<tbody>
<tr>
<td style="text-align: left">
<p>
Heading
</p>
</td>
<td align="right">
<table>
<tbody>
<tr>
<td>
<img height="50px" src="images/x.PNG" alt="x">
</td>
<td>
<strong><span style="font-family: Times New Roman; text-transform: uppercase; font-size: 18pt;">
Comapny name</span></strong>
<br>
<span style="font-size: 14px; font-weight: normal;">Pvt.
Ltd.</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Some code would be helpful.
Genrally, if you want things to fill horizontally, you need to specify a 100% width container and then place (or float) elements within it.
And I don't see anything like this on stackoverflow.com, regardless of how wide I make the window.
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 am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
I am creating an html calendar(cal.ics) invite and it works in email clients like Gmail, Firefox, and YahooMail. But when I try it in thunderbird, the paragraph(p) tags are always off to the right, even though I've explicity set attributes like align left, float: none, etc. Am I doing something wrong? The email is below, is there something missing in my css?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Follow-Up! Meeting</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 2.0em;
margin: 0;
padding: 0;
text-align: left;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
color: #111111;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 40px 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
float: none;
text-align: left;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table width="100%" class="body-wrap" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF"><!-- content -->
<div class="content">
<table width="100%" style="width: 100%; text-align: left;" cellpadding="0" cellspacing="0" border="0">
<tr style="width: 100%; text-align: left;" >
<td align="left" style="width: 100%; text-align: left;" >
Hi John Doe,
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
<h4>Topic</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >A Samle Meeting!</p>
<h4>Summmary</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >
A sample meeting to prove the concept work andthen take it form there
</p>
<h4>Location</h4>
<p>
123 Example Street New york, NY
</p>
<h4>Time</h4>
<p>
From: February 7, 2016, 2:28 am GMT-0500 <br />
To: February 9, 2016, 3:50 pm GMT-0500
</p>
<h4>Next Steps</h4>
<p>
You may view more information on the meeting by clicking the link below
</p><!-- button -->
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>View Meeting</td>
</tr>
</table><!-- /button -->
<p>
Please adjust your meeting schedule infomration there.
</p>
<p>
Thanks,
</p>
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container"><!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /footer -->
</body>
</html>
Tested your email in latest Thunderbird and paragraphs seem to be where they should be.
You may be however referring to the 20px padding set on the "container" with white background. Removing the padding will make the text stick to the left side of white space.
Since both Gmail and Yahoo ignore CSS in HEAD you do not see the padding there.
Personally I would advice against removing the padding for esthetic reason.
Preview in Thunderbird 38.5.1 (Windows)
The problem quite stupid actually. Apparently the spaces in the html were causing the problem.So I changed
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
To
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">You have been invited to attend a meeting</p>
With no space and problem fixed
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;
}