I'm working on a Tictail shop and i have one problem that i just can't get my head around. As you can see here http://i.stack.imgur.com/rXOJf.png, the picture (which is supposed to be on the front page) falls under the menu. I don't know what to do. My first thought was to check the "header", but i couldn't solve it.
/* HEADER
**********************************/
#mast {
position: fixed;<br>
border-top: 1px solid #fff;<br>
background: #fff;<br>
left: 0;<br>
height: 100%;<br>
width: 280px;<br>
z-index: 300;<br>
text-align: center;<br>
padding: 50px 0 0 0;<br>
overflow: auto;<br>
overflow-x: hidden; }
Is it something else i should look for? I also checked the "main-container", but no luck.
#main_container {<br>
margin: 0 auto;<br>
padding: 80px 0 0 0; }
Would be deeply greatful if someone could help me out!
I've made it work on my screen using div-tags, but when i test the resolution for smaller screens the picture(s) still disappears under the navigation.
I don't get it. Shouldn't i be able to make the navigation like a 'wall' that the content in the main container can't 'breach'?
Related
I've searched high and low, read tutorials and still have no answer for this :-\
What's best-practice for getting 3 images evenly spaced inside a div (one left, one middle, and one right), and keeping the distance between images appearing even as the browser size is reduced? I have tried using width- and margin-%'s with no luck. Is it more appropriate to use an in-line block solution, and if so, how?
Page in question: http://www.1000hours.co.nz/mtc/
html:
I was unable to post the html here despite reading the guide, I'm not sure why? It's in the revised JSfiddle markup: http://jsfiddle.net/87pgzLf1/
css:
#divcontainer {
float:left;
width:100%;
height:auto;
padding:25px;
margin: 5px;
#iconcontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 5px;
}
#buttoncontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 1px;
}
#icon1 {
float:left;
margin-left:20%;
}
#icon2 {
float:left;
}
#icon3 {
margin-right:60px;
float:right;
padding-left:20%;
}
You rule stack exchangers, thanks heaps in advance. Feel free to grab the background images on the page if you like as contribution <3 [disclaimer: this is not a scam but that's up to you to decide. Editors don't hate on people who give please, just because others in the world aren't always trustworthy - I am.]
Here's an update to your jsfiddle:
JSFIddle
I need to make CSS3's background-size properly work in IE8. There are a lot of javascript libraries out there but they extend the options "cover" and "contain" rather than a px value. As I'm using an image sprite I need to set the background size in pixels.
Here is a demo of my code. The sprite image is 600px 400px but ive set the background size to be 300px x 200px so that is looks crisp on high density displays.
<a class="one">Link one</a>
<a class="two">Link two</a>
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
background-size: 300px 200px;
} a.one {
background-position: 0 0;
}
a.two {
background-position: 0 -56px;
}
http://jsfiddle.net/rr2obdss/4/
Can I extend support to IE8 without having to create and maintain a 2nd image sprite?
Depending on the specific case, which you don't really explain in much detail, a workaround with pseudo elements may work?
Just add a pseudo element of the specified size and have it have the sprite as background?
With the right combination of position absolute/relative and z-index this could work.
If you provide more information of what exactly you are trying to achieve I will be able to provide better help.
Edit:
Okay, so I got a solution now. Kind of as expected: looks quite dirty.
But that's what you get when you want to do fancy stuff in IE8 :-P
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
position: relative;
}
a:before {
content: "";
background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
zoom: .5;
text-indent: 0;
overflow: hidden;
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
a.one:before {
background-position: 0 0;
}
a.two:before {
background-position: 0 -112px;
}
The downside of this is, that you would have to calculate the zoom factor instead of just writing down the dimensions you want to have. Also background-position would then be in relation to the full-size background.
Is anything unclear with what I am doing in above code?
The only thing you can do is to :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale')";
But this can cause issues if you use sprite image.
According to caniuse.com, this polyfill may help.
Hope this helps...
-- Lance
I've some problem with border-radius function in firefox.
When i apply, it makes some kind of space, or border around the item.
Can somebody tell me that this is a firefox bug or is there some resolve for that?
Here is the problem:
JsFiddle
The
border-radius:50%;
line makes that, i am sure.
Seems to me that this is a FF issue at rendering shadows with border-radius.
You could try this simple trick :
The demo
Basically, you apply the grey shadow on the parent li, make it a bit finer and then move a bit the a.ch-item child in order to make it go over the gap.
.ch-grid > li {
box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 198px;
height: 198px;
}
.ch-item {
position: relative;
top: -1px;
left: -1px;
}
Of course, this is just for the idea. You might also want to apply the hover effect on the li element itself and move it 1px down and right to have a better result.
Edit : a better result
I've spent an entire day struggling with an issue that has occurred with mobile devices such as iPhones, iPads and an Acer tablet. I haven't been able to check with other devices but the problem seems to be quite universal when it comes to mobile devices.
Here are the first three css elements I use:
* {
margin: 0;
padding: 0;
}
html, body {
background: #f1f1f1;
margin: 0;
padding: 0;
}
#page-wrap {
background: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
The point here being that I have a bunch of 1200 pixel-wide <div> elements with content placed inside other, browser-wide elements. So, first, I use css to make my site use all of the browser window and then add <div> elements like this one and center them:
#featured {
background: #282828;
width: 100%;
height: auto;
padding: 0;
}
#featured #inside {
background: #282828 repeat;
width: 1200px;
height: auto;
margin: 0 auto;
padding: 50px 0 50px 0;
}
And here's the issue:
I'm currently using this code to define a fixed position background image for a <div> element:
#banner_index {
background: url(../images/banner/index.jpg) no-repeat center center fixed;
-webkit-background-size: 2000px 1333px;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 600px;
margin: 0 auto;
padding: 0;
}
While this makes the background look perfectly fine on all the necessary desktop browsers, all the forementioned mobile devices (regardless of the browser app used) display the background image smaller, ie. not completely stretched out to fill the <div> element.
More to my demise, I've created a header <div> for the site above the #banner_index element, which has a top border of 3 pixels. Here's the code for that one:
#header {
background: #f1f1f1;
width: 100%;
height: auto;
margin: 0 auto;
padding: 20px 0 20px 0;
border-top: solid #282828 3px;
}
Much to my surprise, this border, and in fact the whole <div> seems to be sliced to the same width as the background image on the #banner_index element right below it.
I realize that mobile devices have problems with the fixed code in the background: element but all the workarounds I've managed to find seem to be of no use. Especially when the border-top: element has nothing to do with background images.
Anyone care to help a frustrated enthusiast out?
I'd like to keep my site Javascript-free and thought maybe a more simple css solution is out there.
Therein lies the rub.
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.