For some reason the svg arrows in my slippery slider do not show online. Works fine on my desktop, then when I upload to ftp, it does not. The svg file was provided, and I have even re-saved and replaced it, to no avail. Any ideas?
http://threeriversahec.org
html script:
<!-- SLIPPRY SLIDESHOW SCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="slippry/dist/slippry.min.js"></script>
<link rel="stylesheet" href="slippry/dist/slippry.css">
<link rel="stylesheet" href="style.css">
slippry/dist/ > css script:
slippry/dist/assets/ > svg file
.sy-controls li a:after {
content: "";
background-image: url(assets/arrows.svg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
text-indent: 0;
line-height: 2.8em;
color: #111;
font-weight: 800;
position: absolute;
background-color: #fff;
width: 2.8em;
height: 2.8em;
left: 50%;
top: 50%;
margin-top: -1.4em;
margin-left: -1.4em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Your arrows.svg file is being served with the wrong Content-Type/MIME type. If you look at the "Net" tab of you browser dev tools, you will see that it is being served as "text/html". It should be "image/svg+xml". You need to configure your web server so that it serves SVG files with the correct type. How you do that depends on which web server you are using.
Another workaround is to save the arrows.svg file as a PNG file with transparency (I used Illustrator), and replace all occurrences of 'arrows.svg' with 'arrows.png' in the Slippry CSS file.
Related
I'm having my html-css practice day. Right now, the NAV-Bar-Menus are appearing on the upper left of the screen (vertically). I have tried checking CSS cheat sheet regarding display, flex, etc., google, and all but its still not working. Any help for a newbie would be appreciated :)
Here's the CSS:
<style>
.nav-bar {
display: flex;
align-items: center;
width: 100%;
padding: 10px;
font-family: Arial;
background-color: orangered;
color: white;
font-size: 20px;
text-decoration: none;
list-style: none;
margin: 0;
}
</style>
and here's the HTML:
<nav>
Home
Wordpress+
Web Design+
Graphic Design
Inspiration
Contact
About
</nav>
I currently have an App_Offline.htm file that works fine. When it's on the root of the site, all users are forces to the App_Offline.htm page and the application is prevented from loading.
We are adding some animations and images and the only proper way to do it in an App_Offline.htm is to use base64 images, inline.
The minute I add this (note I shortened the base64 for the post), it works if I go to the file in the browser directly but IIS/Azure/App Service, does not automatically force users to the page and prevent the app like it normally does.
.image2 {
width: 57px;
height: 54px;
background-image: url(data:image/png;base64,iVBOR.....rkJggg==);
}
I figure there some content security setting or something I need add. Even though the page loads properly, what's preventing IIS/App Service from forcing everyone to the page when it has a base64 image?
Unless there's a file limit size, it's current 2896 KB, but from research there doesn't seem to be one.
Normally, when you have the app_offline.htm file in the application root directory, your web application will be closed and all requests will be directed to the app_offline.html page.
So you have two ways,
You can write .image2 related code in app_offline.htm
Put the .css on other websites, or use other addresses to access the files.
Related Post
Add css style sheet to app_offline
PRIVIOUS
For more details, you can refer my sample code, you just need to replace base64 image code.
My test result.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body {
font-family: "Open Sans";
}
h1 {
font-size: 90px !important;
}
.error-page-container {
color: #333333;
margin: 50px auto 0;
text-align: center;
width: 600px;
}
.error-page-container h1 {
font-size: 120px;
font-weight: normal;
line-height: 120px;
margin: 10px 0;
font-family: "Open Sans";
}
.error-page-container h2 {
border-bottom: 1px solid #CCCCCC;
color: #666666;
font-size: 18px;
font-weight: normal; /*text-transform: uppercase;*/
font-family: "Open Sans";
}
.error-page-container a {
text-decoration: none;
color: #ffffff;
background-color: #009AD7;
padding: 11px 19px;
}
.error-page-container a:hover {
text-decoration: none;
}
.image2 {
width: 500px;
height: 300px;
background-image: url('data:image/png;base64,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');
}
</style>
<title>
Under Maintenance
</title>
</head>
<body>
<div class="error-page-container">
<h1>Maintenance</h1>
<div class="image2" src="" alt="test">
</div>
<h2>
<p>Website is under maintenance right now. It will be back in few minutes.</p>
</h2>
<br />
Try again
</div>
</body>
</html>
What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
Sprite image and Firebug screen captures at http://imgur.com/a/JbYv9. Please look, lots of information there.
The site works in asp.net (now converted to php) and xampp. Not at bluehost. The CSS line background: url('../images/imgmap3.jpg'); shows "Failed to load the given url" in Firebug on bluehost but successfully loads in all other environments.
The hotspots are present on the page and work when the whole site is present. But there are no images other than that associated with #container.
It looks like some kind of permissions problem to me, but the preceding background: #fff url(../images/home2.jpg) no-repeat; statement works in all cases - same directory, same 644 permissions, same owner. I did have to add an .htaccess file to this site's root folder pointing to index.htm.
I really don't have any more hair to yank out. I'm pretty sure the problem is something simple, but I just don't see.
Ideas?
#container {
width: 760px;
height: 100%;
min-height: 500px;
border: none;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: #fff url('../images/home2.jpg') no-repeat;
position: relative;
height: 500px;
}
#homeSpacer {
height: 236px;
width: 780px;
}
#hmMenu {
width: 523px;
height: 157px;
background-image: url('../images/imgmap3.jpg');
background-repeat: no-repeat;
margin-top: 0px;
margin-left: 167px;
margin-bottom: 10px;
padding-top: 0px;
position: relative;
}
#hmMenu li {
margin: 0px;
padding: 0px;
list-style: none;
display: block;
position: absolute;
/*border: solid 1px #000;*/
}
#hmMenu a {
display: block;
}
#hmMenu li a b {
display: none;
}
#imgWebsites {
left: 0px;
top: 60px;
width: 268px;
height: 97px;
}
#imgConsulting {
left: 76px;
top: 10px;
width: 192px;
height: 50px;
}
#imgDatabase {
left: 288px;
top: 37px;
width: 235px;
height: 83px;
}
#imgContact {
left: 332px;
top: 0px;
width: 98px;
height: 33px;
}
#imgWebsites a {
height: 97px;
}
#imgConsulting a {
height: 50px;
}
#imgDatabase a {
height: 83px;
}
#imgContact a {
height: 33px;
}
#imgWebsites a:hover {
background: transparent url('../images/imgmap3.jpg') 0px -217px no-repeat;
}
#imgConsulting a:hover {
background: transparent url('../images/imgmap3.jpg') -76px -167px no-repeat;
}
#imgDatabase a:hover {
background: transparent url('../images/imgmap3.jpg') -288px -194px no-repeat;
}
#imgContact a:hover {
background: transparent url('../images/imgmap3.jpg') -332px -157px no-repeat;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sprite problem simplified</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="homeSpacer"></div>
<ul id="hmMenu">
<li id="imgWebsites" title="Website Design and Construction"><b>Website Design and Construction</b>
</li>
<li id="imgDatabase" title="Microsoft SQL Server Database - Design, Code and Tune"><b>Microsoft SQL Server Database - Design, Code and Tune</b>
</li>
<li id="imgConsulting" title="Consulting Services"><b>Consulting Services</b>
</li>
<li id="imgContact" title="Contact e-greymatter.com"><b>Contact e-greymatter.com</b>
</li>
</ul>
</div>
</body>
</html>
It's probably a classic ex-windows-dev error (hangs head in shame). On windows, filenames aren't case sensitive. Linux is more stringent. Fixed camel filename to all lowercase.
Original site was on IIS; test site was running on xampp - both win machines. Stupid me.
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo