<div class="row">
<div class="column">
<img src="phone.png" alt="Phone" class="column1" />
<p>Walnut MagSafe Stand</p>
<p>$120</p>
</div>
<div class="column">
<img src="laptop.png" alt="Laptop" class="column2" />
<p>Walnut Laptop Riser</p>
<p>$150</p>
</div>
<div class="column">
<img src="tablet.png" alt="Tablet" class="column3" />
<p>Walnut iPad Stand</p>
<p>$80</p>
</div>
<div class="column">
<img src="pc.png" alt="PC" class="column4" />
<p>Walnut Monitor Stand</p>
<p>$100</p>
</div>
</div>
CSS
.row {
width: 100%;
margin: 50px 0 50px 0;
}
.column {
float: left;
width: 25%;
height: 434px;
}
.column p {
font-family: "Roboto", sans-serif;
font-family: "Roboto Condensed", sans-serif;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
line-height: 21px;
font-size: 14px;
letter-spacing: 0.7px;
text-align: center;
color: #a0a0a0;
}
.column1:hover {
background: url(products/walnut-magsafe-stand-hover.jpg);
}
Hello everyone on the Internet or on the stackoverflow.
I'm new in web development and I'm cloning some websites on the internet.
Now I need to create an image than when I hover on this image should be changed.
I tried something like this(
.column1:hover {
background: url(products/walnut-magsafe-stand-hover.jpg);
}
) but it doesn't work.
So guys what do I need to do now? Can you solve this problem???
A simple static implementation.
a {
background: url("https://i.stack.imgur.com/gROnM.jpg");
background-repeat: no-repeat;
background-size: contain;
width: 200px;
display: flex;
height: 200px;;
}
a:hover {
background: url("https://i.stack.imgur.com/hMQdU.jpg");
background-repeat: no-repeat;
background-size: contain;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
</body>
</html>
As provided by Authentic Science, img src and background are not the same. When you are trying to do
.column1:hover { background: url(products/walnut-magsafe-stand-hover.jpg); }
You are only changing the background of the img not the img src tag.
If you do not want to initially set the background of the column to the first image you wish to use and then use a hover effect, you will need to use JavaScript. This can be done by changing your classes for each "column#" into ids and inserting this JavaScript code by creating a script.js in your source folder
If you wish to use this solution you will need to duplicate the code for each column and rename them accordingly. This can all be done in one file.
// Define your variables for column1 img
let col1 = document.getElementById('column1');
let col1OriginalSource = 'phone.png';
let col1NewSource = 'phone2.png';
// Event fires when mouse enters
// Changes the value to your stored change src reference above
col1.addEventListener('mouseenter', function (event) {
event.target.src = col1NewSource;
});
// Event fires when mouse leaves
// Resets the value back to the stored src reference above
col1.addEventListener('mouseleave', function (event) {
event.target.src = col1OriginalSource;
});
The reason for storing the source references as a variable is to allow for easy modification in the future. This will put each of your src references in one spot and you will only need to change that one string to update your src. You can also initially set the value of the img src using JavaScript and completely remove the inline HTML tag to make it a complete dynamic reference.
Your HTML5 / index.html file should look like this
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Document</title>
</head>
<body>
<div class="row">
<div class="column">
<img src="phone.png" alt="Phone" id="column1" />
<p>Walnut MagSafe Stand</p>
<p>$120</p>
</div>
<div class="column">
<img src="laptop.png" alt="Laptop" id="column2" />
<p>Walnut Laptop Riser</p>
<p>$150</p>
</div>
<div class="column">
<img src="tablet.png" alt="Tablet" id="column3" />
<p>Walnut iPad Stand</p>
<p>$80</p>
</div>
<div class="column">
<img src="pc.png" alt="PC" id="column4" />
<p>Walnut Monitor Stand</p>
<p>$100</p>
</div>
</div>
<!-- Insert the script tag here after the DOM elements -->
<script src="script.js"></script>
</body>
</html>
You can read the documentation for both event listeners here:
For mouseenter click here
For mouseleave click here
Related
I am trying to finish a project but I am stuck on the final step.
All I want to do is put some text on the side of an interactive google map. However so far no matter what I have tried the text stays underneath. Here is the HTML code:
<!--Reach out section begins-->
<section id="reach-out" class="contact">
<h2 class="section-title secondary-border">
<p>Reach Out</h2></p>
<div class="contact/info">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
>
</iframe>
</div>
<div>
<h3>Pump Buddy</h3>
<p>
Any questions or concerns before signing up? <br />
Let us know, and we will be happy to talk to you.
</p>
<address><!-- <address>: Defines the contact information
for the author or owner of the document or parent element.-->
55 Main Street<br />
Some Town, CA<br />
12345<br />
P: 555.PUMP.BUDZ (555.786.2839)<br />
E: info#pumpbuddy.io
<!-- Using the mailto: prefix in the anchor tag's href attribute
instructs the browser to open the default mail client application
upon clicking the link and then populates the address field with
the email address listed in the href value. -->
</address>
</div>
</section>
</body>
and this is the corresponding CSS:
/* REACH OUT STYLES START */
.contact {
text-align: center;
background: #024e76;
}
.contact h2 {
color: #fce138;
}
.contact-info iframe {
width: 400px;
height: 400px;
}
/* This is a potentially
dangerous choice due to possible side effects
(unless a global rule is needed). By using the
class (contact-info) as the CSS selector, also called a class
selector, we can safely target the <iframe> that
is a descendant or child of the element with this class.*/
.contact-info div {
width: 410px;
display: inline-block;
vertical-align: top;
text-align: left;
margin: 30px 0 0 60px;
color: white;
}
.contact-info h3 {
color: #fce138;
font-size: 32px;
}
.contact-info p, .contact-info address {
margin: 20px 0;
line-height: 1.5;
font-size: 20px;
font-style: normal;
}
.contact-info a {
color: #fce138;
}
/* REACH OUT STYLES END */
Any kind of help would be greatly appreciated!
Try this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-5">Reach Out</h2>
<div class="row">
<div class="col">
<div class="text-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
></iframe>
</div>
</div>
<div class="col">
<div class="">
<h3>Pump Buddy</h3>
<p>Any questions or concerns before signing up? <br> Let us know, and we will be happy to talk to you.</p>
<address>
55 Main Street<br>
Some Town, CA<br>
12345<br>
P: 555.PUMP.BUDZ (555.786.2839)<br>
E: info#pumpbuddy.io
</address>
</div>
</div>
</div>
</div>
</body>
</html>
Use z-index and set position property to absolute or fixed for the text you want to display over the map.
I am learning HTML and want to make a website. I had a question about navigation and I attached a picture for reference.
Basically, my menu will give user some choices (A and B). As a generic example, let's say this is a tutoring website that asks how the user wants to learn. A is video learning and B is reading tutorial learning. No matter the choice, they will navigate to the options page. In this case, it can ask what subject they would like to learn. 1 can be Science, 2 can be Math, 3 can be English. Then, based on the choice from the menu page, they navigate to one of the landing pages. So, A1 would be video science lessons while A2 would be video math lessons and A3 would be video English lessons. My question is: is it possible to have only one options page and navigate to one of the landing pages by using if statements that saved the user's selection of A or B from the menu page?
Updated example,
In the starting page:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="example.css" />
<style>
*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}
html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}
main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}
h2{font-size: 26px;}
p{font-size: 18px;}
.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}
a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}
</style>
<script src="example.js"></script>
<!-- Script below is not needed, it’s only for testing the variable, load the script at "body" onload then print the saved variable at div "#print-saved-value" -->
<!-- Session Storage is for temporary store until user’s browser is closed -->
<!-- Local Storage is for lasting store even after user’s browser is closed -->
<script>
function printingAorB(){
if (typeof(Storage) !== "undefined"){
localStorage.getItem("userChoice");
if (localStorage.userChoice === "isA"){document.getElementById("print-saved-value").innerHTML = "User choose A";}
else if (localStorage.userChoice === "B"){document.getElementById("print-saved-value").innerHTML = "User choose B";}
else {document.getElementById("print-saved-value").innerHTML = "Choice is blank";}
}
}
</script>
</head>
<body onload="printingAorB()">
<main>
<h2>The Start Page</h2>
<hr/>
<p>Below are option A and B. By clicking a link, the link will saving either variable "isA" or "B" and open "index2.html" page.<br><br><span style="color:#777">Session Storage is for temporary store until user’s browser is closed, while Local Storage is for lasting store even after user’s browser is closed.</span></p>
<div class="buttons-container">
<!-- Saving the variable to be used for next session, the index2.html -->
<a onclick="localStorage.setItem('userChoice', 'isA');" href="index2.html">A is good</a>
<a onclick="localStorage.setItem('userChoice', 'B');" href="index2.html">B is not bad</a>
</div>
<div id="print-saved-value"></div>
</main>
</body>
</html>
Then the page before the destination, say it is "index2.html",
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
<!-- Script is loaded at body onload but can be placed at page’s bottom. Used by Version 1. -->
<script>
/* Version 1: load the saved variable then changing the landing page href based on the saved data. */
function changeLinks(){
/* Button/choice 1 */
document.getElementById("choice-1").onclick = function(){
localStorage.getItem("userChoice");
var destination1 = document.getElementById("choice-1");
if (localStorage.userChoice === "isA"){
destination1.setAttribute("href", "page_1_a.html");
} else {destination1.setAttribute("href", "page_1_b.html");
} return false;
}
/* Button/choice 2 */
document.getElementById("choice-2").onclick = function(){
localStorage.getItem("userChoice");
var destination2 = document.getElementById("choice-2");
if (localStorage.userChoice === "isA"){
destination2.setAttribute("onclick", "location.href='page_2_a.html'");
} else {destination2.setAttribute("onclick", "location.href='page_2_b.html'");
} return false;
}
}
</script>
</head>
<body onload="changeLinks()">
<main>
<h2>The Bridge Version 1</h2>
<hr/>
<p>Below are Choice 1 to 2 (before 3 and the rest). The landing pages for this will be like: page_1_a.html, page_1_b.html, page_2_a.html, and so on...</p>
<div class="buttons-container">
<a id="choice-1">Choice 1</a>
<a id="choice-2">Choice 2</a>
</div>
</main>
<main>
<h2>The Bridge Version 2</h2>
<hr/>
<p>Below are Choice 1 to 2 (before 3 to the rest). The script at landing pages will determine either is it A or B.</p>
<div class="buttons-container">
<a id="choice-1" href="page_1.html">Choice 1</a>
<a id="choice-2" href="page_2.html">Choice 2</a>
</div>
</main>
</body>
</html>
And an example of page _1.html , when using 2nd version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
<!-- Showing content A or content B -->
<script>
function determine2ShowingAorB(){
if (typeof(Storage) !== "undefined"){
localStorage.getItem("userChoice");
if (localStorage.userChoice === "isA"){
document.getElementById("content-a").style.display = "block";
} else if (localStorage.userChoice === "isA"){
document.getElementById("content-b").style.display = "block";
} else {}
}
}
</script>
<style>
#content-a, #content-b{display: none;}
</style>
</head>
<body onload="determine2ShowingAorB()">
<main>
<h2>The Landing, Page 1</h2>
<hr/>
<p>Below will be content of A or B. If there’s nothing, then the variable is not loaded.</p>
<div id="content-a">
<h1>This is content A</h1>
</div>
<div id="content-b">
<h1>This is content B</h1>
</div>
</main>
</body>
</html>
Maybe you meant by different html page then you can use a href. Using jQuery rather than javaScript.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<div class="menu">
<button id="button-A">Choose A</button>
<button id="button-B">Choose B</button>
</div>
<div class="options">
<button id="button-1">Choose 1</button>
<button id="button-2">Choose 2</button>
<button id="button-3">Choose 3</button>
</div>
<div class="landing">
<span id="A-1">This is A 1</span>
<span id="A-2">This is A 2</span>
<span id="A-3">This is A 3</span>
<span id="B-1">This is B 1</span>
<span id="B-2">This is B 2</span>
<span id="B-3">This is B 3</span>
At Script (here is only button A and button 1):
// Button A-B
$('#button-A').click(function(){ // When button A is clicked,
localStorage.setItem('optionAorB' , 'A'); // Save the value of "optionAorB" to local storage, as "A"
$('.options').fadeIn(); // Show the options from first option,
$('.menu').fadeOut();
});
// Button 1-2-3
$('#button-1').click(function(){
var destination = localStorage.getItem('optionAorB'); // Load the value either it’s "A" or "B"
$('.menu').hide();
if (destination == 'A'){$('#A-1').css('display', 'block');} // Show specific landing page 1, if it’s A,
else {$('#B-1').css('display', 'block');} // If it’s B
});
While in CSS (style):
.menu, .options{
height: 100%;
width: 100%;
margin: 0;
display: block;
position: relative;
}
.options{display: none}
#A-1, #A-2, #A-3, #B-1, #B-2, #B-3{
background: #9C3535;
color: #B4BD90;
min-height: 20px;
width: 80%;
margin: 10%;
display: none;
position: relative;
}
#B-1, #B-2, B-3{
filter: hue-rotate(180deg);
}
I just got into html and css recently and am kinda stuck on this one. Im working on a login box and I cannot get the login box and the submit button to be perfectly aligned with each other.
The only way that kind of worked was if I wrote them both on one line like this, then they would be (horizontally) perfectly aligned but I wasnt able to change the space between them:
First attempt (code without the Dot after <):
<.input type="text" id="username">submit
Then I worked it out in some other way. It consists of an input type text and an input type submit in my html file.
In my CSS file im first calling the the Class in which all my login Inputs are nisted (.logsec for login section) and then the id of my input type text and input type submit.
The Class is called logsec (for Login section) and my input type submit is called id=Button and my input type text is called id=subinput.
HTML CODE:
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font.css">
<head>
<meta charset="utf-8">
<title>Main</title>
</head>
<body>
<div class="container">
<div class="brandname">
<h1 <id="title" class=""><span id="logo">Test</h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="submit" id="button" value="submit" style="float:right"/>
<input type="text" id="subinput" style="width:100%;"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
</body>
</html>
CSS CODE:
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
.logsec [id=button] {
vertical-align: top;
Would really love if someone could help me out here.
Im terrible at it but i would Hope someone can help me.
Thanks Guys.
There were some errors in your code, one of which ".logsec [id=button]" was stopping the button lining up. I removed the float and used inline-block instead. Google it, I'm sure the W3C has some tutorials. Anyway, here's the working code:
CSS
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
#subinput {
display: inline-block;
}
HTML
<div class="container">
<div class="brandname">
<h1 id="title"><span id="logo">Test</span></h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="text" id="subinput"/>
<input type="submit" id="button" value="submit"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
Here it is working in a fiddle (I hope, not sure how long the code saves for)
FIDDLE
I just started learning webdesign and I'm having this ongoing problem and I've posted a question about it before. Everything I tried didn't work but I made a few changes so I wanted to rephrase the question and add some more details.
I'm making a simple website for a Romanian artist and it will have an English version and a Romanian version (switching languages with tiny flags in the nav bar).
It's all written in WordPad, using just html and css, and all pages are in the same root folder. I have several html files and one css file (so it's an external file), which is linked in the head of each page. I have English versions and Romanian versions and they're all linked accordingly from the navigation.
Now, my issue is that the CSS will only work on the main English page and refuses to on any of the others, no matter which language, despite all of them having the same head, header and footer structure.
I tried Firefox and Chrome and it's the same story.
I clicked on "Page Source" on all the pages when opened in a browser, corrected any errors showing up, and the link to the css and all pages works when I click it.
I initially had several CSS files, one for each html file, but I deleted them except for one (I misunderstood the process initially and didn't realize they can all have the same css file). So now there is only one CSS file in the root folder "Style.css".
All html files are saved in "Unicode" encoding.
Except for the modified words, this is the exact css, as well as html structure of the main English page (on which the CSS works):
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<article class="figures">
<figure>
<img src="images\painting.jpg" width="335" height="325" alt="painting">
<figcaption>Paintings from 2010 - 2015</figcaption>
</figure>
<figure>
<img src="images\2.jpg" width="335" height="325" alt="painting 2">
<figcaption>2009 - 2000</figcaption>
</figure>
<figure>
<img src="images\3.jpg" width="335" height="325" alt="painting 3">
<figcaption>1990 - 1999</figcaption>
</figure>
</article>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
This is a page on which the same CSS doesn't work:
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name News</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<h2>What's New</h2>
<h3>Upcoming exhibitions:</h3>
<ul>
<li>July 2016</li>
<li>October 2016</li>
</ul>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
Which might work on this website, but I swear, it won't work in my browsers.
It's driving me nuts.
I'd be extremely grateful for any help!
EDIT:
This is what shows up in the developers console for the 'News' page:
And this is the root folder:
Try this inside your <head>
Source: w3schools
<base href="http://www.yourwebsite/" target="_blank">
Well it is working for me... make sure that the html and css files actually are in the same folder
/folder
--thing.html
--other.html
--style.css
And as pointed out in comment don't use c:/ to referer to files
ok i have the following html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>marriage</title>
</head>
<body>
<div id="container">
<div id="logo">
<h1>marriage logo</h1>
</div> <!-- end logo -->
<div id="input">
<input type="text" name="search" id="search" />
<input type="submit" value="search .." />
<p>search for words like: calm, honest ... etc</p>
</div> <!-- end input -->
<div id="questions">
<h2>Why our website ?</h2>
<p>because you find your soulmate as easy as possible, just type the word you looking
for in your soulmate and press enter to start searching</p>
</div> <!-- end questions -->
<div id="side">
<p>New User or signup if not</p>
</div> <!-- end sidebar -->
<div id="footer">
Copyrighted © 2012
</div> <!-- end footer -->
</div> <!-- end of container -->
</body>
</html>
and here is the scss file for styling and I'm using 960 grid system for layout
#import "compass";
#import "960/grid";
$ninesixty-columns: 12;
html, body {
#include background-image(linear-gradient(#fcfad0, #FFF));
width: 100%;
height: 100%;
}
#container {
#include grid_container;
#logo {
#include grid(6);
// #include clearfix;
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
text-indent: -9999px;
a {
text-decoration: none;
}
}
}
}
the background image in <h1> tag is not showing with the html file, i don't know why .. is there something missing here ?
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
}
I see you use Compass. So you have configured the directory containing the images (ie images_dir) in your configuration file.
Instead of to call directly your image, you shoud use the image-url() helper, like this (without specifying the directory images):
background: image-url(logo.jpg) no-repeat;
Also, if you want to hide the text, you can use the mixin #hide-text. And finaly, perhaps that the #replace-text-with-dimensions mixin is what you want:
h1 {
#include replace-text-with-dimensions(logo.jpg, 0, 0);
}
However, I imagine you want to make the logo clickable. In this case, the code will be:
<h1 id="logo">marriage logo</h1>
and:
#logo {
a {
#include replace-text-with-dimensions(logo.jpg, 0, 0);
display: block;
}
}