I have a HTML page reference a stylesheet on my github.
It is:
<html>
<head>
<title>Basic JavaScript Quiz</title>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css" />
</head>
<body>
<h1 id="title">Please be styled</h1>
</body>
</html>
My expectation is that the Please be styled will be styled as per stylesheet. But it is not.
Any ideas?
Thanks.
Firefox logs an error in the console:
The stylesheet https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css was not loaded because its MIME type, "text/plain", is not "text/css". # http://jsbin.com/oyiceq/1/edit
Don't use the resource from github - it's not a CDN. Save the file and serve it up from your own server.
There is a discussion on this behavior. The relevant bit is the response from github:
"That's a feature, sorta. Please do not abuse the raw URLs like that, they are a very expensive operation for our servers. You should host files like that on pages.github.com instead."
The server is sending the file with the Content-Type of text/plain, which will likely prevent it from being used as CSS.
Remove the attribute id from your h1 tag to work. There is no #title selector in your CSS file there.
Use relalative paths, the link you used leads to a page showing the CSS, but not actually serving the data as CSS.
I checked the css file and you don't have any title id. You have set the style on the h1 element. So in order to see the style, you can choose to modify the HTML like this:
<html>
<head>
<title>Basic JavaScript Quiz</title>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css" />
</head>
<body>
<h1>Please be styled</h1>
</body>
</html>
or modify the css like this:
#resultsTable {
width:100%;
border-collapse:collapse;
}
#resultsTable td, #resultsTable th
{
font-size:1em;
border:1px solid #0066CC;
padding:3px 7px 2px 7px;
}
#resultsTable th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#resultsTable tr.alt td
{
background-color:#e7f4c3;
}
body{
margin: 0px;
padding: 0px;
background: #669966;
cursor: default;
font-size: 12px;
font-family: Arial, Tahoma;
}
.questionContainer {
width: 800px;
border: 3px double #003366;
padding: 3px;
margin: 10px;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style: none;
}
a {
border: 1px solid #000;
padding: 2px 5px;
font-weight: bold;
font-size: 10px;
background: #FFF;
cursor: pointer;
}
a:hover {
background: none;
}
.btnContainer {
width: 96%;
margin: 10px 0px 10px 2%;
}
#progressKeeper {
width: 800px;
height: 25px;
border: 3px double #003366;
margin: 0px 10px;
padding: 3px;
}
#txtStatusBar {
margin: 5px 10px;
font-weight: bold;
}
#progress {
background: green;
width: 0;
height: 25px;
}
.radius {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
}
#resultKeeper {
width: 800px;
margin: 10px;
padding: 3px;
border: 3px double #003366;
background:#66CC66;
}
#resultKeeper div {
line-height: 20px;
}
.totalScore {
font-weight: bold;
padding:10px;
}
input {
position: relative;
top: 2px;
}
#title {
border-bottom: 1px solid #003366;
font-size: 16px;
height: 22px;
margin: 10px;
text-indent: 5px;
}
.prev { float: left; } /** elements after a float will flow around it **/
.next, .btnShowResult { float: right; }
.clear { clear: both; } /** no floats allowed left or right **/
.hide { display: none; }
.resultlist li.altli{background:#CCFFAA;}
.resultlist li {background: #BBEEAA;}
#resultsTable td.fail{color:red;}
Related
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
I've tried searching for a solution, but none of them have helped. Right now I have a vertical navigation bar, on the left, and I have also made a table, but the table is resting underneath the navigation bar. I cannot figure out how to make them go side by side. I think it may have to do with me not having a div of any sort, but when I tried to add a div it didn't fix the problem, unless I did something wrong with where I placed it or with my CSS. Here's what I got at the moment.
body {
margin: 0px;
padding: 0px;
background: lavenderblush;
}
header {
padding: 0px 0px 20px 0px;
margin: 0px;
}
h1 {
margin: 0px;
padding: 5px;
font-family: 'Indie Flower', cursive;
font-size: 55px;
}
ul {
list-style-type: none;
margin: 1px;
padding: 0px;
border: 0px solid honeydew;
width: 120px;
border-radius: 5px;
}
a {
font-family: 'Indie Flower', cursive;
display: block;
width: 80px;
background: honeydew;
text-align: center;
text-decoration: none;
font-size: 25px;
color: cadetblue;
padding: 20px;
margin: 0px;
}
li.active a {
color: black;
background: lavenderblush;
border: 1px solid lavenderblush;
border-radius: 0px;
}
a:hover {
color: black;
}
table {
border-collapse: collapse;
width: 500px;
font-family: 'Indie Flower', cursive;
font-size: 20px;
}
table, td, th {
border: 1px solid black;
}
<!doctype html>
<html>
<head>
<title>Homepage</title>
<link href="main.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Italian Glossary</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li class="active">Food</li>
<li>Animals</li>
<li>Verbs</li>
</ul>
</nav>
<table align="center">
<tr><th>Italian</th><th>English</th></tr>
<tr><td>Acqua</td><td>Water</td></tr>
<tr><td>Aglio</td><td>Garlic</td></tr>
<tr><td>Arancia</td><td>Orange</td></tr>
<tr><td>Banana</td><td>Banana</td></tr>
<tr><td>Bevanda</td><td>Beverage</td></tr>
<tr><td>Bira</td><td>Beer</td></tr>
<tr><td>Biscotto</td><td>Cookie</td></tr>
<tr><td>Bistecca</td><td>Steak</td></tr>
<tr><td>Burro</td><td>Butter</td></tr>
<tr><td>Caffe</td><td>Coffee</td></tr>
<tr><td>Caramella</td><td>Candy</td></tr>
<tr><td>Carne</td><td>Meat</td></tr>
<tr><td>Carota</td><td>Carrot</td></tr>
<tr><td>Cioccolato</td><td>Chocolate</td></tr>
<tr><td>Cipolla</td><td>Onion</td></tr>
<tr><td>Creama</td><td>Cream</td></tr>
<tr><td>Dolce</td><td>Sweet</td></tr>
<tr><td>Fagiolo</td><td>Bean</td></tr>
<tr><td>Fragola</td><td>Strawberry</td></tr>
<tr><td>Frito</td><td>Fried</td></tr>
<tr><td>Frutta</td><td>Fruit</td></tr>
<tr><td>Funghi</td><td>Mushroom</td></tr>
<tr><td>Gelato</td><td>Ice Cream</td></tr>
<tr><td>Ghiaccio</td><td>Ice </td></tr>
<tr><td>Insalata</td><td>Salad</td></tr>
<tr><td>Latte</td><td>Millk</td></tr>
<tr><td>Limonata</td><td>Lemonade</td></tr>
<tr><td>Limone</td><td>Lemon</td></tr>
<tr><td>Maiale</td><td>Pork</td></tr>
<tr><td>Manzo</td><td>Beef</td></tr>
<tr><td>Marmellata</td><td>Jam</td></tr>
<tr><td>Mela</td><td>Apple</td></tr>
<tr><td>Olio</td><td>Oil</td></tr>
<tr><td>Pane</td><td>Bread</td></tr>
<tr><td>Panino</td><td>Sandwich</td></tr>
<tr><td>Pasta</td><td>Pasta</td></tr>
<tr><td>Patata</td><td>Potato</td></tr>
<tr><td>Pepe</td><td>Pepper</td></tr>
<tr><td>Pesce</td><td>Fish</td></tr>
<tr><td>Pollo</td><td>Chicken</td></tr>
<tr><td>Pomodoro</td><td>Tomato</td></tr>
<tr><td>Riso</td><td>Rice</td></tr>
<tr><td>Sale</td><td>Salt</td></tr>
<tr><td>Salciccia</td><td>Sausage</td></tr>
<tr><td>Succo</td><td>Juice</td></tr>
<tr><td>Tacchino</td><td>Turkey</td></tr>
<tr><td>Te</td><td>Tea</td></tr>
<tr><td>Torta</td><td>Cake</td></tr>
<tr><td>Uovo</td><td>Egg</td></tr>
<tr><td>Uva</td><td>Grape</td></tr>
<tr><td>Verdura</td><td>Vegetables</td></tr>
<tr><td>Vino</td><td>Wine</td></tr>
<tr><td>Zucchero</td><td>Sugar</td></tr>
<tr><td>Zuppa</td><td>Soup</td></tr>
</table>
</body>
</html>
You can change display from nav element and wrap the table in a div
body {
margin: 0px;
padding: 0px;
background: lavenderblush;
}
header {
padding: 0px 0px 20px 0px;
margin: 0px;
}
h1 {
margin: 0px;
padding: 5px;
font-family: 'Indie Flower', cursive;
font-size: 55px;
}
ul {
list-style-type: none;
margin: 1px;
padding: 0px;
border: 0px solid honeydew;
width: 120px;
border-radius: 5px;
}
a {
font-family: 'Indie Flower', cursive;
display: block;
width: 80px;
background: honeydew;
text-align: center;
text-decoration: none;
font-size: 25px;
color: cadetblue;
padding: 20px;
margin: 0px;
}
li.active a {
color: black;
background: lavenderblush;
border: 1px solid lavenderblush;
border-radius: 0px;
}
a:hover {
color: black;
}
table {
border-collapse: collapse;
width: 500px;
font-family: 'Indie Flower', cursive;
font-size: 20px;
}
table, td, th {
border: 1px solid black;
}
nav { display: inline-block; vertical-align: top; }
.table-wrapper { display: inline-block; }
**HTML:**
<!doctype html>
<html>
<head>
<title>Homepage</title>
<link href="main.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Italian Glossary</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li class="active">Food</li>
<li>Animals</li>
<li>Verbs</li>
</ul>
</nav>
<div class="table-wrapper">
<table align="center">
<tr><th>Italian</th><th>English</th></tr>
<tr><td>Acqua</td><td>Water</td></tr>
<tr><td>Aglio</td><td>Garlic</td></tr>
<tr><td>Arancia</td><td>Orange</td></tr>
<tr><td>Banana</td><td>Banana</td></tr>
<tr><td>Bevanda</td><td>Beverage</td></tr>
<tr><td>Bira</td><td>Beer</td></tr>
<tr><td>Biscotto</td><td>Cookie</td></tr>
<tr><td>Bistecca</td><td>Steak</td></tr>
<tr><td>Burro</td><td>Butter</td></tr>
<tr><td>Caffe</td><td>Coffee</td></tr>
<tr><td>Caramella</td><td>Candy</td></tr>
<tr><td>Carne</td><td>Meat</td></tr>
<tr><td>Carota</td><td>Carrot</td></tr>
<tr><td>Cioccolato</td><td>Chocolate</td></tr>
<tr><td>Cipolla</td><td>Onion</td></tr>
<tr><td>Creama</td><td>Cream</td></tr>
<tr><td>Dolce</td><td>Sweet</td></tr>
<tr><td>Fagiolo</td><td>Bean</td></tr>
<tr><td>Fragola</td><td>Strawberry</td></tr>
<tr><td>Frito</td><td>Fried</td></tr>
<tr><td>Frutta</td><td>Fruit</td></tr>
<tr><td>Funghi</td><td>Mushroom</td></tr>
<tr><td>Gelato</td><td>Ice Cream</td></tr>
<tr><td>Ghiaccio</td><td>Ice </td></tr>
<tr><td>Insalata</td><td>Salad</td></tr>
<tr><td>Latte</td><td>Millk</td></tr>
<tr><td>Limonata</td><td>Lemonade</td></tr>
<tr><td>Limone</td><td>Lemon</td></tr>
<tr><td>Maiale</td><td>Pork</td></tr>
<tr><td>Manzo</td><td>Beef</td></tr>
<tr><td>Marmellata</td><td>Jam</td></tr>
<tr><td>Mela</td><td>Apple</td></tr>
<tr><td>Olio</td><td>Oil</td></tr>
<tr><td>Pane</td><td>Bread</td></tr>
<tr><td>Panino</td><td>Sandwich</td></tr>
<tr><td>Pasta</td><td>Pasta</td></tr>
<tr><td>Patata</td><td>Potato</td></tr>
<tr><td>Pepe</td><td>Pepper</td></tr>
<tr><td>Pesce</td><td>Fish</td></tr>
<tr><td>Pollo</td><td>Chicken</td></tr>
<tr><td>Pomodoro</td><td>Tomato</td></tr>
<tr><td>Riso</td><td>Rice</td></tr>
<tr><td>Sale</td><td>Salt</td></tr>
<tr><td>Salciccia</td><td>Sausage</td></tr>
<tr><td>Succo</td><td>Juice</td></tr>
<tr><td>Tacchino</td><td>Turkey</td></tr>
<tr><td>Te</td><td>Tea</td></tr>
<tr><td>Torta</td><td>Cake</td></tr>
<tr><td>Uovo</td><td>Egg</td></tr>
<tr><td>Uva</td><td>Grape</td></tr>
<tr><td>Verdura</td><td>Vegetables</td></tr>
<tr><td>Vino</td><td>Wine</td></tr>
<tr><td>Zucchero</td><td>Sugar</td></tr>
<tr><td>Zuppa</td><td>Soup</td></tr>
</table>
</div>
</body>
</html>
To fix this you can float the nav element to the left. That way the table will show up to the right of it, and only below it when the screen is not wide enough to show them side by side.
nav {
float: left;
}
JSFiddle: https://jsfiddle.net/5fxnpwLu/
I am working on a website for a course I am studying and I have ran into an issue with lists. I need to display a list on a particular page with lower-alpha as the bullet type, but nothing is showing.
I have used the find tool in Notepad++ to search for all lines containing list-style-type and checked they weren't set to none.
I also need the list on the navbar to have images as the style type.
HTML page containing list and CSS:
#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: 50px;
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:66px;
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 {
list-style-image: url('navIcon.png');
}
li {
display:inline;
padding:15px;
color: black;
}
.navigation a {
font-size: 19px;
font-family: customFont;
/*text-decoration:none;*/
color: #01ebfe;
}
.navigation a:hover {
opacity:0.36;
}
.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 {
list-style-type: lower-alpha;
}
li {
list-style-type: lower-alpha;
}
ol.test {
list-style-type: lower-alpha;
}
.members ol {
list-style-type: lower-alpha;
}
.members li {
display: block;
color: #6c6c6c;
list-style-type: lower-alpha;
padding: 5px;
margin-bottom: 5px;
}
/** START TABLE STUFF **/
table, tr, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
}
table {
margin-top: 500px;
}
.disco {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
}.disco table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.disco tr:last-child td:last-child {
border-bottom-right-radius:8px;
}
.disco table tr:first-child td:first-child {
border-top-left-radius:8px;
}
.disco table tr:first-child td:last-child {
border-top-right-radius:8px;
}
.disco tr:last-child td:first-child{
border-bottom-left-radius:8px;
}
.disco td{
vertical-align:middle;
background: green;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:center;
padding:18px;
font-size:10px;
font-weight:normal;
color:#000000;
}
.disco tr:last-child td{
border-width:0px 1px 0px 0px;
}
.disco tr td:last-child{
border-width:0px 0px 1px 0px;
}
.disco tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.disco tr:first-child td{
background:red;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
color:#ffffff;
}
/** 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>Biography - 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>Biography</h1>
<div class="members">
<h2>Band Members</h2>
<ol>
<li>Brad Arnold</li>
<li>Chris Henderson</li>
<li>Greg Upchurch</li>
<li>Chet Roberts</li>
<li>Justin Bitonen</li>
</ol>
</div>
<p>If rock ‘n’ roll had fairy tales, the 3 Doors Down story would be one of the most popular. Their story begins in childhood, it celebrates friendship, honesty and making the most of God-given talents. It’s about faith in your teammates and collaboration, trusting instincts and, once success is achieved, lending a hand to help others. </p>
<p>They made their mark early, selling 6 million copies of their debut album, and rather than allow that moment to define themselves, they have developed as musicians, songwriters and friends. The stories and emotions related in their songs resonate with audiences: Their music and lyrics are as approachable as the guys in the band. “The main thing is the lyrics,” says Brad Hardin, a radio programmer in Tampa, Florida, at one of the first stations to play 3 Doors Down's music. “I've watched them mature as a band. They work hard, they do anything for their community and they're so sincere and easy to be around. And that comes out in their music.” “I’ve got to make this life make sense” is a line from one of 3 Doors Down’s most popular songs, “Away From the Sun” and in many ways it sums up a key attraction to the band’s work: The directness of Brad Arnold’s lyrics. “Something I have always tried to do when writing a song: Talk about something besides the rims on the car, something somebody can identify with, but make it open-ended so a listener can make it adapt to their own life,” he says.</p>
<p>Chris Henderson explains “One Light” as song that points out “everyone is looking for the leader to get behind so that change can begin.” Arnold adds: “It’s about giving the world more than you can take from it.” It could also be a description of 3 Doors Down’s Better Life Foundation that they founded in 2003 to help children in need of food, shelter and medical attention. “Every time we do something with our foundation or for the military, we’re just the catalyst,” Arnold says. “When I leave an event, I feel like I have been given something. We’ve been able to do a lot of good things, so it’s hard to look at it as giving back.”</p>
<p>Brad, Todd and Chris all agree they have created a family by being in a band together. They left Mississippi for Nashville and still live just a few miles from one another and share their lives onstage and off. 3 Doors Down is a brotherhood of rock ‘n’ rollers whose bonds with each other and their fans only grow stronger with age.</p>
</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>
I would appreciate any help because this assignment is due tomorrow.
Probably you forgot about something...
li {
display: list-item;
}
In your code there is display:inline which isn't list item and haven't list styles.
I created this email signature template that needs to be used in Outlook. It looks great in browsers but Outlook completely messes it up. I'm not sure what I'm missing
This is the exact file I'm using:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.sContainer {
border: solid 1px black;
widows: 200px;
width: 350px;
font-family: Verdana,Arial,sans-serif;
font-size: 8pt;
color: #000;
background-color: #FFF;
margin: 0px;
padding: 0px;
padding-left: 10px;
display: block;
overflow: auto;
}
.sHeader {
padding: 0;
margin-right: 15px;
margin-bottom: 5px;
border-bottom: solid #FFC300 2px;
}
.sHeader .name {
font-size: 14pt;
}
.linebreak{
color: yellow;
}
.sBody{
width:100%;
}
.sLogo{
width: 160px;
height: 160px;
float: left;
}
.sContent{
padding-left: 15px;
float: left;
}
.name,.position{
margin: 0;
padding: 5px 0;
}
.sContent a {
text-decoration: none !important;
color: #000 !important;
}
.sContent p {
padding: 0;
margin: 0;
margin-bottom: 15px;
}
.highlight{
color:#FFC300;
}
.sLogo img{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div class="sContainer">
<div class="sHeader">
<p class="name">FULL NAME</p>
<p class="position">POSITION | POSITION (FR)</p>
</div>
<div class="sBody">
<div class="sLogo">
<img src="http://bgdistribution.ca/wp-content/themes/bgdistribution/images/logo.png" alt="logo"/>
</div>
<div class="sContent">
<a class="sEmail" href="mailto:EMAILADDRESS"><p>EMAIL ADDRESS</p></a>
<p class="sCell">C:(514) XXX-XXXX</p>
<p class="sTelephone">T:(514) XXX-XXXX</p>
<p>www.<span class="highlight">bgdistribution</span>.ca</p>
</div>
</div>
</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/Luz4u/
Outlook does not support stylesheets. All styles must be declared inline, and even then styling is limited.
See: http://www.campaignmonitor.com/css/
Use word to create the signature. Save as HTML, remove the html code that word adds and use this template. It will work, I have done this
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer