I am trying to make it so that the features that are on every page of the site are in separated HTML files. I made a header.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>header</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/inc/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="identityAndLinksHeader">
<table>
<tr>
<td><a>Home</a></td>
<td><a>About</a></td>
<td><a>Privacy</a></td>
</tr>
</table>
</div>
</body>
</html>
And the following CSS:
#charset "utf-8";
/* CSS Document */
#identityAndLinksHeader
{
height: 50px;
width: 100%;
margin: 0, 0, 0, 0;
padding: 0, 0, 0, 0;
background-color: rgba(127, 140, 141,1.0);
}
The file works fine and looks like this:
http://puu.sh/68SbK.png
Then I have this index.html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object name="header" type="text/html" data="inc/header.html"></object>
</body>
</html>
However when I run this, the header looks like this:
http://puu.sh/68S9M.png
Does anyone know why this happens? Thank you!
The first thing is you don't need to define type = "text/css" in html5
and second the width of your #identityAndLinksHeader is 100% and perhaps in index.html, that small area is the 100%.
The object tag's size is only so large. Try setting its width to the width of the page.
Related
I need to add the thumbnail before the video using Jquery. I have added the image but when I change the page size the thumbnail is should be centered of the place As per the below image,
But, My image is responsive as below,
My Jquery,
$(document).ready(function () {
$("body").prepend('<div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "position: fixed;width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
can any one please help me to resolve the issue?
To position the image container in the middle of the page use following style (note that you need to remove position: fixed; from image).
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
In the snippet (view in full screen) I added a <div style="height:100vh;">to emulate a larger page, which you should probably remove for your own page. Also you should keep the styles in a css file and HTML in html file, since it is hard to maintain a big blob in javascript.
$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
I just started learning php and I dont know how to change the color of well.
Doing research I found this
.well.homefull{
background: rgba(0, 0, 0, 0.4);
}
But I dont know where to put it and how to use it with
<div class="well">
if I simply put it before div class=well it doesnt work
You'll need to override the css rules of the boostrap well class.
To do this, you'll need to create a custom css file and call this external style sheet from the html page.
For example :
.well {
background-color: rgba(0,0,0,0.4) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
Some content
</div>
Hope it helps.
EDIT :
Or in one page, you could put the style rules between <style></style> tag (take care to put the overriding style rules after the call of bootstrap sources) :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Developping JazZ Sheet</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.well {
background-color: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="well">
some content
</div>
</body>
</html>
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
I have 3 webpages. The first is called inventorshome, second PythonTutorialHome, third HTMLTutorialHome. The second and third look the same in the browser. Notice that the code is exactly the same for the pages. They should look exactly the same by that logic. For some reason, the div is larger for inventorshome than in PythonTutorialHome and HTMLTutorialHome. I am using Google Chrome browser, and they are files on my computer.
Here is the code for inventorshome:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
Here is the code for PythonTutorialHome:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
The CSS linked to these webpages is:
#header {
position:absolute;
left:0px;
top:0px;
background-color:#8AC007;
width:100px;
height:30px;
}
When I change the width and height to percentages, they are the same across all three pages. When the dimensions to pixels, different results are yielded. What is going on here?
I don't know how to use CSS. So I am asking here.
I am creating a JSP page. I have added two tables in my JSP page using Twitter Bootstrap. I need to add different alignment for both tables. Since I am using bootsrap both tables having same alignment.
This is my code
<div>
<table class="table table-bordered source">
//table 1 contents
</table>
</div>
<div>
<table class="table table-hover target">
//table 2 contents
</table>
</div>
I want to align the text to center for table 1 and left for table 2. Table 2 header should be alinged to center and table 2 boreder should be blue.
So I tried this CSS
.table.table-hover.target td {
text-align: left !important;
}
.table.table-hover.target th {
text-align: right !important;
}
.table.table-bordered.source td
{
text-align: center !important;
}
.table.target
{
border-color:blue;
}
It is not working.
When I give
.table td
{
text-align:left !important;
}
it aligns both table contents to left.
I dont now CSS. How can I write the CSS rule?
you probably have something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
right below the bootstrap-responsive.css (or if you are not using responsive layout, you will not even use this file, witch would then be below the bootstrap.css call).
add a new file like:
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
and add all your override rules to that file, the code above will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
the line "/assets/css/application.css" will say that your code will be in that specific path, change it for your needs
Comments:
Remember to comment your CSS rules so others (and even you in 6 month time for example) will understand why did you wrote that... in CSS you can add comments wrap it with /* ... */
for example:
/* TABLES OVERRIDE: so they look like the main theme */
.table td
{
text-align:left !important;
}