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.
Related
I am making a ten-page website and I made the general layout but I can't figure out how to position images and text in the div box. Nothing works. In this particular page I want the image to be on the top right of the Div and the text to be on the left. I feel if I can get the general idea of how this works I will be able to do it for the other pages as well.
Below is my code:
<!DOCTYPE html>
<html>
<style>
h1{
color:white;
font-size: 50px;
font-family: ultra;
}
p{
color:white;
}
h2{
color:white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
body {
background-color:#252525;
background-attachment:fixed;
background-position: 50% 50%;
background-repeat:no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 90%;
height: 1000px;
</style>
<body>
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/>
<div>Content for New Div Tag Goes Here</div>
</div>
</div>
</body>
</html>
You can achieve what you are looking for, with float: right property. Try this code.
h1{
color:white;
font-size: 50px;
font-family: ultra;
}
p{
color:white;
}
h2{
color:white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
background-color:#252525;
background-attachment:fixed;
background-position: 50% 50%;
background-repeat:no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 90%;
height: 1000px;
}
.main img {
float: right;
margin-left: 10px;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<body>
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="http://via.placeholder.com/300" class="expand" width="100" height="100" alt=""/>
<div class="text">Content for New Div Tag Goes Here</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Your code is wrongly finished, look at the below sample from your code, put another </div> tag.
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/>
<div>Content for New Div Tag Goes Here</div>
</div>
</div>
if you place image on the top right and text on the left, then simple use bootstrap for making grids like .col-md-6 .col-sm-12 .col-xs-12 in both image and text
OR
if you wrap the text around the image, then use float: right on the image and it will move to te right and text will wrap the image.
By the way, the code looks so messy, Don't put styles inside HTML page, use an external stylesheet for that.
I have used divs to make two images both sides of a table, however once the divs have ended the text i input with <p> appear above the divs despite being later in the code. I want the text to appear below the table.
here is my code.
<!Doctype html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href="website.css"/>
<title> Stoge Guitars </title>
</head>
<body>
<div id = "container">
<div id = "X">
<img src= "images/workshop.png" id = "guitar">
</div>
<div id = "C">
<img src= "images/workshop.png" id = "guitar2">
</div>
<div id = "V">
<table>
<tr>
<th colspan = "5" id = "STOGEGUITARS"> STOGE GUITARS </th>
</tr>
<tr>
<th>Home</th>
<th>Our Custom Guitars</th>
<th>Forum</th>
<th>Workshop Gallery</th>
<th>Contact Us</th>
</tr>
</table>
</div>
</div>
<p> This should be below the table </p>
</body>
CSS
body
{
Background-image: url("http://images.epiphone.com.s3.amazonaws.com/Products/Les-Paul/Les-Paul- Standard-Plustop-PRO/Gallery/POP_LPSTDPLUSPRO-HB.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
}
#STOGEGUITARS
{
font-size: 20pt;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
table, th, td
{
border: 1px solid black;
}
table
{
width: 60%;
margin-left: 20%;
margin-right: 20%;
position: fixed;
}
#guitar
{
float: left;
}
#guitar2
{
float: right;
}
#guitar
{
width: 19%;
height: 100%;
position: fixed;
}
#guitar2
{
width: 19%;
height: 100%;
position: fixed;
right: 0px;
}
p
{
border: 0px;
text-align: left;
}
Help will be greatly appreciated thanks. Sorry if i've made a silly mistake, i am only 16 and new to HTML and CSS.
check this fiddle
position: relative;
is what you're looking for, position fixed makes other elements ignore the position of the element
I have modified your both HTML and CSS code:
body {
Background-image: url("http://images.epiphone.com.s3.amazonaws.com/Products/Les-Paul/Les-Paul- Standard-Plustop-PRO/Gallery/POP_LPSTDPLUSPRO-HB.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
margin:0;
}
#STOGEGUITARS {
font-size: 20pt;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
table, th, td {
border: 1px solid black;
}
table {
width:100%;
}
#X {
display:inline-block;
position: fixed;
left:0px;
top:0px;
width: 19%;
height: 100%;
}
#V {
margin:0;
display:inline-block;
top:0px;
width: 62%;
height: 100%;
border:1px solid red; /* Remove this line it's just for checking boundaries */
}
#C {
display:inline-block;
position: fixed;
right:0px;
top:0px;
width: 19%;
height: 100%;
}
img {
width:100%;
height:100%;
}
p {
position:relative;
text-align:left;
}
<center>
<div id = "container">
<div id = "X">
<img src= "https://fedoraproject.org/w/uploads/6/66/Artwork_F9Themes_Shoowa_shoowa-horizontal.png" id = "guitar" />
</div>
<div id = "V">
<table>
<tr>
<th colspan = "5" id = "STOGEGUITARS"> STOGE GUITARS </th>
</tr>
<tr>
<th>Home</th>
<th>Our Custom Guitars</th>
<th>Forum</th>
<th>Workshop Gallery</th>
<th>Contact Us</th>
</tr>
</table>
<p> This should be below the table </p>
</div>
<div id = "C">
<img src= "https://fedoraproject.org/w/uploads/6/66/Artwork_F9Themes_Shoowa_shoowa-horizontal.png" id = "guitar2" />
</div>
</div>
</center>
I have several different sections in which I'm trying to center a set of tabs. One set of tabs I've tried to put in an unordered list and the other set I've tried with several <p> tags within a <div> but nothing seems to be working. I know others have had this problem but I haven't been able to find it so I apologize if this is a repetitive question.
I've tried <position: absolute>, <display: inline>, and others. I just can't seem to get it. Thanks in advance!
Also, they're not supposed to functioning tabs at the moment because I don't want to have to worry about jQuery right now, just supposed to look like them!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>STARSHIP CHRONICLES</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>STARSHIP CHRONICLES</h1>
<p id="topmenu">SEARCH - FAQ - FEEDBACK - ABOUT</p>
</div>
<div id="ships">
<!--ships go here-->
</div>
<!--This section is the area for the tabs that attach to the boxinfo-->
<div id="tabs">
<ul id="tabs">
<li id="tabs">OVERVIEW</li> <!--link to div id="geninfo"-->
<li id="tabs">STATS</li> <!--link to div id="statsinfo"-->
<li id="tabs">IMAGES</li> <!--link to div id="imagesinfo"-->
<li id="tabs">CONTEXT</li> <!--link to div id="contextinfo"-->
</ul>
</div>
<!--need to figure out how to place different information in same box when click on separate tabs-->
<div id="geninfo">
<table>
<tr>
<td><p class="info">SHIP NAME:</td>
<td><span class="text">Recursant-Class Star Destroyer</span> </p></td>
</tr>
<tr>
<td><p class="info">ALLIANCE:</td>
<td><span class="text"> Commerce Guild</span> </p></td>
</tr>
<tr>
<td><p class="info">ORIGIN:</td>
<td><span class="text"> Star Wars</span> </p></td>
</tr>
<tr>
<td><p class="info">SIZE:</td>
<td><span class="text"> 1,187 meters </spam></p></td>
</tr>
</table>
</div>
<div id="bottommenu">
<!--This is the scale-->
<p id="length">0m-479m</p><p id="length">480m-1299m</p><p id="length">1300m-1999m</p><p id="length">2000m-4999m</p><p id="length">5000m+</p>
</div>
</div>
</body>
</html>
CSS
body {
background: url(../images/spacebg.jpg) no-repeat fixed ;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 50%;
height: 100px;
border: solid 1px #0071BC;
background-color: transparent;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#info {
margin-left: auto;
margin-right: auto;
position: relative;
}
#geninfo {
margin-top: 100px;
width: 35%;
height: 200px;
background-color: #000000;
border: solid 1px #0071BC;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
/*tab shape*/
#tabs {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
width: 100px;
text-decoration: none;
}
#tabs ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#tabs li {
margin: 0 0.5em 0 0;
}
h1 {
color: white;
font-family: OratorSlant;
font-size: 50px;
margin-left: auto;
margin-right: auto;
}
#topmenu {
color: #ffffff;
font-family: DinBlack;
font-size: 15px;
}
table {
padding: 0px;
margin: 0px;
line-height: 1px;
}
/*h2*/
.info {
color: #0071BC;
font-size: 25px;
font-family: Captain;
}
/*infotext*/
.text {
color: #0071Bc;
font-size: 18px;
font-family: DinReg;
}
#bottommenu {
position: absolute;
bottom: 5px;
display: inline-block;
}
#length {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
display: inline-block;
margin: 5px;
width: 200px;
height: 20px;
}
To horizontally center p's within a div, you can make the parent div text-align: center;, and the inner p's display: inline-block;
Inside of #bottommenu, remove absolute positioning (there are better ways to place a footer), and add text-align: center
Many possible duplicates, such as this one
I am working on an assignment and I need to place some images in a table, which normally isn't a problem for me. Today when I added the images to the table it just displays a square border with the alt text written in it. I am pretty sure that I am pointing to the right directory.
My folder structure is:
Website
css
fonts
html (Page with table in here)
js
images (Images for table in here)
#font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
margin: 0;
border: 0;
padding: 0;
font-size: 12px;
font-family: arial, sans-serif;
}
body {
width: 100%;
height: 300%;
background-color: #D8D8D8;
}
nav {
font-family: customFont;
font-size: 30px;
width: 100%;
height: 40px;
position: fixed;
z-index: 50;
}
.nav-background {
width: 100%;
height: 100%;
background: #12A7CB;
opacity: 0;
position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
width: 100%;
height: 320px;
}
#slideshow {
position:relative;
height:320px;
width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
width: 100%;
height: 320px;
box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
float: left;
padding-left: 100px;
padding-right: 200px;
}
#nav {
background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
width:100%;
height:50px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title {
display:none;
color:#EDEDED;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.navigation li{
list-style-image: url('navIcon.png');
float: left;
padding-right:45px;
margin-bottom: 25px;
color: black;
}
li {
}
.navigation a {
font-size: 19px;
font-family: customFont;
text-decoration:none;
color: #01ebfe;
}
.navigation a:hover {
}
.wrapper {
width: 900px;
height: 1000%;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: white;
padding-top: 100px;
box-shadow: 10px 10px 5px #888888;
}
p{
font-size: 14px;
padding-bottom: 32px;
}
p:first-letter {
font-size: 32px;
color: #71CAE0;
}
h1 {
font-family: customFont;
font-size: 32px;
font-weight: bolder;
color: #12A7CB;
text-align: center;
}
h2 {
font-family: customFont;
font-size: 22px;
font-weight: bold;
color: #12A7CB;
text-align: left;
text-decoration: underline;
}
section {
width: 100%;
height: 100%;
background-color: #D8D8D8;
}
img.logo {
text-align: center;
margin: auto;
display: block;
}
img.slideshow {
width: 100%;
height: 480px;
}
footer {
width: 900px;
margin: 25px auto 0 auto;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background-color: white;
text-align: center;
box-shadow: 10px 10px 5px #888888;
}
.members {
padding: 10px;
display: inline-block;
background-color: #e4f4f8;
margin-top: 15px;
margin-left: 15px;
border: 1px solid #12A7CB;
float: right;
}
ol.test {
list-style-type: lower-alpha;
}
.members ol {
list-style-type: lower-alpha;
}
.members li {
display: list-item;
color: #6c6c6c;
list-style-type: lower-alpha;
padding: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
/* TABLE STUFF */
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 5px;
color: #12A7CB;
background-color: #e4f4f8;
}
td {
background-color: #f2eded;
width: 150px;
height: 150px;
}
/* END TABLE STUFF */
.video-wrapper {
width: 100%;
text-align: center;
}
.video-wrapper a {
color: blue;
text-decoration: none;
font-size: 12px;
font-family: arial, sans-serif;
}
.social img {
padding-top: 32px;
padding-right: 8px;
width: 48px;
height: 48px;
border: none;
}
<!DOCTYPE html>
<html>
<!--
Author: #####
Date: 11/08/2014
-->
<head>
<meta charset="utf-8" />
<title>Home - Three Doors Down</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<script type="text/javascript" src="../js/header.js"></script>
</head>
<body>
<nav class="nav">
<div class="nav-background">
</div>
<div class="nav-content">
<img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</nav>
<header class="header">
<div id="slideshow">
<img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
<img src="../images/header2.jpg" alt="Three Doors Down" />
<img src="../images/header3.jpg" alt="Three Doors Down" />
</div>
</header>
<section>
<div class="wrapper">
<h1>Discography</h1>
<div class="disco" >
<table >
<tr>
<th>
Album
</th>
<th>
Year
</th>
<th>
Record Label
</th>
<th>
CD Cover
</th>
</tr>
<tr>
<td >
The Better Life
</td>
<td>
2000
</td>
<td>
Universal Republic
</td>
<td>
<img href="../images/theBetterLifeCover.jpg" alt="The Better Life" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Away from the Sun
</td>
<td>
2002
</td>
<td>
Universal Republic
</td>
<td>
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Seventeen Days
</td>
<td>
2005
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
<tr>
<td >
3 Doors Down
</td>
<td>
2008
</td>
<td>
Universal Republic
</td>
<td>
<image />
</td>
</tr>
<tr>
<td >
Time of My Life
</td>
<td>
2011
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
</table>
</div>
</div>
</section>
<footer>
<div class="nav-content">
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</footer>
</body>
</html>
Changed href="../images/imageName.png" to src="../images/imageName.png"
change the code below code...
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
New code
<image src="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
href attr is for links i.e for a tag. For image use src attr
I checked your code. The image path is you mentioned in your HTML code is point to this link only. So check the path and make sure the images are there
It's < img src="" >, not < img href="" >.
As the title suggests my website, www.contrabang.com doesn't seem to function in Moxilla. But it functions fine in Google Chrome, and a bit less fine in IE. This is the first time I've made a website before so apologies in advance if I've made any beginner errors. But I cant seem to find a solution.
HTML is as follows:
<div class="icons">
<a class="twitter" href="http://www.twitter.com/kadeemlaurie"></a>
<a class="facebook" href="http://www.facebook.com/pages/Contrabang/127379984089682"></a>
<a class="googleplus" href="http://googleplus.com/pages"></a>
</div>
<div id="wrap">
<div id="featured">
<div class="wrap">
<div class="textwidget">
<div class="cup">
<img src="..\Contrabang\img\red-cup.png" height="200">
</div>
</div>
</div>
</div>
<div id="theFixed"><h1>CONTRABANG</h1></div>
<div class="bg1">
<hgroup class="billboard second">
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
We are an events management agency based in London. We create memorable experiences. Check out our upcoming event.</h2>
</hgroup>
<br>
<br>
<br>
<div class="pad">
<img src="..\Contrabang\img\Contrabang.jpg" width="300" height="400">
</div>
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
Buy Tickets: 07949747971</h2>
</div>
</div>
</section>
& the main CSS
.main{text-align:center;}
#featured {
background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 535px;
overflow: hidden;
position: relative;
z-index: -2;
}
#featured .wrap {
overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;
}
#featured .wrap .widget {
width: 80%;
max-width: 1040px;
margin: 0 auto;
}
.textwidget{
padding: 0;
}
#wrap {
margin: 0 auto;
padding: 0;
}
.cup{
margin-top:210px;
}
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#theFixed{
position:fixed;
background-image:url(http://s10.postimg.org/wyyotlk15/krystalrae_2012_fall_print_leopard_sketch.jpg);
width:100%;
text-align:center;
overflow: hidden;
background-position: center;
}
h1{
font: 800 1.313em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:#E94F78;
padding-left: 0.15em;
text-decoration:none;
display:inline-block;
color:yellow;
}
h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:yellow;
}
.bg1{
background-image:url(http://www.coalmarch.com/sites/all/themes/coalmarch/images/paper-background-coalmarch-website-design.jpg);
width: 100%;
height:900px;
background-color: #e94f78;}
h2{
font-family: georgia;
font-size:3em;
color:black;
}
.billboard {
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.pad{
padding:20px;
}
}
.billboard a {
color: #000000;
}
.billboard {
padding-top:230px;
}
Try removing this extra brace. FF might not be as forgiving as Chrome here:
.pad{
padding:20px;
}
}
Links to your stylesheets are set the wrong way and I can imagine browsers handles this differently. also, you're trynig to load a file from your c:\drive, which is obviously not going to work