Google font acting up? - html

So this is my syntax (just a clip)
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<div style="background-color:black;width:auto">
<div style="width:1000px; margin:0 auto;">
<table style="width:1000px;">
<td><p align="right"><h1 style="color:white;font-family:Exo"> When strategy meets chance, champions born</h1></p></td>
<tr>
</table>
</div>
</div>
So, nothing should go wrong right?
But here's a funny thing when I block it.
It shows the right text!
WHY?
(And as you can see, not all text is effected)

You set style about:
<link href="//fonts.googleapis.com/css?family=Exo:100italic,100,200italic,200,300italic,300,400italic,400,500italic,500,600italic,600,700italic,700,800italic,800,900italic,900" rel="stylesheet" type="text/css">

Related

Unwanted space before page-header in Bootstrap

Just starting with Bootstrap and I am trying to make the page-header align to the top of page with no space between the start of header and web page (just like the black StackOverflow header on this page).
The code for the same is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.min.css" ></link>
</head>
<body>
<div class="page-header" style="color:#FFFFFF;background-color:#009688;margin-top:0px">
<h1 style="text-align:center" >Welcome to USICT ATTENDANCE RECORD</h1>
</div>
<div class="container-fluid">
<p style="padding:1em 2em 1sem 2em">The table lists the name of people
studying in USICT along with their attendance in each subject.
</p>
<br/>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Attendance(in %)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>Tyagi</td>
<td>rahul.1992.tyagi#gmail.com</td>
<td>70</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
However I am getting a space between header and address bar of browser as shown in picture below:
I have tried setting
margin-top:0px;
and
position:absolute;
top:0px;
both don't work.
The h1 has a margin that exceeds the green bar.
Apply the following styles:
<div class="page-header" style="color:#FFFFFF;background-color:#009688;padding:9px 4px;margin-top:0;">
<h1 style="text-align:center;margin-top:10px;">Welcome to USICT ATTENDANCE RECORD</h1>
Working JSFiddle.
I Found out the culprit actually it was the h1 which was causing problems.
Since bootstrap applies default margins to h1,h2,h3 ...etc .
So I had to set both the margin of page-header as well as h1 to zero
which solved the problem.
Thank you for the slight hint about h1 from Xufox
Every heading tag such as h1, h2, h3 etc has its own margin thats why you get a white space.Before style your markup you should initializing some style example: tag , , so that you do get twitter bootstrap's own style.This is good practicing of style from markup.
Why don't you put a container-fluid and then a row and your page-header ?
Like this :
<div class="container-fluid">
<div class="row">
<div class="page-header">blabla</div>
</div>
</div>

How to mesh two pictures together

I did ask a similar question not too long ago, but I found some new information on the topic and I think that I can explain a bit better now.
I have two puzzle pieces, both are transparent .pngs (except the actual pieces):
Here's the code that I'm using to display my two pieces right now -
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png">
</td>
</tr>
</table>
</div>
The images are beside each other, but not interlocking like they should. I know that this is supposed to happen, because who wants overlapping pictures. So my question is, how do I have them overlap?
The puzzle isn't meant to be built, it's meant to be pre-built and the pieces appear at different times using opacity, if that makes any sense.
Any direction would be awesome, as I'm new to this (having a blast learning though).
Here is an example of a "fancier" solution using the Jquery UI draggable widget:
http://plnkr.co/edit/BYDyqjBLUOXFcuPvqWvx?p=preview
html
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="http://i.imgur.com/UPYw2i4.png" class="draggable">
<img src="http://i.imgur.com/7rkQ0hz.png" class="draggable">
</body>
</html>
JS
//js
$(function(){
$( ".draggable" ).draggable();
});
This allows you to grab and move each piece with the mouse. Had to use plnkr...because like you, i could not figure out for the life of me how to save a JSFiddle.
You cannot do this with a tableset. The columns won't overlap properly. Even if you could pull it off, you can't expect it to work across all browsers.
You could easily accomplish this with DIVs and CSS. There you have complete control over placement.
I was able to produce the desired result with some CSS Magic
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png" class="merge">
</td>
</tr>
</table>
</div>
</body>
CSS
.merge
{
position:relative;
right:92px;
top:4px;
}

