I am trying to put a border-bottom to the titles on my page, but It seems to underline the whole div instead of just the text. Does anyone whats causing this and how to fix it?
http://jsfiddle.net/1sue4ueg
html
<body>
<div id="mainContent">
<div id="infoContent">
<img src="./style/logo.svg" class="logo" alt="Drift">
<canvas resize="true" id="canvas" style="-webkit-user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="657" height="780" data-paper-scope="1"></canvas>
</div>
<div id="projectContent" style="height: auto;">
<div id="newBlock">
<div id="aboutBlock">
<p>DRIFT is een nieuwe organisatie in het Gentse: een ‘ontwikkelingsplatform’ dat zich volledig richt op de artistieke en zakelijke ontwikkeling van jonge kunstenaars.</p>
</div>
<div id="newsBlock">
<div id="newsHead"><div id="newsTitle" class="blockTitle"><p>NIEUWS</p></div><div class="newsDate">13.12.2015</div> </div><div id="newsContent">PARADIS — Hof van Eede & LOD
Componist<br>Thomas Smetryns koopt online een oude foto van een jonge danseres. Even later valt er een lijvig fotoboek in zijn brievenbus. Een leven in puzzelvorm, zo lijkt het.</div> </div>
</div>
<div id="recentWorkBlock">
<div id="recentWorkTitle" class="blockTitle">BINNENKORT</div>
<table>
<tbody>
<tr class="blockRecentProjet" data-projet="17"><td class="colNameProj"><span class="nameProject">Kein applaus für scheisse</span></td><td class="colNumberProj "><span class="">17.12.2015</span></td></tr>
<tr class="blockRecentProjet recentSelectedProject" data-projet="16"><td class="colNameProj"><span class="nameProject">Kokokito</span></td><td class="colNumberProj "><span class="">24.12.2015</span></td></tr>
<tr class="blockRecentProjet" data-projet="15"><td class="colNameProj"><span class="nameProject">We don’t speak to be understood</span></td><td class="colNumberProj "><span class="">06.01.2016</span></td></tr>
<tr class="blockRecentProjet" data-projet="14"><td class="colNameProj"><span class="nameProject">So you can feel</span></td><td class="colNumberProj "><span class="">22.01.2016</span> </td></tr>
<tr class="blockRecentProjet" data-projet="13"><td class="colNameProj"><span class="nameProject">Mystery Magnet</span></td><td class="colNumberProj "><span class="">12.02.2016</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="newsBlock">
<div id="newsHead"><div id="newsTitle" class="blockTitle">DRIFT ORGANISEERT</div><div id="newsContent">
LAB — Vrijplaats voor experiment, ontmoeting en uitwisseling van artiesten voor/tijdens het creatieproces.<br><br>
OP DRIFT — Ad hoc-creatiesessies waarin artistieke talen elkaar kruisen en uitmonden in hogedruktoonmomenten bij In de Ruimte<br><br>
DE AVONDEN — Leessalon in NTGent: hedendaags repertoire en nieuwe stukken worden samen gelezen en bediscussieerd met een groep jonge acteurs, makers, regisseurs en dramaturgen; begeleid door NTGent.<br><br>
WORKSHOPS — Vanaf 2017 organiseert DRIFT workshops rond verschillende inhouden, vormen en disciplines, i.s.m. diverse partnerorganisaties.<br><br>
RESIDENTIES — Ontwikkelingsresidenties vanaf 2017.</div> </div>
</div>
<div id="contactBlock">
<div id="contactTitle" class="blockTitle">CONTACT:</div>
<div id="listContact">
<div class="personnalInfo">
<a href="#">
<p>Campo Victoria<br>
Fratersplein 7<br>
9000 Gent<br>
Ruth Mariën <br>
+32497186317<br>
info#drift.be
<div id="contactBlock">
<div id="contactTitle" class="blockTitle">MAATSCHAPPELIJKE ZETEL</div>
<div id="listContact">
<div class="personnalInfo"
<p>Kouter 108<br>
9000 Gent<br>
Ondernemingsnummer: 633756230</p>
</a>
</div>
</div>
</div>
</div>
</div></body></html>
css
body, html
{
width: 100%;
height: 100%;
overflow: hidden;
}
body, html, div, p, table, th, tr, td, li, ul, form, img
{
margin: 0;
}
body
{
-webkit-font-smoothing: antialiased;
-moz-font-feature-settings: "liga", "kern";
-moz-font-feature-settings:"liga=1, kern=1";
-ms-font-feature-settings:"liga", "kern";
-o-font-feature-settings:"liga", "kern";
-webkit-font-feature-settings:"liga", "kern";
font-feature-settings: "liga", "kern";
}
/*
#font-face
{
font-family: Swiss!important;
src: url('AtlasGrotesk-Medium.otf');
}
*/
#font-face {
font-family: "Swiss";
src: url("swiss-721-medium-bt.eot");
src: url("swiss-721-medium-bt.eot#iefix") format("embedded-opentype"),
url("swiss-721-medium-bt.woff") format("woff"),
url("swiss-721-medium-bt.ttf") format("truetype"),
url("swiss-721-medium-bt.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.logo {
display: block;
padding-top: 15px;
width: 275px;
height: auto;
}
canvas[resize] {
width: 100%;
height: 100%;
}
.blockTitle
{
font-family: Swiss!important;
font-size: 8pt;
line-height: 12pt;
display: inline-block;
vertical-align: top;
height: 10px;
margin-bottom: 15px;
}
.blockTitle > p {
border-bottom: 3px solid black;
}
#mainContent
{
position: absolute;
left: 15px;
right: 15px;
top: 0px; /*7px;*/
/*padding-top:6px;*/
bottom: 0px;
overflow: auto;
/* min-width: 984px; 1024 - 2x20 */
/*
margin-left: 10px;
margin-right: 10px;
margin-top: 7px;
*/
}
#infoContent
{
/*width: 624px;*/
width: 580px;
display: inline-block;
z-index: 42;
position: relative;
height: 100%;
overflow: hidden;
/* background-color: #fff; */
}
#wrapperRight {
right: 0px;
cursor: e-resize;
}
#wrapperLeft {
left: 0px;
cursor: w-resize;
}
.navArrow {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
z-index: 99;
}
#projetsList
{
position: relative;
}
#mainTitles
{
margin-top: 6px;
height: 10px;
}
#mainTitles > div
{
display: block;
float: left;
}
#mainInfoTitle
{
/*
margin-left: 105.7px;
width: 105.7px; */
margin-left: 98.3px;
width: 98.3px;
height: 10px;
/* display: inline-block;*/
}
#mainInfoTitle a:visited,
#mainInfoTitle a:active,
#mainInfoTitle a:hover,
#mainInfoTitle a
{
text-decoration: none;
color: black;
}
#aboutTitle, #overviewTitle
{
/*width: 105.7px;*/
width: 98.3px;
display: inline-block;
height: 10px;
}
#overviewTitle
{
/*margin-left: 105.7px;*/
margin-left: 98.3px;
cursor: pointer;
}
#recentWorkTitle
{
/*margin-left: 105.7px;*/
margin-left: 98.3px;
}
#newBlock
{
margin-top: 3px;
}
/** 5 most recents projects **/
.blockRecentProjet
{
font-family: Swiss!important;
font-size: 8pt;
line-height: 10pt;
/*width: 250px;*/
cursor: pointer;
}
.blockRecentProjet .colNameProj
{
/*width: 211.4px;*/
width: 196.6px;
}
.blockRecentProjet.recentSelectedProject .colNumberProj
{
color: blue;
}
#aboutBlock
{
font-family: Swiss!important;
font-size: 15pt;
line-height: 16pt;
text-align: left;
padding-top: 15px;
}
/*
#aboutBlock .line1 {
letter-spacing: 0;
}
#aboutBlock .line2 {
letter-spacing: -0.010em;
}
#aboutBlock .line3 {
letter-spacing: -0.005em;
}
#aboutBlock .line4 {
letter-spacing: 0;
}
#aboutBlock .line5 {
letter-spacing: 0.015em;
}
*/
#aboutBlock .line1 {
letter-spacing: -0.015em;
}
#aboutBlock .line2 {
letter-spacing: 0.0em;
}
#aboutBlock .line3 {
letter-spacing: 0.0em;
}
#aboutBlock .line4 {
letter-spacing: 0.015em;
}
#aboutBlock .line5 {
letter-spacing: -0.015em;
}
#aboutBlock .line6 {
letter-spacing: 0.0em;
}
/** News block style
**/
#newsBlock
{
margin-top: 10px;
font-family: Swiss!important;
font-size: 15pt;
line-height: 17pt;
}
#newsBlock .newsDate, #newsBlock #newsTitle
{
display: inline-block;
height: 10px;
line-height: 12pt;
}
#newsBlock #newsTitle
{
/*width: 95.7px;
margin-left: 105.7px;*/
width: 200px;
margin-left: 98.3px;
}
#newsBlock .newsDate
{
font-family: Swiss!important;
font-size: 8pt;
/*margin-left: 221.4px;*/
margin-left: 196.6px;
}
#newsBlock #newsContent
{
/*margin-top: 2px;*/
text-align: left;
font-family: Swiss!important;
font-size: 15pt;
line-height: 17pt;
}
/** list of all last projects **/
#recentWorkBlock
{
margin-top: 10px;
}
#recentWorkBlock table{
border-collapse: collapse;
border-spacing: 0px;
padding: 0;
}
#recentWorkBlock table td,
#recentWorkBlock table tr
{
vertical-align: top;
padding: 0;
}
#projetsList
{
margin-top: 2px;
font-family: Swiss!important;
font-size: 8pt;
line-height: 10pt;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2
}
#projetsList .blockInfoProjet
{
margin-bottom: 0px;
display: block;
cursor: pointer;
margin: 0;
-webkit-column-break-inside: avoid; /* Chrome, Safari */
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* IE 11 */
}
#projetsList .blockInfoProjet .numProjet
{
/*width: 85px;*/
/*margin-left: 115.7px;*/
margin-left: 108.3px;
display: inline-block;
}
#projetsList .blockInfoProjet .mainInfoProject
{
/*width: 95.7px;*/
width: 88.3px;
display: inline-block;
vertical-align: top;
}
#projetsList .blockInfoProjet .contentProj
{
vertical-align: top;
/*width: 191.4px;*/
width: 176.6px;
display: inline-block;
margin-left: 10px;
}
.projectSelected .numProjet
{
color: blue;
}
.viewedProj
{
/* color: #9400D3;*/
}
#projetsList .titleCategory
{
margin-top: 12pt;
/*width: 95.7px;*/
width: 88.3px;
display: inline-block;
}
/*
#projetsList .charCategory
{
width: 105.7px;
display: inline-block;
}
*/
#projetsList .categoryName
{
display: inline-block;
}
/**
* Right part
**/
#projectContent
{
vertical-align: top;
position: absolute;
overflow: auto;
z-index: 20;
top: 0px;
/*right: 10px;*/
/*width: 507px;*/
width: 580px;
left: 590px;
height: 100%;
/* bottom: 40px; */
display: inline-block;
}
.wrapperPreview
{
float: left;
display: inline-block;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
z-index: 30;
}
#infoZoomProject
{
z-index: 20;
top: 22px;
/*bottom: 0px;*/
position: absolute;
/*width: 507px;*/
width: 580px;
background-repeat: no-repeat;
background-size: contain;
background-position: center top;
cursor: pointer;
}
#infoZoomProject .previewBigImage,
#tempNewBlock .previewBigImage,
#tempOldBlock .previewBigImage
{
/*width: 507px;*/
width: 580px;
height: auto;
/* max-height: 100%;*/
max-width: 100%;
}
#tempNewBlock
{
background-repeat: no-repeat;
background-size: contain;
background-position: center top;
top: 22px;
/*width: 507px;*/
width: 580px;
position: fixed;
}
#tempOldBlock
{
z-index: 20;
top: 22px;
/*bottom: 0px;*/
position: absolute;
/*width: 507px;*/
width: 580px;
background-repeat: no-repeat;
background-size: contain;
background-position: center top;
cursor: auto;
}
.zoomImageProject
{
width: 100%;
height: 100%;
overflow: hidden;
}
#infoZoomProject img
{
}
#indexProject, #indexProjectWrapper, #zoomTitleProject
{
font-family: Swiss!important;
font-size: 8pt;
display: inline-block;
}
#indexProject
{
color: blue;
}
#indexProjectWrapper
{
width: 100%;
height: 20px;
text-align: center;
margin: 0 auto;
padding-top: 4px;
}
#zoomTitleProject
{
/* position: fixed;
bottom: 14px;
left: 634px;
right: 15px;
*/
text-align: center;
height: 20px;
/*width: 507px;*/
width: 580px;
margin-top: 6px;
}
/**
** zoom on a project
**/
#listPictureProject
{
display: none;
position: fixed;
top : 20px;
/*width: 507px;*/
width: 580px;
/*left: 649px; 634 + 15 */
left: 605px;
bottom: 0px;
}
.mainViewDetail
{
width: 580px;
height: 100%;
background-position-x: center;
background-position-y: top;
background-size: contain;
background-repeat: no-repeat;
}
.wrapperEvent
{
float: left;
display: inline-block;
height: 100%;
cursor: pointer;
}
#wrapperListProject
{
width: 100%;
height: 100%;
overflow: hidden;
}
.imageDetailProject
{
background-repeat: no-repeat;
background-size: contain;
background-position: center top;
width: 100%;
height: 172px;
margin-bottom: 20px;
text-align: center;
display: inline-block;
cursor: pointer;
}
.imageDetailProject img
{
/* width: 100%*/
height: 250px;
margin: 0 auto;
}
.wrapperDetailBlock
{
width: 49%;
display: inline-block;
}
#wrapperListProject .leftDetail
{
margin-right: 2%;
}
/**
** show list of project previews
**/
#listOverviewProjects
{
display: none;
position: fixed;
top : 0px;
width: 1160px;
/*left: 649px;*/
left: 15px;
bottom: 0px;
}
#wrapperOverview
{
width: 100%;
height: 100%;
padding-top: 23px;
overflow: hidden;
}
.colOverview
{
padding: 0 5px;
width: 24.1%;
display: inline-block;
vertical-align: top;
float: left;
position: relative;
}
#wrapperOverview .firstCol .previewImageProj
{
padding-left: 0 !important;
}
#wrapperOverview .lastCol .previewImageProj
{
padding-right: 0 !important;
}
.blockPreviewOverview
{
cursor: pointer;
width: 250px;
display: inline-block;
vertical-align: top;
}
.previewMargin
{
margin-right: 7px;
}
.previewImageProj
{
background-repeat: no-repeat;
background-size: contain;
background-position: center top;
width: 100%;
/*height: 200px;*/
cursor: pointer;
margin-bottom: 20px;
/* padding: 0 5px;*/
text-align: center;
display: inline-block;
}
.previewImageProj img
{
width: 100%;
}
/**
* contact block
*/
#listContact
{
width: 100%;
overflow: overlay;
}
.personnalInfo
{
vertical-align: top;
/*width: 201.3px;*/
width: 400px;
float: left;
font-family: Swiss!important;
font-size: 15pt;
display: inline-block;
margin-right: 10px;
}
.personnalInfo a, .personnalInfo a:hover, .personnalInfo a:visited
{
text-decoration: none;
color: #000;
cursor: pointer;
}
.BMEMail
{
letter-spacing: -0.015em;
}
#contactTitle
{
margin-top: 10px;
/*margin-left: 105.7px;
width: 95.7px;*/
margin-bottom: 4px;
margin-left: 98.3px;
width: 150px;
}
.lineHeadProj
{
display: inline-block;
}
thanks in advance
I suggest to you please take span replace of p tag bcz, p tag use for paragraph, if you want work on the same code so modify css
.blockTitle > p {
border-bottom: 3px solid black;
display: inline-block;
}
<p>'s are block elements meaning that they have a width of 100%. Add this to your CSS .blockTitle > p { display: inline-block; } and it should work
JSFiddle
Related
I want to have a white background where the user can select a item in the autocomplete however I have my header image that keeps repeating.
Here is a image of my probleme
As you can see I highlighted in blue every suggestion. However I get the background image for each suggestion instead of having a simple white background.
Here is my html
<header>
<h1>
<a href="/">
<span class="texte-cache">Sel gras</span>
</a>
</h1>
<section class="section-recherche">
<?php
// define variables and set to empty values
$rechercheErr = "";
$recherche = "";
$rechercheValid = false;
?>
<form method="get" action="../pages/recherche.php">
<label for="recherche" class="lblRechercher">Rechercher</label>
<div class="recherche">
<input type="search" name="recherche" id="recherche" placeholder="Rechercher..." value="<?php echo $recherche; ?>" />
<span class="error"> <?php echo $rechercheErr; ?></span>
<button title="Rechercher" class="button-recherche" id="buttonRecherche" name="submit"><i class="material-icons-white">search</i></button>
</div>
<div id="div-suggestions" class="suggestions masquer"></div>
</form>
</section>
</header>
And here is my css that cause the probleme
/*Exemple when screen is large*/
#media screen and (min-width: 1300px) {
header a {
display: block;
margin-left: auto;
margin-right: auto;
height: 270px;
background-size: 100% 120%;
background-image: url(../images/logo-long.jpg);
background-repeat: no-repeat;
background-position: center top;
}
}
Here is the css for the autcomplete.
.afficher {
display:block;
}
.masquer {
display:none;
}
.suggestions {
background-color:white;
width:194px;
position:absolute;
border: 1px solid gray;
background-image: none;
}
.suggestions ul {
padding-left:0;
margin:0;
list-style-type:none;
}
.suggestions ul li:hover {
background-color:lightblue;
}
I have tried to add
background-image: none;
However it did not work. What can I do to fix this problem thank you for your help
I have added a JsFiddle here
https://jsfiddle.net/L9afb2u0/
the code is a little hard to understand, but basically, remove background image and add an img element on the html doc.
var scriptSug =
{
"divSuggestions" : null
};
function viderElement(element) {
while (element.lastChild) {
element.removeChild(element.lastChild);
}
}
/**
* Appelée lors d'un clic dans la fenêtre
*/
function gererClicFenetre(evenement) {
var clicDedans = scriptSug.divSuggestions.contains(evenement.target);
window.console.log("Clic dans la zone cliquable ? " + clicDedans);
if (!clicDedans) {
viderElement(scriptSug.divSuggestions);
scriptSug.divSuggestions.className = "suggestions masquer";
document.removeEventListener("click", gererClicFenetre);
}
}
/**
* Pour demander les suggestions au site web.
*
* On devrait procéder par AJAX pour récupérer les suggestions, mais
* elles sont "hard-codés" pour la démo.
*/
function afficherSuggestions() {
viderElement(scriptSug.divSuggestions);
scriptSug.divSuggestions.className = "suggestions afficher";
var elemListe = document.createElement("ul");
scriptSug.divSuggestions.appendChild(elemListe);
for (var i=0;i<5;i++) {
var itemListe = document.createElement("li");
// TODO : ne pas mettre de .innerHTML dans votre TP
itemListe.innerHTML =
"<a href='http://www.google.ca'>Suggestion " + i + "</a>";
elemListe.appendChild(itemListe);
}
// Ajout d'un événement sur tout le document (la fenêtre)
document.addEventListener("click", gererClicFenetre, false);
}
/**
* Appelée lors de l'initialisation de la page
*/
function initialisation() {
scriptSug.divSuggestions = document.getElementById("div-suggestions");
document.getElementById("recherche").addEventListener("input", afficherSuggestions, false);
}
window.addEventListener("load", initialisation, false);
#charset "UTF-8";
/* Créé par Junior Corenbach et MINH NGUYEN */
html,
body {
margin: 0;
}
#page{
background-color: #eFeFeF;
margin: auto;
width: 80%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 3%;
}
a{
text-decoration: none;
color: #aa0000;
}
a:hover{
text-decoration: none;
color: #DB9900;
}
p{
margin-left: 30px;
}
header{
background-color: #DFDFDF;
margin: auto;
width: auto;
}
main{
margin-left: 30px;
contain: layout;
}
footer{
margin-left: 30px;
padding-bottom: 30px;
}
/* || En tête */
h1{
margin: 0;
}
h2{
margin: 0;
text-align: center;
}
h4{
margin: 0;
font-size: 1.4rem;
text-align: center;
}
.afficher {
display:block;
}
.masquer {
display:none;
}
.suggestions {
background-color:white;
width:194px;
position:absolute;
border: 1px solid gray;
}
.suggestions ul {
padding-left:0;
margin:0;
list-style-type:none;
}
.suggestions ul li:hover {
background-color:lightblue;
}
/* || Page connection */
#connection div{
margin: 10px;
}
input[type=button], input[type=submit] {
background-color: #DB9900; /* Green */
border: #7F5900 solid 1px;
border-radius: 5px;
color: white;
padding: 5px 10px;
display: inline-block;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 16px;
width: 50%;
}
input[type=button], input[type=submit]:hover {
background-color: #C08600;
cursor: pointer;
}
input[type=button], input[type=submit]:active {
background-color: #A57300;
}
.error{
color: red;
}
.recherche{
display: flex;
margin-bottom: 3%;
}
.gallery-link{
color: #111;
}
.gallery-link:hover{
color: #DB9900;
}
/*min ici pour tout ecran plus grand est une image*/
#media screen and (min-width: 1300px) {
header a {
display: block;
margin-left: auto;
margin-right: auto;
height: 270px;
}
}
#media screen and (max-width: 1300px) {
header a {
display: block;
margin-left: auto;
margin-right: auto;
height: 270px;
background-size: 100% 120%;
}
}
#media screen and (max-width: 1000px) {
header a {
display: block;
margin-left: auto;
margin-right: auto;
height: 270px;
}
}
#media screen and (max-width: 700px) {
header a {
display: block;
margin-left: auto;
margin-right: auto;
height: 270px;
}
}
.texte-cache {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}
/******************************************/
/*************** MENU***********************/
/******************************************/
.menu-principal {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #DB9900;
}
.menu-principal li {
float: left;
}
.menu-principal li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu-principal li a:hover {
background-color: #111;
}
/******************************************/
/***********ERREUR*************************/
/******************************************/
.imag-erreur{
width: 100%;
}
.header-erreur{
text-align: center;
font-size: 1000%;
color:#DB9900;
border: #111111;
}
.erreur-text-large{
font-size: 300%;
text-align: center;
margin: 0;
}
.erreur-text-petit{
font-size: 120%;
text-align: center;
color:#111;
margin: 0;
}
.icon-page-acces{
text-align: center;
}
/******************************************/
/***********GALERY*************************/
/******************************************/
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
}
.material-icons-yellow {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #DB9900;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
.material-icons-yellow-large {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #DB9900;
font-size: 900%;
line-height: 1;
letter-spacing: normal;
text-transform: none;
vertical-align: top;
}
.material-icons-white {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: white;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
.material-icons-white-small {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: white;
font-size: 16px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
.material-icons-red {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #aa0000;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
div#gallery-large {
margin: 5px;
border: 1px solid #ccc;
display: inline-block;
width: 70%;
background-color: white;
text-align: center;
}
#gallery-auto{
display: inline-block;
text-align: center;
width: 95%;
}
.titre-gallery-auto-section{
min-height: 50px;
}
.gallery-hiden{
display: none;
clip: rect(1px, 1px, 1px, 1px) !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
background-color: white;
}
div.gallery:hover {
border: 1px solid #777;
}
.imageRecette {
width: 100%;
height: auto;
}
div.desc {
text-align: center;
}
div.desc p{
float: right;
margin: 0;
padding: 0px;
text-align: center;
}
.list-recettes{
display: flex;
flex-wrap: wrap;
float: left;
}
.titre-gallery{
min-height: 150px;
}
/******************************************/
/******************************************/
/******************************************/
.image-details-recette{
float: right;
margin: 5px;
width: 30%;
overflow: auto;
}
.deuxieme-section-recette{
padding-top: 2%;
clear: both;
}
input[type=text], input[type=password], input[type=email] {
width: 100%;
padding: 12px 10px;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=search] {
width: 60%;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.section-recherche{
position: absolute;
top: 190px;
padding-left: 20px;
width: 80%;
}
input[type="checkbox"]{
padding: 0%;
cursor: pointer;
}
input[type="submit"]{
width: 100%;
padding: 12px 10px;
}
hr{
margin: 1%;
}
#buttonRecherche{
width: 50px;
border-radius: 0px;
border: none;
}
#button-commenter{
width: 120px;
display: block;
margin-top: 1%;
margin-bottom: 1%;
}
#button-gallery-precedent{
width: 120px;
margin-top: 1%;
margin-bottom: 1%;
display: none;
}
#button-gallery-suivant{
width: 120px;
margin-top: 1%;
margin-bottom: 1%;
display: none;
}
.btn-gallery{
text-align:center;
}
.image-gallery-auto{
width: 100%;
height: 100%;
}
textarea{
width: 99%;
resize: none;
}
.section-commentaire{
margin-left: 2%;
}
.pied li{
list-style-type: none;
}
.pied-couriel li{
list-style-type: none;
}
button{
background-color: #DB9900;
border: #7F5900 solid 1px;
border-radius: 5px;
color: white;
padding: 5px 10px;
display: inline-block;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 16px;
width: 50%;
}
.lblRechercher{
display: inline;
color:white;
font-size: 100%;
}
a{
background: white;
border: 5px solid reD;
}
<html>
<body style="">
<div id="page">
<header>
<h1>
<a href="/">
<img src="https://static.makeuseof.com/wp-content/uploads/2008/05/opensource.gif" />
<span class="texte-cache">Sel gras</span>
</a>
</h1>
<section class="section-recherche">
<form method="get" action="../pages/recherche.php">
<label for="recherche" class="lblRechercher">Rechercher</label>
<div class="recherche">
<input type="search" name="recherche" id="recherche" placeholder="Rechercher..." value="" />
<span class="error"> </span>
<button title="Rechercher" class="button-recherche" id="buttonRecherche" name="submit"><i class="material-icons-white">search</i></button>
</div>
<div id="div-suggestions" class="suggestions masquer"></div>
</form>
</section>
</header>
</div>
</body>
</html>
You can add a <span class="YourClass">Suggestion 0</span> inside the a href and give a different css to the span then you can modify only the suggestions 0 etc
I figured it out I used
#media screen and (min-width: 1300px) {
header h1 a {
instead of
#media screen and (min-width: 1300px) {
header a {
You should learn a bit more for how css selectors works.
Since header a says, any a in header should have next styles (and you dropdawn is part of header and has a in it) it inherits that styles.
To be more specific you could add some class for yours a in header (a.link for example), and separate styles in that way.
I'm unable to find the parse error in my css. The mobile website looks responsive in firefox but not Chrome. I am assuming that the parse error is affecting the scaling.
I've been trying to find the error with W3 CSS Validator. Not giving me enough to find the error other than stating "parse error". Might have missed RBRACE but scanned code and couldn't find one missing. Nor any typo.
#media only screen and (max-width: 600px) {
body {
font-size: 16px;
}
#nav {
height: 3.75em;
position: fixed;
top: 0;
width: 100%;
transition: 1s;
border-radius: 0em;
}
#nav .scrolled {
background-color: transparent;
}
#logo {
position: relative;
margin-top: 0.15em;
margin-left: 0.0625em;
height: 1.5em;
}
.m-hidden {
visibility: hidden;
}
.burger {
margin-top: -19.3em;
margin-left: 20.625em;
float: right;
visibility: visible;
position: absolute;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 1.5625em;
height: 0.125em;
background-color: white;
margin: 0.375em 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 3px) ;
transform: rotate(-45deg) translate(-5px, 3px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1; /* Sit on top */
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 1.875em; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
.overlay a {
padding: 0.5em;
text-decoration: none;
font-size: 1.875em;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
text-decoration: none;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 1.25em}
.overlay .closebtn {
font-size: 2.5em;
top: 15px;
right: 35px;
}
}
.cover {
height: 100%;
}
.cover h2 {
margin-left: -0.2em;
margin-top: 6em;
font-size: 2.5em;
text-align: left;
}
.who {
height: 80%;
}
.who h1 {
position: relative;
margin-top: 1em;
margin-left: 2em;
font-size: 3.125em;
text-shadow: 5px 0px white;
text-align: center;
}
.who h2 {
margin-left: 1.5625em;
float: left;
font-size: 0.9375em;
width: 18.75em;
text-align: center;
}
.who a {
position: absolute;
margin-top: 0em;
margin-left: 0em;
float: right;
color: lightgrey;
font-size: 0.9375em;
text-decoration: underline;
https://stackoverflow.com/help visibility: hidden;
}
.service {
height: 95%;
/* background-image: url('../img/mobile/red.jpg');*/
}
.service h1{
margin-top: -4.375em;
font-size: 2em;
}
.service h2{
width: 70%;
font-size: 0.9375em;
}
.service_2 {
margin: 0em;
display: table;
width: 100%;
height: 95%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.service_2 .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.service_2 .content {
text-align: right;
}
.service_2 img {
padding-top: 1em;
height: 6.5em;
}
.service_2 h1 {
font-family: haboro, serif;
font-weight: bold;
font-size: 2em;
text-align: right;
margin-left: -12em;
}
.service_2 h2 {
margin-right: 0em;
float: right;
text-align: right;
font-size: 0.9375em;
width: 18.75em;
}
.service_3 {
height: 95%;
margin-top: -14.7em;
}
.service_3 h1{
font-size: 2em;
}
.service_3 h2{
width: 70%;
font-size: 0.9375em;
}
.service_3 span {
font-size: 0.9375em;
}
.portfolio-title {
margin-top: 0em;
padding: 5em;
text-align: center;
}
.portfolio-title h1 {
font-size: 2.5em;
}
.portfolio-title hr {
width: 10em;
}
.portfolio-title h3 {
font-size: 0.9375em;
color: white;
}
.box-wrap {
display: table;
padding: 0em;
}
.zoom {
position: relative;
}
.box-content h1 {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.frame {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame img {
height: 16em;
width: 100%;
}
.frame p {
op: 65%;
}
.frame2 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame2 img {
height: 16em;
width: 100%;
}
.frame2 p {
top: 65%;
}
.frame3 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame3 img {
height: 16em;
width: 100%;
}
.frame4 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame4 img {
height: 16em;
width: 100%;
}
.frame4 p {
top: 65%;
}
.frame5 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame5 img {
height: 16em;
width: 100%;
}
.frame6 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame6 img {
height: 16em;
width: 100%;
}
.project-btn {
display: table;
height: 3.125em;
width: 100%;
background-color: #C7C4BF;
color: black;
text-align: center;
margin-bottom: 0em;
}
.project-btn h3 {
padding-top: 0em;
font-size: 0.9375em;
}
.project-btn a {
color: black;
}
.project-btn a:hover {
text-decoration: none;
color: grey;
}
.contact {
height: 60%;
margin-bottom: 33.3em;
}
.contact h1 {
margin: 0em;
font-size: 1.5625em;
}
.contact-btn {
margin-top: 1.25em;
height: 2.5em;
width: 9.375em;
font-size: 0.9375em;
}
.contact-btn:hover {
font-size: 9.375em;
}
footer {
height: 80%;
}
.footercontent {
margin-left: -12em;
}
footer img {
height: 3.125em;
margin-bottom: 0.9375em;
}
footer p:nth-child(4) {
font-size: 0.75em;
}
footer .foot {
font-family: haboro, serif;
font-size: 1em;
padding-bottom: 0.0625em;
}
footer .break {
margin-left: 2em;
margin-top: -0.3125em;
border-bottom: 1px solid white;
border-width: 1px;
width: 4.375em;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
text-decoration: none;
color: grey;
}
footer i {
font-size: 1.25em;
margin-bottom: 0.625em;
}
.footer-icons {
font-size: 0.625em;
margin-right: 1em;
}
.fmobile {
margin-left: 0.3125em;
position: absolute;
visibility: visible;
align-items: center;
}
}
There is a text https://stackoverflow.com/help in your .who a. Remove this line.
.who a {
position: absolute;
margin-top: 0em;
margin-left: 0em;
float: right;
color: lightgrey;
font-size: 0.9375em;
text-decoration: underline;
visibility: hidden;
}
The property op does not exist. Do uou mean top or opacity ??
.frame p {
op: 65%;
}
Trying to get a span that is a circle next to it a inputfield and next to that a button. This inside a div that has 50% and the div next to its floats left and is also 50% with an image inside.
This is the JADE file
section(class=spec.__class)&attributes(attributes)
.row
.options
.left.first
img(src='images/prijzen.png', alt='prijzen')
.right
p.
In onze Surprise Webshop is elk pakje gratis. Wat u precies heeft besteld, blijft wel een verrassing tot u het pakje ophaalt in een afhaalpunt of pakjesautomaat naar keuze.
.row.clear
span.nr.bgred 1
.row.rightfields
form.inputform(name="add-estimation", method="post")
.inputfielddiv.floatleft
input.styleds(type="text", name="title", placeholder="Vul hier uw persoonlijke code in")
.inputdiv.floatright
a.button.red.round.ctaright(type="submit", value=">", href="#kiespakje")
This is the CSS
.row {
#include center(1024px);
margin-bottom: 4em;
width: auto;
max-width: 840px;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
margin-bottom: 2em;
.fix {
clear: both;
}
.clear {
clear: both;
}
.inputdiv {
overflow: hidden;
padding-right: .5em;
}
.options {
margin-top: 70px;
.left {
float: left;
clear: none;
text-align: inherit;
width: 40%;
margin-left: 0px;
margin-right: 5%;
}
.left img{
width: 340px;
margin-left: 20px;
margin-top: 30px;
margin-bottom: 15px;
}
.right {
padding: 0 20px;
float: left;
clear: none;
text-align: inherit;
width: 100%;
margin-left: 0px;
margin-right: 0%;
border-left: 0;
#include breakpoint($tablets) {
padding: 0 0 0 50px;;
}
.nr {
position: relative;
text-align: center;
padding-top: 15px;
width: 3em;
height: 3em;
display: inline-block;
border-radius: 100%;
}
.bgred {
background: #EF2637;
color: white;
}
.leftbol {
float: left;
width: 100%;
}
.rightfields {
width: 100%;
float: right;
display: inline-block;
.inputform {
width: 100%;
.floatleft {
width: 75%;
float: left;
#include breakpoint($tablets) {
width: 100%;
}
.styleds {
width: 100%;
padding: 0.8em;
margin-bottom: 1em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border: none;
color: black !important;
border-radius: 0;
background-color: #D5D5D5;
font-style: italic;
}
}
.floatright {
width: 20%;
float: right;
.buttoncode {
text-decoration: none;
border: none;
padding: 22px;
font-weight: bold;
font-size: 15px;
display: inline-block;
width: 100%;
max-width: 250px;
margin-top: 0 auto;
text-align: center;
color: white;
background-color: #EF2637;
}
}
}
}
}
.right p {
text-align: center;
margin-left: 0px;
#include breakpoint($tablets) {
text-align: left;
}
}
.right span{
margin-left: 140px;
#include breakpoint($tablets) {
margin-left: 0px;
}
}
}
}
I am trying to get my <a> tags centered in div#teacherpageoptions. They are centered in Microsoft Expression Web, but not when I view the page in a browser. What am I doing wrong?
#blackbar {
background-color: chartreuse;
padding: 10px;
height: 57px;
}
html {
height: 100%;
}
body,
#teacherpage {
min-height: 100%;
background-color: #f4f4f4;
}
hr {
visibility: hidden;
}
.center {
padding-bottom: 50px;
padding-top: 50px;
}
.button {
display: block;
width: 115px;
height: 25px;
background: chartreuse;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
.button1 {
display: block;
width: 115px;
height: 25px;
background: #008dde;
padding: 10px;
border-radius: 5px;
color: white;
font-weight: bold;
position: absolute;
}
p {
color: white;
font-weight: bold;
line-height: 40px;
}
.auto-style1 {
/* Make username hang a little to the left. */
margin-left: 53px;
}
#teacherpage {
height: 327px;
background-color: gray;
}
#teacherpageoptions {
margin-left: auto;
margin-right: auto;
height: auto;
}
.auto-style2 {
margin-right: 0px;
}
.wrapper {
text-align: center;
}
.auto-style3 {
margin-bottom: 0px;
}
a {
height: 100%;
opacity: 0.5;
width: 100%;
}
a:hover {
opacity: 1;
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
<div id="blackbar" class="auto-style3">
Logout
<p style=" float:right; height: 36px;" class="auto-style1">Username
<?php session_start(); echo $name=$ _SESSION[ 'name'] ?>
</p>
</div>
<hr>
<div id="teacherpageoptions">
<div class="wrapper" style="height:100px "> Make Questions
<div class="center"></div>
Make Exam
</div>
</div>
Remove the position: absolute; from the .button1 and add margin: 0 auto; instead.
#blackbar {
background-color: chartreuse;
padding: 10px;
height: 57px;
}
html {
height: 100%;
}
body,
#teacherpage {
min-height: 100%;
background-color: #f4f4f4;
}
hr {
visibility: hidden;
}
.center {
padding-bottom: 50px;
padding-top: 50px;
}
.button {
display: block;
width: 115px;
height: 25px;
background: chartreuse;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
.button1 {
display: block;
width: 115px;
height: 25px;
background: #008dde;
padding: 10px;
border-radius: 5px;
color: white;
font-weight: bold;
/* position: absolute; */
margin: 0 auto;
}
p {
color: white;
font-weight: bold;
line-height: 40px;
}
.auto-style1 {
/* Make username hang a little to the left. */
margin-left: 53px;
}
#teacherpage {
height: 327px;
background-color: gray;
}
#teacherpageoptions {
margin-left: auto;
margin-right: auto;
height: auto;
}
.auto-style2 {
margin-right: 0px;
}
.wrapper {
text-align: center;
}
.auto-style3 {
margin-bottom: 0px;
}
a {
height: 100%;
opacity: 0.5;
width: 100%;
}
a:hover {
opacity: 1;
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
<div id="blackbar" class="auto-style3">
Logout
<p style=" float:right; height: 36px;" class="auto-style1">Username
<?php session_start(); echo $name=$ _SESSION[ 'name'] ?>
</p>
</div>
<hr>
<div id="teacherpageoptions">
<div class="wrapper" style="height:100px "> Make Questions
<div class="center"></div>
Make Exam
</div>
</div>
You can delete the "position:absolute" and put "margin:0 auto" instead.
Let me know how it worked.
I'm trying to create a new page in which I apply my own CSS and use some of the components developed here: http://aozora.github.io/bootmetro/index.html.
Problem is that on one component the browser is only applying the style from my file and not the style defined on the .css file I downloaded from the site. Trouble is that firebug shows that the file is being tranfered to the user but somehow its not being used even if the class defined from tag is clearly defined on the other .css file.
Heres the source of the page:
<div class="header">
<div class="right textHeader">
<div class="left logo"><p class="title">Portal para la gestión y control<br>
de la implementación del sistema de información PAI
</p>
</div>
<div class="right textInfo">
<div class="left greetTime">
<img src="/Content/Images/calendar.png"> 27/04/2013 12:15:25 p.m.
</div>
<div class="greet">
Hola, <a class="username" href="/Account/Manage" title="Manage">administrador</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" value="gsGgnTHMhT55z7aQFmarrbLlUQK4x2nuMNZP_kXbqRx2j3kWOhNSc3RptPzG8118PGgkQOpU_erRuCcZ7GvH4FhKNAlaCug0dFUGKjiFqbP5wjhFTJConDCIZzZppq090" type="hidden"> Desconectarse
</form> </div>
</div>
</div>
<div class="left imgHeader">
<img src="/Content/Images/logo-minSalud.png">
<img src="/Content/Images/logo-prosperidad.png">
</div>
</div>
<div id="categories">
Inicio
</div>
<div id="content">
<h2>Bienvenido</h2>
This is the item I want to apply the class to
Administrar banco de información**Administrar usuariosReportes gerenciales
</div>
Here's the firebug screenshot:
And here's the screenshot showing that both files are being downloaded:
Here's my css file:
body {
color: #353535;
background-color: #fff;
background: url("Images/bg.jpg") repeat-x 0 0 #EBEBEB;
font-size: 1em;
margin: 0;
padding: 0;
font-family: 'Maven Pro', sans-serif;
}
header, footer, nav, section
{
display: block;
}
.editButton {
background:url(Images/editarPequeño.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.deleteButton {
background:url(Images/deletePequeno.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.left
{
float:left
}
.right {
float: right;
}
.navBar {
background-color: #F7921E;
height: 48px;
}
/*//////////TABLA LISTADO /////////////////////////*/
table {
color: #333;
/*font-family: Helvetica, Arial, sans-serif;*/
/*width: 640px;*/
border-collapse:
collapse; border-spacing: 0;
margin-left:auto;
margin-right:auto;
}
td, th {
border: 1px solid transparent; /* No more visible border */
height: 30px;
transition: all 0.3s; /* Simple transition for hover effect */
}
th {
background: #5DBCD2; /* Darken header a bit */
font-weight: bold;
border: 1px solid #CCC;
}
td {
background: #FAFAFA;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */
/*///////////////////////////////*/
.title {
/*font-family: 'Montserrat', sans-serif;*/
/*width: 500px;*/
font-weight: bold;
}
.greet {
font-size: 0.78em;
}
.textInfo {
width:50%;
/*height:100%;*/
}
/*///////////////////////////////////////*/
.listView {
margin-left: 0px;
list-style: none outside none;
}
ul{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.metrouicss .listview:before, .metrouicss .listview:after {
display: table;
content: "";
}
/*///////////////////////////////////////*/
.okButton {
background: -moz-linear-gradient(center top , #ff6600 0px, #ff6600 100%) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
opacity: 0.75;
padding: 6px 10px;
margin-top:5px;
display:block;
margin:0px auto;
}
.okButton {
transition: opacity 0.2s ease 0s;
}
.footer {
width: 100%;
height: 100px;
background: none repeat scroll 0% 0% rgb(138, 188, 203);
margin-top:50px;
color: rgb(0, 0, 0);
font-size: 0.7em;
border-top: 1px solid rgb(98, 143, 156);
}
.logo {
width:50%
}
.textHeader {
width:63%
}
.greetTime {
font-size: 0.58em;
/*width: 15px;*/
}
.header {
height: 122px;
width: auto;
margin-top:20px;
/*margin-left:5%;*/
/*margin: 0px auto;*/
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
color:black
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
/*CSS Aditions*/
BODY { font-size: 1em; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A
{
/*font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;*/
}
A#loginLink {
font-size:1.5em;
}
/*DIV#header { background-color: #5DBCD2; border-bottom: 2px solid #111; color: black; }*/
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#title { font-size: 2em; padding: .6em;float:right }
DIV#headerImages { float:left}
/*DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }*/
DIV#categories { float: left; width: 8em; padding: .3em; }
DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager { text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }
DIV#categories A
{
font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
text-decoration: none; padding: .6em; color: Black;
border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }
And heres the css file i downloaded
/* Metro Tiles
-------------------------------------------------- */
.bg-color-blue {
background-color: #0072BC !important;
}
.bg-color-blueDark {
background-color: #662D91 !important;
}
.bg-color-green {
background-color: #01a31c !important;
}
.bg-color-greenDark {
background-color: #008641 !important;
}
.bg-color-red {
background-color: #bc1c48 !important;
}
.bg-color-yellow {
background-color: #ffc40d !important;
}
.bg-color-orange {
background-color: #CD4900 !important;
}
.bg-color-pink {
background-color: #c3325f !important;
}
.bg-color-purple {
background-color: #603cba !important;
}
.bg-color-darken {
background-color: #1c1c1c !important;
}
.metro {
overflow: hidden;
}
.metro .carousel-control {
top: 20%;
}
.metro .metro-sections {
height: auto;
position: relative;
overflow: hidden;
width: 10000px;
}
.metro-sections h2 {
margin-left: 5px;
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
text-transform: lowercase;
}
.metro .metro-sections .metro-section {
position: relative;
float: left;
/*width: 810px !important;*/
width: auto;
height: auto;
margin-right: 75px;
}
/* fixed widths for tile sections
units are measured per square tile width, i.e.: tile-span-1 = 160px = 1 square tile width (including margin)
*/
.metro .metro-sections .metro-section.tile-span-1 { width: 160px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-2 { width: 320px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-3 { width: 480px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-4 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-5 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-6 { width: 800px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-7 { width: 960px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-8 { width: 1120px; margin-left: 0;}
/*default tile definition */
.metro .tile {
position: relative;
display: block;
float: left;
margin: 5px;
padding: 0;
/*padding-bottom: 1px;*/
width: 150px;
height: 150px;
color: #FFF;
cursor: pointer;
overflow: hidden;
text-decoration: none;
background-color: #2C83EF;
}
.metro .tile:hover {
outline: 3px #225a68 solid;
}
.scroll {
-webkit-transition:left 0.6s ease; /* here the animation is set on 5 seconds */
-moz-transition:left 0.6s ease;
-o-transition:left 0.6s ease;
transition:left 0.6s ease;
}
/* Metro Tiles Templates
-------------------------------------------------- */
.metro .tile.square.text {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.square.image {
width: 150px;
height: 150px;
padding: 0;
}
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
.metro .tile.squarepeek {
width: 150px;
height: 300px;
}
.metro .tile.squarepeek .text-inner {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.text {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.image {
width: 310px;
height: 150px;
}
.metro .tile.wide.image.collection img {
max-width: 158px;
max-height: 150px;
float: left;
}
/* template for full image */
.metro .tile.wide.imagetext.wideimage {
width: 310px;
height: 150px;
padding: 0;
}
/* template with normal 80x80 image */
.metro .tile.wide.imagetext {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.imagetext .textover-wrapper {
position: absolute;
bottom: 0;
width: 270px;
height: 48px;
padding: 2px 20px;
background-color: inherit;
}
.metro .tile.widepeek {
width: 310px;
height: 300px;
}
/* Default Tile
-------------------------------------------------- */
.metro .tile.app .image-wrapper {
display: block;
width: 150px;
height: 80px;
margin-top: 20px;
padding: 8px 0;
text-align: center;
vertical-align: middle;
}
.metro .tile.app .image-wrapper img {
max-width: 80px;
max-height: 80px;
margin: 0 auto;
}
.metro .tile .app-label {
bottom: 5px;
font-size: 12px;
left: 20px;
position: absolute;
}
.metro .tile .app-count {
position: absolute;
right: 20px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.metro .tile.wide.app {
width: 310px;
height: 150px;
}
.metro .tile.wide.app .image-wrapper {
width: 310px;
}
.image-wrapper span.icon {
font-size: 80px;
height: 80px;
line-height: 80px;
width: 80px;
}
/*
-------------------------------------------------- */
.metro .tile.square.text .text-big {
font-size: 76px;
line-height: 76px;
text-align: left;
overflow: hidden;
}
.metro .tile.square.text.tilesquareblock .text {
font-size: 14px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
/* normal header in 1 line of wrapped text*/
.metro .tile .text-header {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
max-height: 36px;
text-align: left;
overflow: hidden;
}
/* One string of large text wrapped over a maximum of three lines.*/
.metro .tile .text-header3 {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
text-align: left;
max-height: 110px;
overflow: hidden;
}
/* 1 line of regular text (not wrapped) */
.metro .tile .text {
font-size: 15px;
line-height: 18px;
height: 18px;
font-weight: normal;
text-align: left;
overflow: hidden;
}
/* regular text wrapped over a maximum of 2 lines */
.metro .tile .text2 {
font-size: 15px;
font-weight: normal;
line-height: 20px;
max-height: 44px;
overflow: hidden;
text-align: left;
}
/* regular text wrapped over a maximum of 3 lines */
.metro .tile .text3 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 56px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 4 lines */
.metro .tile .text4 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 72px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 5 lines */
.metro .tile .text5 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 92px;
overflow: hidden;
}
/* Image Only Tiles
-------------------------------------------------- */
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
/* Wide Text Only Tiles
-------------------------------------------------- */
.metro .tile .column {
display: block;
float: left;
width: 130px;
}
.metro .tile .column2-label {
display: block;
float: left;
width: 90px;
}
.metro .tile .column2-text {
display: block;
float: left;
width: 160px;
}
.metro .tile .column3-label {
display: block;
float: left;
width: 50px;
}
.metro .tile .column3-text {
display: block;
float: left;
width: 200px;
}
/* Wide Image Only Tiles
-------------------------------------------------- */
.metro .tile.wide.image .mini-tiles {
display: inline-block;
float: left;
width: 152px;
height: 150px;
}
.metro .tile.wide.image .mini-tiles img {
display: inline-block;
float: left;
max-width: 75px;
max-height: 75px;
border-left: 1px solid #2A2A2A;
}
/* Wide Image & Text Tiles
-------------------------------------------------- */
.metro .tile.wide.imagetext .column-text,
.metro .tile.wide.text .column-text {
display: block;
float: left;
width: 180px;
padding-left: 10px;
}
.metro .tile.wide.text .column-text-big {
display: block;
float: left;
width: 80px;
}
.metro .tile.wide.imagetext .image-wrapper {
display: block;
float: left;
width: 80px;
height: 80px;
}
.metro .tile.wide.imagetext .image-wrapper img {
max-width: 80px;
max-height: 80px;
}
/* ListView
-------------------------------------------------- */
.listview-container.grid-layout {
border: solid 2px rgba(0, 0, 0, 0.13);
height: 240px;
overflow: auto;
padding: 2px;
background-color: #FFF;
}
.mediumListIconTextItem {
display: inline-block;
position: relative;
vertical-align: top;;
width: 282px;
height: 70px;
padding: 5px;
margin-bottom: 7px;
margin-right: 24px;
border: solid 3px transparent;
overflow: hidden;
background-color: #FFF;
cursor: pointer;
}
.mediumListIconTextItem:hover {
border: solid 3px #b3b3b3;
background-color: #b3b3b3;
}
.mediumListIconTextItem img.mediumListIconTextItem-Image {
display: inline-block;
vertical-align: top;;
width: 60px;
height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Image[class^="icon-"],
.mediumListIconTextItem .mediumListIconTextItem-Image[class*=" icon-"] {
display: inline-block;
width: 60px;
height: 60px;
font-size: 60px;
line-height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Detail {
display: inline-block;
vertical-align: top;;
margin: 5px;
}
.mediumListIconTextItem.selected {
background-color: #4617b4;
}
.mediumListIconTextItem.selected:after {
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
font-family: 'IcoMoon';
content: "\e03c";
color: #FFF;
font-size: 16px;
}
.mediumListIconTextItem.selected:hover {
border: solid 3px #b3b3b3;
background-color: #4617b4;
}
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h4,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h6 {
color: #FFF;
}
/* Special undocumented tiles for ads
-------------------------------------------------- */
#ad-container {
background-color: #0072BC;
height: 90px;
margin-top: 10px;
text-align: center;
width: 100%;
}
/*Button (125x125)*/
.metro .tile.ad.ad125 {
width: 125px;
height: 125px;
padding: 12px 13px 13px 12px;
}
/*Small Rectangle (180x150)*/
.metro .tile.wide.ad.ad125 {
width: 180px;
height: 150px;
padding: 0 65px;
}
All the rules from the downloaded file that affect the .tile class start like this .metro .tile which means that the .tile element must be a descendant of a .metro element (an element with class metro)
You html does not show your link being inside a .metro element so the styles do not apply ..
it seems that stylesheets are loaded, but from basic look at the Metro Tiles CSS I decided that you forgot to put metro class to any parent of your tile, for example add class to your content
<div id="content" class="metro">