Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<style>
#aDiv{
width:300px;
height:100px;
background-color:blue;
}
</style>
<!--link rel="stylesheet" href="style.css"-->
</head>
<body>
<div id="aDiv"></div>
</body>
If I launch the html in the above form, the blue rectangle is displayed.
If I saved the style in a css file (respectively style.css) the rectangle is not displayed. This behaviour is valid for all the browsers I tried (Firefox, IE, Chrome). How to solve this problem ?
If what you posted in the comments is the actualy contents of your style.css file, your problem is simple to solve - you have a typo:
#aDiv { width:300px; height:l00px; background-color:blue; }
It should be this (take a look at the height value - you had a lower-case L in there in place of a 1):
#aDiv { width:300px; height:100px; background-color:blue; }
This results in an element of height: 0 to render, which you won't be able to see.
When testing this, remember to un-comment the link line in your html head.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
css file:
what gets printed:
html file if it even necessary:
You need to keep in mind that HTML elements come with default styling and each browser is slightly different. Then you need to use the browser developer tools to debug your code. Right click on your HTML element and select inspect.
Now highlighting over your HTML elements will display your margins, border, padding of the selected element, so you can see your h1 has a top and bottom margin applied, remember its default styling applied by the browser.
main{
text-align: center;
}
h1{
font-size:3.5em;
border-bottom: 2px solid #000;
display: inline-block;
padding: 0 10rem;
margin-bottom: 0
}
#aspiration{
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p></p>
<main>
<h1>David Bandas</h1>
</main>
<p id="aspiration">Aspiration front-end developer</p>
</body>
</html>
Output:https://i.stack.imgur.com/NEWEr.png
Html tags come with default user agent stylesheet.If you want to change then need to reset this style with your style.
You can check this default style,In chrome simply press ctrl + shift + i
And select your tag.You can see default css.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
My first website is working ok, but I have an idea I don't know how to accomplish. Some pages have a video player that has buttons to select videos. When the mouse hovers over a button, the navigation menu is replaced with a popup text area that describes the video.
http://www.churchprojectionist.com/nt_history.html
I would like the popup text to appear a few lines above the button over which the mouse hovers, so the viewer's eyes don't have to move back and forth. I've looked, but haven't been found anything to indicate how to do this. The closest thing I've seen is using a <span> title property to create a mouseover tool tip. Perhaps you can point me in the right direction?
Try this :
$(document).on("mousemove",function(e){
$(".moveTxt").css({top:e.pageY,left:e.pageX});
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.moveTxt {
position: relative;
background-color: yellow;
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="moveTxt">Text</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).on("mousemove",function(e){
$(".moveTxt").css({top:e.pageY,left:e.pageX});
})
</script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
{<html> <head> <body> <table border="1"> <tr> <td> personal </td> </tr> </body> </head> </html>
Comment: I want to change the size of personal box in html.
You can do inline styles for those elements.
For example:
<div style="width: 100px; height: 100px;"></div>
But you should really use CSS which you can declare at the inside the the tags in your html
<head>
<style>
div {
width: 100px;
height: 100px;
}
</style>
</head>
You can find more information on CSS if your just starting out at w3schools.com
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In a page of my web, I have a textarea to write html code. How to show this html result of this textarea into a other view under this texterea.
You are looking for a WYSIWYG for angular:
Angular WYSIWYG directive
textangular
angular-redactor
angular-froala
List provided here as well: http://ngmodules.org/tags/wysiwyg
<html>
<head>
<meta name="description" content="quick edit panel" />
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div class="prompt" contentEditable=true
style="padding:5px;
background-color:black;
height:28px;
color:white;
font-family:'courier new'">
write a html code <span style="background-color:blue;">here</span>
</div>
<div class="result">
write a html code <span style="background-color:blue;">here</span>
</div>
<script type="text/javascript">
$('.prompt').focus();
$('.prompt').keypress(function(event){
if ( event.which == 13 ) {
var resultado = $('.prompt').html();
console.log(resultado);
$('.result').append($('<div/>').html(resultado).text()+"<br>");
$('.prompt').html('');
$('.prompt').focus();
}
});
</script>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I did this in JSfiddle:
http://jsfiddle.net/jocelynwang205/qSjn6/
It is supposed to turn a paragraph black, but it seems that the function cannot be called. It does not work on a real webpage either.
Later I added my JavaScript to the html in JSfiddle, like this:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
</script>
<p id="para1">
This is a paragraph to be changed.
</p>
Turn black.
And it worked: http://jsfiddle.net/jocelynwang205/qSjn6/1/
So I want to know why. Thanks in advance.
the original doesnt work because you have onlick instead of onclick, and do not have the code running in the head but in a onload function (settings are on the left side) causing the function to be invisible to the onclick attr
JSFiddle defaults to the javascript being run in a onLoad function so basically your code was being run like below:
<script>
window.onload = function(){
function changeA(){
document.getElementById('para1').style.color ='black';
}
};
<script>
which makes the function changeA invisible to the html onclick attribute
changing the setting to "no wrap - in head" makes it run like:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
<script>
which now makes it visible to the html
Below is a screenshot of where the setting is:
in the jsfiddle you specified onlick instead of onClick.
Turn black.
change it to
Turn black.
in the link, and set option No wrap in from left hand side of jsfiddle.
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#para1
{
color: red;
font-weight: bold;
}
</style>
<script type="text/javascript">
function changeA()
{
document.getElementById('para1').style.color ='black';
}
</script>
</head>
<body>
<p id="para1">This is a paragraph to be changed.</p>
Turn black.
</body>
</html>
Try this.