Animate.css Not working

I am using animate.css but it don't seem to work in firefox. The code I am using is:
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="rotateIn"> content</div>
</body>
</html>
I want this div to show rotate in effect when we load the page but it don't seem to work.
you have to use animated class if you want to show animations try this
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="animated rotateIn"> content</div>
</body>
</html>
Long story short: http://jsfiddle.net/3ZLLm/
You MUST use the animated class provided.
So, to add further, it should be:
<div class="animated rotateIn"> content</div>

defining a div tag in a td tag in a html table

I am trying to show a map in my website using Openlayers. I use the same code as here:
http://openlayers.org/dev/examples/all-overlays-google.html
Except, I want to bring it in a table, so that on the left hand side I can put some information about the map! The problem is that if I define the div tag for map in a td tag, when running the map does not show! I pulled it out from td tag and kept it in tr tag and it shows fine! My code is here:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="OpenLayers.js"></script>
<script src="all-overlays-google.js"></script>
</head>
<body onload="init()">
<table style="width: 100%;">
<tr>
<td style="width: 20%;">
Some text here
</td>
<td style="width: 80%;">
<div style="width:100%; height:60%" id="map">
</div>
</td>
</tr>
</table>
</body>
</html>
Any help would be highly appreciated.
Some points:
<center> is deprecated. Use CSS text-align: center.
Tables should only be used to display tabular data. Since in your case you don't have tabular data. don't use tables. Instead, use something like
<div id="colum-wrapper">
<div id="left-column">Left</div>
div id="right-column">Right</div>
</div>
#left-column{ float: left; width: /*whatever*/; }
#right-column{ overflow: hidden; }
Demo
Separation of behavior from markup: avoid adding event handlers using html attributes if possible.

Specific way of adding style with html.erb?

Have updated the css and html as the answers indicate but unfortunately the style information is still not being passed to the td. The class is defined as limits but no style.
Having some trouble with something very basic.
HTML
<%= stylesheet_link_tag "test.css" %>
</head>
<body>
<table class="results">
<% #result.each do |object|%>
<tr>
<td class="limit"> <%= object%> </td>
</tr>
<%end%>
</table>
</body>
CSS
table.results
{
width: 100%;
border: .2em ridge #000000;
}
td.limit
{
width:50%;
background-color: #fff000;
border: .2em ridge #0f0f0f;
}
In the resulting output. the table which has its class defined outside the ruby loop has all its style attributes included fine.
However the TD inside the ruby for.each loop does not. Is there some specific way to add a class to a HTML element in Ruby?
output html table as requested
<!DOCTYPE html>
<html>
<head>
<title>Crawler</title>
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>
<script src="/javascripts/rails.js" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="fQ/oa3q+Aq68GZenV26YuwPjDgbijTeuO3VJihtYHI8="/>
</head>
<body>
<html>
<head>
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="results">
<tr id="test-tr">
<td class="limit"> blag blah </td>
</tr>
<tr >
<td class="limit"> testing 45 </td>
</tr>
<tr >
<td class="limit"> testing</td>
</tr>
</table>
</body>
</html>
</body>
</html>
You're missing a semicolon after the background-color property in the CSS for your td. That'll be knocking out both the background-color and border properties.
You may want to take advantage of the W3C CSS Validation Service for basic sanity checking of your CSS. In your case, it says:
td.limit Value Error : background-color attempt to find a semi-colon before the property name. add it
...which is a bit cryptic, I admit, but at least a reasonable pointer towards your problem.
It is not about Ruby or Rails at all.
You have got EXTRA space between class and ="limit"
<td class ="limit"> <%= object%> </td>
#=> should be
<td class="limit"><%= object %></td>