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;
}
}
Related
<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
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.
Can't figure out why the background image is not showing... Used / and \ , short and long path... Any cue would be appreciated. Thanks
<head>
<title>Restaurant Lambda</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--Menu-->
<header>
<div class="container">
<nav class="topnav">
Home
About
Ingredients
Menu
Reviews
Reservation
</div>
</nav>
</header>
</body>
.countainer {
background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}
There are actually 3 reasons this might be happening.
In the div, it says <div class="container"> but in your css, you have
.countainer {
background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}
So you would need to fix the spelling error.
Put the file and the image in a folder, then link it like
.container {
background: url("folder/imagename") no-repeat 0 0;
}
Fix your formatting
In the code block, you've got <div> then <nav> but you end with </div> then </nav> so after reformatting your code, it should look like
<div class="container">
<nav class="topnav">
Home
About
Ingredients
Menu
Reviews
Reservation
</nav>
</div>
As well as the typo in your class name (the extra 'u' in container/countainer), your syntax is incorrect. You are closing the nav after you've closed the div, instead of the other way around.
Correct these errors, and your image should show correctly (given that your path is correct)
.container {
height: 100vh;
background: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg") no-repeat 0 0;
}
nav {
text-align: center;
}
nav a {
color: white; /*added for better visibility*/
font-weight: bold;
}
<body>
<!--Menu-->
<header>
<div class="container">
<nav class="topnav">
Home
About
Ingredients
Menu
Reviews
Reservation
</nav>
</div>
</header>
</body>
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
This question arises when I tried the proper solution to a container which had multiple internal divs.
This works fine with a simple div in body
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#990000;
}
-- well ain't that typical of this week: 60 hours of work creating by the book html and 1/10th is billable because it does not work: instructions don't work though followed to the letter; and they say nothing about having to highlight the entry and then hit tab to make id show up in the draft window!--
Why doesn't this work in a more complex page wherein the #wrapper becomes #container_toolbox with several more divs within it. In both I.E. and Mozilla there is always a gap at the right. Why?
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#99000;
}
Now, if I replace the first code with second in a test page, it works perfectly. Why, when there are nested divs within this #container_toolbox, does it not work.
I am using both Dreamweaver and Aptana'a download to create pages.
here are the two samples: the first is the one that works:
<head>
<title>ggggg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color: #990000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container_toolbox">
<p> in mature regions, and changes of focus among a large
pack of shops as various markets undergo change. How do you pick the right one to
work with you at any point in time? -- Well, maybe you shouldn't pick one.</p>
</div>
</body>
Here is the one that doesn't work I've had to eliminate html5 tags frequently:
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Toolbox</title>
<link href="../styles/toolbox_stylesheet.css" rel="stylesheet" type="text/css">
<link href="../styles/basic_style_2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" >
document.createElement("header");
document.createElement("hgroup");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("nav");
</script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
}
</style>
</head>
<body>
<div id="container_toolbox">
<!--start container for page-->
<!--top section includes: header with logo; aside with contact info...
site navigation-->
<div id="head">
<div id="logoDiv"><img src="../images/headerLogo.jpg" alt="Fabshops.com"></div>
<div class="aside" id="contactAside">
<p>Phone: (973) 738 2599</p>
<p>Email: info#fabshops.com </p>
</div>
<div class="nav f" id="mainNav">
<ul class="navul" id="ulMainNav">
<li>Home</li>
<li>Equipment Types</li>
<!--<li>About</li>-->
<li>Contact</li>
<li>Newsletter</li>
<li>Toolbox</li>
</ul>
</div>
</div>
<div id="accentLine"> </div>
<!--body section includes: inner navigation; articles; aside-->
<!--*********************************************************************-->
<!--*********************************************************************-->
<article id="content_toolbox">
<!--begin content section-->
<!--*********************************************************************-->
<!--begin sideNav-->
<nav class="nav" id="sideNav">
<div class="nav" id="sideHeader">
<h2>Tool Box</h2>
</div>
<div id="lowerNav">
<ul class="sidenavul" id="sideNavList">
<li>Home</li>
</ul>
</div>
</nav>
<!--End sideNav-->
<!--*********************************************************************-->
<section class="sectionhd_toolbx" id="sectionhd_toolbx">
<!--begin contents of section head-->
<h1>Select the converter appropriate for your purposes.</h1>
<h2>Make sure your browser permits Javascript</h2>
<!--end contents of lead article-->
</section>
<!-- ******************************************************************** -->
<!--<section id="section_toolbx">--><!--begin contents of second article--><!--end contents of second article-->
<!--</section>-->
<!--end content section-->
<section id="toolbox">
<!-- Put the toolbox into a table as margin-left/rignt:auto is not working here -->
<!-- Begin toolbox table -->
<table class="tbtoolbx" id="tbtoolbox">
<tr>
<td id="tdleft"> </td>
<td id="tdmiddle">
<!--begin iframe section-->
<p>Volume & Capacity |
<a href="PressureConverter.html" target="calcIframe">Pressure
Converter</a> | <a href="LengthConverter.html" target="calcIframe">Length
Converter</a> | <a href="WeightConverter.html" target="calcIframe">Weight
Converter</a> | <a href="CurrencyConverter.html" target="calcIframe">Currency
Converter</a><br>
Temperature Converter</p>
<iframe name="calcIframe" src="../toolbox/Capacity_Volume.html" scrolling="no">You
need a Frames Capable browser to view this content. </iframe>
<!--end iframe section--> </td>
<td id="tdright"></td>
</tr>
</table> <!-- EndBegin toolbox table -->
</section>
</article>
<!-- ************************************************************************* -->
<!--***************************************************************************-->
<!--footer-->
<div class="footer" id="foot">
<p><Home | Equipment Types | <a href="../About/OurShops.html">Our Shops | Contact | Newsletter | Toolbox</p>
<p>Fabshops.com is a subdivision of Ridgeback Company, Inc</p>
<p>Headquarters: 61 Ormont Road, Chatham, NJ 07928</p>
<p>Web site designed by <a>TutorWright</a></p>
</div>
<!--end container for page-->
</div>
</body>
</html>
Chances are your inner divs have margins that are overflowing the container div and, in effect, becoming margins on it. Try {overflow: hidden;} on the wrapper.
It's hard to say for sure without some HTML or a demo, however.