I cant get a media query to affect the following. I need the svg object to change to height:100% #media(max-width:767px)
<object type="image/svg+xml" data="img/5/image.svg"></object>
<style type="text/css">
body {
overflow: hidden;
}
object {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: auto;
}
</style>
I had the same problem, I have noticed that after I added object tag to my page, something wrong happens with page resolution on the first load, I still didn't find an explanation for that, but for the mean time you may use one of the following tags instead of object.
Using an <embed> Tag
<embed type="image/svg+xml" src="image.svg"/>
Within an <iframe>
<iframe src="image.svg"/>
Using an <img> Tag
<img src="image.svg"/>
Using a CSS Background Image
#myelement
{
background-image: url(image.svg);
}
Advantages and disadvantages of loading SVG in the previous tags can be found in this great article: How to Add Scalable Vector Graphics to Your Web Page by Craig Buckler
happy codding :)
Related
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.
I have created a scalable SVG object, using the preserveAspectRatio and viewBox attributes in the SVG file itself:
<svg
…
width="800"
height="800"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 800 800"
…
In the HTML, I reference the SVG file using the <object> tag and wrap it an <a> tag (I want to do this so that I can style it later):
<a>
<object type="image/svg+xml" data="smiley.svg">
</object>
</a>
I style the <object> tag with some CSS to make it 50% wide, and no wider than 100%:
object {
max-width: 100%;
width: 50%;
}
The problem is that the anchor tag doesn't wrap all around the object!
Any ideas anyone?
Adding display: block to anchor seems to fix it for me.
I actually found a fully working solution at teamtreehouse.
It's a combination of inline-block and pseudo-elements.
Thomas Quayle made a pen of the example solution (replicated below).
a.svg {
position: relative;
display: inline-block;
width: 25%;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
object {
width: 100%;
}
<h1>SVG Link Demo</h1>
<blockquote>Replicated from Thomas Quayle's codepen example</blockquote>
<a href="http://google.com" class="svg">
<object data="http://openclipart.org/people/cjcreativedesign/PuppyLongEars.svg" type="image/svg+xml" class="mailicon">
</object>
</a>
<a href="http://google.com" class="svg">
<object data="http://openclipart.org/people/cjcreativedesign/PuppyLongEars.svg" type="image/svg+xml" class="mailicon">
</object>
</a>
<p>How cool is that?</p>
I think #CBroe has it: SVG can be interactive content, therefore it shouldn't be wrapped by anchor element:
w3.org/TR/html5/text-level-semantics.html#the-a-element: “Content model: Transparent, but there must be no interactive content descendant.”
Okay. I have an issue with an image within a div. Fixed image within a div to make parallax scroll.
Here is what I want to do.
I have a div. Here is code.
#container{
height: 500px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
overflow: hidden;
}
Now I want to add an image in there that is fixed.
#container-img{
position: absolute;
background-position:top center;
margin-right:0px;
bottom:0;
height: 500px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
display-inline: block;
}
My problem is I want image fixed within the div and it goes all over the place. I do not want to add image via css as I have it in Wordpress for someone to change image when they want via dashboard. Here is HTML
<div id="container" >
<img id="container-img" src="<?php echo get_template_directory_uri(); ?>/images/home.jpg"/>
</div>
I want the css to make image fixed and not go outside the div? Any solutions? Thanks.
display-inline: block; is not a valid CSS. Try using display: block. Also background-position:top center; is not needed as you don't have any background image specified.
I would suggest you still use a background image with a background-size: cover; or you will have a hard time distorting the image proportions.
You will need to put the image in a inline style on your container:
<div id="container" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/home.jpg')">
Hope that helps.
#menu{ background:#555;
display: block;
margin: 0px 0px 0px;
padding: 0px;
width:100%;
height:50px;
border-bottom:5px solid #CC3333;
}
i want remove spacing between the menu and the start web page
* /*Works for Non IE or IE 9 or +*/
{
margin:0;
}
for IE based & non IE both works on almost all versions
body
{
margin:0px
}
Assuming this is all that is on the page there is probably a padding being implemented on the element containing the menu.
Try doing a CSS reset first.
http://meyerweb.com/eric/tools/css/reset/
add that to the top of your CSS file and link to it from the HTML page.
After many hours I figured out why the links within my pngs in IE6 do not work.
It's because Im using filter:progid:dximagetransform.microsoft.alphaimageloader within my CSS. Yet after many more hours I have not found a solution to fixing these links.
Here is my code...
HTML
<div id="fullwidth-header-wrapper">
<div id="header"> <strong class="logo"> Google </strong>
<div id="nav">
<ul>
<span>
<span style="color: white;">Prefer</span>
Google? Click
here!
</span>
</ul>
</div>
</div>
</div>
CSS
#fullwidth-header-wrapper {
height: 120px;
}
#header {
background:url(../images/header-bg.png) no-repeat 50% 0;
height: 138px;
width: 980px;
margin: 0 auto;
position: relative;
top:0;
}
.logo{
background:url(../images/logo.png) no-repeat;
display:block;
width:500px;
height:125px;
position:absolute;
top:40px;
left:85px;
}
.logo a{
display:block;
width:323px;
height:85px;
text-indent:-9999px;
overflow:hidden;
}
#nav {
background:url(none.gif);
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/nav.png', sizingmethod='crop');
display: inline;
position: absolute;
top: -8px;
right: 30px;
width: 350px;
height: 75px;
z-index: 150;
}
#nav ul {
position: relative;
top: 18px;
left: 0px;
color: rgb(87, 175, 237);
font-size: 96.8%;
z-index:200;
}
#nav span {
color: #fff;
position: absolute;
top: 18px;
left: 0px;
font-size: 96.8%;
}
#nav a {color: rgb(255, 255, 255);}
How do you fix this issue or avoid this and suggestions re: a possible solution for the above?
Thanks!
Try this: http://www.hrunting.org/csstests/iealpha.html
In short:
What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work.
Since your #nav element has position: absolute, you'll need to add a wrapper div around that and absolutely position that instead.
This is often a problem with using a png fix on something that contains links, the Alpha version of the twinhelix png fix has apparently solved this issue. I have used it, its a little buggy still or at least it was a few months ago, but used right on small sites it is production ready http://www.twinhelix.com/css/iepngfix/.
I normally use the twinhelix 1.0 script for all our sites, I include an ie6.css stylesheet with a conditional comment aimed at IE6:
<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8">
<![endif]-->
Inside there you then in the CSS you just call it using the 'behavior' rule. IE 7 and 8 do transparent png's just fine. You do need to make sure you have a blank.gif 1px by 1px transparent gif somewhere and update the htc file (which really is just JS) to link to the path of that image.
#nav {
behavior: url(/css/iepngfix.htc);
}
I hope this helps
I had a similar problem, I was using a transparent background so I had to apply the png fix. I had a div and a link around it, like this:
<div id="bla"></div>
The links were not working at all in IE6. When I applied position: relative to that bla div, it worked! position: relative seems to work wonders on IE6, as well as float: left sometimes...