I have a issue with css sprite size across different web browsers. Some of the icons looks like another icon, laying underneath is displayed. There are sections where the same code shows differently the same icon on the web page.
Is this unit calculation problem? What is - in your - opinion best practise to resize sprite? Thanks for a discussion and your help!
HTML
<h1>Wideo</h1>
CSS
section h1 {
position: relative;
display: inline-block;
font-size: 1.9375rem;
font-style: italic;
letter-spacing: -0.0375rem;
line-height: 1.625rem;
word-break: break-word;
text-align: center;
margin: 0 0 1.25rem 1.5625rem;
}
section h1:before {
position: absolute;
top: 6px;
left: -40px;
font-size: 0.9375rem;
}
SPRITE CSS
section h1:before {
background-position: 0em -75.7em;
width: 2.2em;
height: 2.2em;
}
section h1:before {
content: '';
vertical-align: middle;
display: inline-block;
background-image: url(../svg/sprite.svg);
background-repeat: no-repeat;
background-size: 24em 82em;
}
Best regards,
Kuba
Related
I am wanting to implement an svg using the ::after pseudo-element. When I run my code, it works perfectly in Firefox,
but in Chrome the svg (down arrow) is non-existent.
There were quite a few questions and answers regarding this problem, but every one of them addressed a code issue that others were having and did not pertain to me.
My code follows:
HTML
<div class="select-box">
<div class="acronym">DRY</div>
<div>Don't Repeat Yourself</div>
</div>
CSS
.select-box {
position: relative;
display: flex;
padding: 8px 25px;
font-family: 'Catamaran', 'Arial', sans-serif;
font-size: 20px;
background-color: none;
border: solid 1px black;
border-radius: 12px;
color: black;
cursor: pointer;
& .acronym {
width: 55px;
color: #c29b69;
}
}
.select-box::after {
content: "";
display: block;
background: url("/arrow.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 22%;
width: 3.2rem;
top: 20px;
right: 0;
transform: rotateX(180deg);
}
I appologize. I wanted to include a codepen of the issue, but that would involve asset hosting to include the svg, which is a Pro plan. I am not a professional - just an amateur passionate about coding. Thanks for any help you can offer-up.
This snippet works - albeit with a different arrow SVG - on Chrome/Edge/Firefox on Windows 10. SO (imgur) does not allow SVGs to be loaded so the pointer SVG is hosted as a temporary one and won't be there forever.
.select-box {
position: relative;
display: flex;
padding: 8px 25px;
font-family: 'Catamaran', 'Arial', sans-serif;
font-size: 20px;
background-color: none;
border: solid 1px black;
border-radius: 12px;
color: black;
cursor: pointer;
}
.select-box .acronym {
width: 55px;
color: #c29b69;
}
.select-box::after {
content: "";
display: block;
background: url("https://ahweb.org.uk/temp2.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 22%;
width: 3.2rem;
top: 20px;
right: 0px;
transform: rotateX(180deg);
}
<div class="select-box">
<div class="acronym">DRY</div>
<div>Don't Repeat Yourself</div>
</div>
So what can be the problem? The only thing I can think of is that there is some problem either with using a 3d rotation on your particular SVG (?backface-visibility - though the default should be set at visible) or the rotation about the X axis is flipping the SVG out of the containing element.
Could you try first not having any transform on the pointer to see if it is visible, and then trying a rotate(180deg) instead (i.e. about the z-axis) so there's no worry about what is happening, or not, in 3D and so that the image stays in place rather than moving down.
As A Haworth pointed out, it was a reference issue. I was applying the svg via the background:url(); property for the first time. It worked well with just an html and css file with background: url("img/arrow.svg"). But the trouble was that I was trying to reference the svg the same way when using node/sass. The proper way to reference it in that case was background: url("../img/arrow.svg"). Thanks for the heads-up A Hawthorn. That led me to the answer here,
Having an issue I don't understand. The only way I've been able to center a button on my page perfectly across all devices is if I apply a width: 100% to it.
Issue with this however, is it then makes a sprawling button, way too wide. I'd like to cut it down. The problem is, anytime I get rid of the width: 100% in any way, it makes the perfect button position go haywire.
Any thoughts on how I can have my button centered, but also not super wide and sprawled out. Thank you. -Wilson
link to site: http://www.wilsonschlamme.com/test3.html?
CSS:
img {
width:100%;
max-width:500px;
max-height:340px;
box-shadow: 5px 5px 5px grey;
border-style: groove;
border-width: 1px;
position: absolute;
top: 107px;
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
width: 100%;
position: relative;
top: 600px;
}
#ShowText{
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
position: absolute;
margin-top: 500px;
text-align: center;
margin-left: -140px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
h1{
position: absolute;
top: 5px;
font-size: 250%;
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
#wrapper {
width: 500px;
margin: 0 auto;
}
take a look at this site there's a complete guide to centering a div.
http://www.tipue.com/blog/center-a-div/
I don't know what's your base using absolute positioning for mostly of your element, but to answer your issue, give text-align:center; to #wrapper, then give text-align:left for each of #wrapper children, except the button.
I was looking for many posts here on stackoverflow, but there was nothing, what could help me. Maybe this question is trivial, but i don't know how to do that, because I am beginner in this
So i have some header, where is logo, menu and some title -that is not problem. Under this header i have div with class slider, where i want to have some background-image and on this background-image i want to have some button and title and another image. And here is finally my question.
What should i do, if i want to have this background-image of this div on full width and with auto height (height from end of header to end of screen) for any screen resolution on desktop?
I mean: if i have resolution 1920x1080 i want to have this bg-image from end of header to end of screen. Same thing for resolution for example 1366x768 etc etc...i hope you understand my question.
Example on this
image
Header is red. And i want to have bg-image (in this case white part of image, but i want to have image there) auto resize for any screen resolution.
I really hope you understand my question and someone can help me.
Really thanks for any reply
http://jsfiddle.net/YKY4t/
I have some errors in code so please...
Code:
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700);
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
height: 10%;
background-color: #ff5959;
position: absolute;
}
.mainheader img {
max-width: 100%;
height: auto;
margin-left: 20%;
margin-top: 1.5%;
float: left;
}
.title {
position: absolute;
margin-top: 1%;
margin-left: 22%;
font-size: 35px;
font-family: 'Quicksand', sans-serif;
color: #ffffff;
}
.meta {
position: absolute;
margin-left: 18%;
margin-top: 3%;
font-size: 19px;
font-family: 'Quicksand',sans-serif;
font-weight: bold;
color: #ffffff;
}
.nav {
position: absolute;
right: 20%;
margin-top: 1%;
font-size: 19px;
font-family: 'Quicksand', sans-serif;
font-weight: bold;
}
.nav li {
list-style-type: none;
float: left;
}
.nav li a {
color: #ffffff;
text-decoration: none;
display: block;
margin-left: 25%;
}
.slider img {
background-image: url(../img/slider-image.png);
background-repeat: no-repeat;
background-position: center center fixed;
background-size: cover;
}
As i commented, you can use media queries for the different screen sizes where you can use different resolution images. In that case:
#media all and (min-width: 1920) {
.img-holder img{
background-img: url(../img/slider-image.png);
}
}
#media all and (min-width: 1366) {
.img-holder img{
background-img: url(../img/slider-image-medium.png);
}
}
You can use them to use all screen resolutions you want to cover.
You alse can use any responsive framework like Bootstrap which responsives the images.
I'm trying to align some text to the bottom of a loading sequence & I think the best way to get part way there is to use vertical-align. The trouble is that is not working.
I have a replica of the code here.
HTML:
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>
CSS:
#bg_loader {
width: 100%;
height: 100%;
z-index: 100000000;
background-image: url(../images/loading/myhhub_loading.gif);
background-repeat: no-repeat;
background-position: center;
}
#bg_loader:before {
content: "Thank You for Waiting";
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
I have done extensive research on the matter. From what I can tell it should be working. However, I am using a pseudo element to insert my text & I haven't been able to find much documentation on vertical-align & pseudo in these particular types of cases.
I found this article very useful: Vertical-Align: All You Need To Know
I would like to know why vertical-align is not working. I am also open to better methods of how to place my text below my loading sequence responsively. I am aware of calc(), it is what I am currently using.
CSS:
#bg_loader:before {
content: "Thank You for Waiting";
display: inline-block;
position: absolute;
bottom: calc(60% - 14em);
width: 100%;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Update:
I made some edits to Pangloss's code (marked answer below) to make the coded a little more dynamic:
jsfiddle
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
height: 13.86em;
line-height: calc(100% + (13.86em * 2) + 1.575em);
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Basically, instead of giving the :after element a fixed padding of icky pixels, I gave it a the same height as the image (in beautiful flowy em values) & a line-height calculated to bring the text to the bottom with a bit of padding.
Now, obviously, this is still going to need some work as this won't be compatible with firefox (Firefox does not support calc() inside the line-height.... I have also noticed issues in iPad. I am currently working to diagnose the issue.
I shall try to keep this post updated. (My progress will be tracked here.)
If you set vertical-align on a inline block element, it actually valign the element itself, rather the content inside, and that element is 100% height, so nothing happens, that is main issue there.
Secondly, the valign position is actually relative to the sibling elements' heights (usually the tallest one). And you there isn't any siblings in your example. The guide you have followed is very good, you can read it again, but more carefully.
Updated code snippet:
#bg_loader:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
padding-top: 270px; /*spacing*/
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Full working example:
jsfiddle
html{
height: 100%;
min-height: 100%;
overflow-y: scroll;
}
body{
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
background-color: #F1FAFC;
background-attachment: fixed;
font-size: 80%;
margin: 0;
}
#bg_loader {
width: 100%;
height: 100%;
z-index: 100000000;
background-image: url(../images/loading/myhhub_loading.gif);
background-repeat: no-repeat;
background-position: center;
}
#bg_loader:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
padding-top: 270px;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>
using a relative and absolute relationship for parent and pseudo elements is known to give you more control over positioning. I added:
#bg_loader {
position: relative;
}
#bg_loader:before{
text-align: center;
position: absolute;
top: calc(50% + 120px);
}
using calc() is the best way to maintain pos. control in my experience,
and using text-align for simplicity sake. this will also 'flex' well in the mobile realm.
check the updated fiddle
and some lite reading
I've been trying to create responsive website template for myself, I'd like to do it mostly from scratch.
I haven't been able to get the header to size consistently.
I have what I've written here:
header {
background: #222;
height: 60px;
line-height: 60px;
transition: top 0.2s linear;
width: 100%;
overflow: hidden;
text-align: center;
}
.hidden-header-fixed {
top: -60px;
position: fixed;
}
.visible-header-fixed {
top: 0px;
position: fixed;
}
.visible-header-abs {
position: absolute;
}
#logo {
display:inline;
font-size: 30px;
color: #eee;
text-transform: uppercase;
letter-spacing: -1px;
font-weight: bold;
font-family: 'Lato', sans-serif;
text-align: center;
width: 200px;
}
#logo:hover {
color: #aaa;
text-decoration: none;
}
.menu-button {
height: 40px;
width: 40px;
background: #eee;
display:inline;
float: right;
margin: 10px;
border-radius: 20px;
}
In context at: http://jsfiddle.net/7mc3oczp/
When I view the page on my phone though it looks like this:
The header is much too small here to use. I see other sites with a header that has a constant height translate very well to my mobile's browser, how is this accomplished? Why is mine zoomed so far out?
There are two options for doing it.
You can write your own code using media queries for different devices, at first check it, list out your break point & change code for that portion. It's very tedious and time consuming process.
You can do it using framework. It's easier to manage responsiveness using twitter bootstrap, it's easy to learn. Check http://getbootstrap.com and then modify your code using there format.
Did you try to add scale factor to your page?
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >