Here is the full code:
https://www.w3schools.com/code/tryit.asp?filename=FVPUZUO2Z6YQ
For some reason, my link is hidden only when I'm using sponsor-link class. Every other class is okay, even if other classes are identical, like button-link class:
<html>
<head>
<style>
.button-link {
}
.sponsor-link {
}
</style>
</head>
<body>
<a href="aaaa" class="sponsor-link">
11111
</a>
</body>
</html>
How is it making any sense? What is the actual problem with the class name sponsor-link?
This is due to Ad Block being enabled. Pause it on the page you're working on and then you'll see that sponsor-link style will work. But of course, your best bet is to change the name of that style.
Related
I'm trying to create a hover that will change the picture. A lot of tutorials tell me to try onmouseover and onmouseout. But Brackets (the program I use to code) isn't able to find the second picture called "test2.png". Does anybody know how I could handle the issue, preferably using only HTML.
Here are the tutorials I watched that show what I would like to achieve:
https://www.youtube.com/watch?v=qtpa_r1ILjo
https://www.youtube.com/watch?v=y4RJDUI7M8Y
<!DOCTYPE html>
<html>
<head>
<title>Portfolio V1</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script type="text/javascript"></script>
</head>
<body>
<img src="images/test1.png" onmouseover="this.src=images/test2.png" onmouseout="this.src='test1.png'" >
</body>
</html>
You need to make sure that both images exists and in the correct folder.
Make sure that the name is exactly the same as you write it in your code.
One of the problems you had is that you didn't wrap the name of the image (in onmouseover with quotes: 'images/test2.png').
In the onmouseout you set the image to test1.png instead of images/test1.png. Is it intended?
Here is a working example:
<img src="https://dummyimage.com/600x400/000/fff" onmouseover="this.src='https://dummyimage.com/600x400/f00/fff'" onmouseout="this.src='https://dummyimage.com/600x400/000/fff'" >
I made an example with background-color, but the principle is here.
You can check the code :
const div = document.querySelector('div');
window.addEventListener('mouseover', () => {
div.style.background = 'red'
})
div {
width: 100px;
height: 100px;
opacity: 1;
background-color: green;
transition: 3s;
}
<div></div>
You have to use JavaScript to make this work. It won't work inplace like you have tried.
EDIT: It does work inplace, but you have missed the single quotes.
In the onmouseover attribute you should refer to a JavaScript function. Have a look at this question about onmouseover for more information.
For example you could use something like this:
<img src="images/test1.png" onmouseover="MouseOver(this)" onmouseout="="MouseOut(this)" >
Now you refer to event handlers for the onmouseover and onmouseout event. However, these event handlers still need to get defined in a javascript snippet. This could get embedded in the element like this:
function MouseOver(myimg) {
myimg.src="images/test2.png";
}
function MouseOut(myimg) {
myimg.src="images/test1.png";
}
I created a <div> element and I'm going to use below css style withing the <div> element.
#girls {
background-image: url("girl.gif");
}
Here is my HTML <div> element (This element contains in index.html page):
<div id="girls">
<p>
<b>Girls chat:</b> at the lounge, we're committed to providing you, our guest, with an exceptional
experience every time you visit. Whether you're just stopping by to check in on email over an elixir,
or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every
detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
</div>
But when I load index page, the background image (girl.gif) doesn't show up. Anyone can help me with this?
Try this:
#girls {
background-image: url("../girl.gif");
}
I'm guessing that the css is inside that stylesheet folder, that's why you need to go up a level to access girl.gif, thus the usage of ../
<!DOCTYPE html>
<html>
<head>
<title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
background-image: url('demo.gif');
height: 200px;
width: 50%;
}
</style>
<body>
<div id="girls">Sample Text
</div>
</body>
</html>
If you are using external CSS then Change your directory path of the image & try again.
else Inline Stlying go with the sample code
image link
https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif
I am doing a report and inside the report I have to render emails from different providers, this emails come with their own css (usually inline css but sometimes they apply general styles). I usually use iframes to encapsulate css so it doesn't breaks up mine but I can't use it now.
Is there a way to encapsulate css without the use of iframes?
here is an example of the problem I am having:
<html>
<head>
<style>
// I enclose it to content so it doesn't override the email css
#my_content table, #my_content p {
color: black;
}
</style>
</head>
<body>
<div id='my_content'>
... some stuff ...
<div id='email'>
<html>
<head>
<style>
table {
margin-left: 100cm; // screws up all my tables
}
.... some styles that should only apply inside the email div ...
</style>
</head>
<body>
.... email content ...
</body>
</html>
</div>
</div>
</body>
</html>
I could extract the html structure and just get what's on the body but then not all my emails will look as it should. Also the html must be valid so any suggestions would be great!
You can prepend #email to your css selectors, making them only apply to your div.
For example, change
.classname { display: block }
to
#email .classname { display: block }
Edit: If you have no control over the e-mail CSS as arxanas suggests, consider using LESS. Less is a CSS preprocessor that allows nesting of CSS selectors. If you include less.js, then you can do something like this:
#email {
CSS goes here
}
less.js will parse this and convert it to CSS.
You could try to check the E-Mail css part for collisions with Your own class names.
I just found this post which could be helpful for You:
Listing known CSS classes using Javascript
I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>
For example:
<html>
<head>
<link href="css/style1.css" type="text/css" />
<link href="css/style2.css" type="text/css" />
</head>
<body>
<div>I want to use style1.css within this div<div>
<div>I want to use style2.css within this div<div>
<body>
Is there any posible way to do like that ?
Thank you.
In your two files define different classes of div.
For instance, in style1.css you might have:
div.class1
{
background-color: red;
}
And in style2.css you might have:
div.class2
{
background-color: blue;
}
Then change your code to reflect where you want each style, ie:
<div class="class1">I want to use style1.css within this div<div>
<div class="class2">I want to use style2.css within this div<div>
As you wrote, this is not possible but you can give the div-tags id and format for the id only. So you only have to add one css file which gives you a better overview ,structre and the website is loaded faster.
The HTML Markup
<div id='first'></div>
<div id='second'></div>
and in the css
#first{
background-color:red;
}
#second{
background-color:green;
}
By using id's you ensure that the access is faster than by using classes. If you want to style the content of the div's differently you could also do that.
If I were you, I also would use classes to define which styles go to which div. However I would not use a separate stylesheet for each class. I would combine the two classes into one stylesheet, because like EvilP said, loading two separate css files can be slow.
Also, I would avoid using ids where a class can do the job as effectively, because an id is only used to target one specific element, and a class doesn't have to, but can target more than one element. So a class is more versatile overall.