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?
Related
I've just started learning CSS and am following a YouTube tutorial Learn CSS in 12 Minutes, however I am stuck at minute 4:49 - the title should show a blue background but mine doesn't?
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.cs
</head>
and on my stle.css sheet I have:
#header {
background-color: #66CCFF;
}
I expected the area behind 'title' to be blue when I view in browser.
you need to create a header tag to make it turn blue using css.
In css, you can apply style to a tag by simply copying its name (here header, not #header), and apply style to id or class by indicating their #name (for id) or their .name (for classes).
The title tag display a text in tab and program title (like here).
Your html code should look like this (I closed the link element):
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>My blue text</header>
And your css:
header{
background-color: #66CCFF;
}
If you want to learn css, you can find some fantastic tutorials :)
Try by closing the link rel=stylesheet tag completely, and actually calling div id header in body, and defining height of that header if you don't have any content in it or you won't be able to see it.
As #metaDesign mentioned, you should consider taking a lot longer than 12 minutes to learn CSS...
#header {
background-color: #66CCFF;
height: 100px;
}
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
</div>
</body>
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>
I've been trying to figure this out all day. Been busting my head and still can't figure it out. I'm writing up an HTML email:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {width:500px;margin:20px auto;text-align:left;padding:0 0.5em;font-size:1.4em;}
#bodytext {width:500px;margin:0px auto;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:400px;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>#{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
Everything seems to be working great on all Desktop browsers. Firefox & Chrome don't have any issues. But on the native Mail app on the iPhone, the content is not 100% full width. There seems to be a blank space on the right hand side! How can I fix this?
It is not blank space on the right hand side, but your calculations are making the boundary extend beyond iPhone screen (320px width). My suggestion would be not to use static measurement values and also to take into consideration your padding and margin values when assigning width.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {text-align:left;padding:0px;font-size:1.4em;}
#bodytext {margin:20px;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:100%;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>#{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
The values I have changed might effect your design, however it is a good point to start fixing the issue.
i dont see that my web page is changing according to the style defined in the css file. when i added the same in html file, it is working. can someone please help. dont know what is wrong.
below is my simple html file
<html>
<head>
<title>css</title>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
test
</head>
</body>
</html>
below is my css file.
<style>
body
{
background-color:lightblue;
}
</style>
<style>
body {
background-color:lightblue;
}
</style>
is not a right way to write a .css file.
Remove those style tags from your .css file and check again.
Also,
Make sure your .html and .css files are on the same path
(In order to make things work without changing the link tag in your html head
Just noticed:
Your body tag is INSIDE your head tag. Which is incorrect.
Right way to do so is,
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Change css file as: Remove <style> </style>
body
{
background-color:lightblue;
}
Also correct the format of html as
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
This works for Me. Make sure your html and css both the files should be in same folder.
Try this.
HTML-
<html>
<head>
<title>css</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
test
</body>
</html>
CSS-
body {
background-color: lightblue;
}
You wrapped the head tag around everything. And a link tag should always be placed between head tags and not in the body tag.
your code should be like the example below. All the rest seems fine.
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Css should be like this:
body {
background-color:lightblue;
}
always css link in head section, u can also see the path of the file, Do not use type attributes for style sheets (unless not using CSS),Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers
type="text/css"
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
hello
</body>
</html>
You are using wrong CSS syntax. In a CSS file, there are no <style></style> tags, they are just rules. So you should have:
body
{
background-color: lightblue;
}
Also, you should link your CSS file into the <head> tag, it is better for your file's organization.
I'm trying to show a background image on an Android phonegap app based on jQuerymobile.
This is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquerymobile.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery.js"></script>
<script src="js/jquerymobile.js"></script>
</head>
<body>
<div data-role="page" id="Main" class="main-page">
<ul data-role="listview" data-filter-reveal="true" data-filter="true"
data-filter-placeholder="Insert the city here..." data-inset="true">
<li>Limone Piemonte</li>
<li>Artesina</li>
<li>Tonale</li>
</ul>
</div>
<!-- /page -->
</body>
</html>
This is the CSS (index.css)
.main-page {
background: transparent url(img/alpettalownologo.jpg) no-repeat center center;
background-size: cover;
}
But I see no image in background. What am I missing?
I'm guessing your url(img/alpettalownologo.jpg) is not correct as this would mean it's in a sub directory of your CSS files.
The location of the background image needs to be in relation to that particular CSS file, so maybe url(../img/alpettalownologo.jpg) as a guess would work, depending on your file structure.