I am trying to set the size of a div to A4 so that every new box start from a new page. But my box is overlapping over the previous page.
I used this code from this post:
.invoice-box {
width: 21cm;
min-height: 29.7cm;
padding: 1cm;
margin: 1cm auto;
border: 1px #eee solid;
background: white;
font-size:16px;
line-height:24px;
color:#555;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
but the pages are overlapping.
How to correct it?
Not an exact fix, but you can set a page break for printing with page-break-after definition.
Related
I know that a lot of questions have been posted here about the cache and open cart.
I have a server running OC v3.0.3.2, I've been changing few default colors, some changes were applied instantly but the others required clean the cache to be displayed.
Recent changes in navigation bar modified its height
here's the code in
/catalog/view/theme/default/stylesheet/stylesheet.css
#menu {
background-color: #01aa83;
/*background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);*/
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
min-height: 40px;
}
#menu .nav > li > a {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
padding: 10px 15px 10px 15px;
min-height: 15px;
background-color: transparent;
/*border-left: 1px solid #fff;*/
}
/*#menu .nav > li:first-child > a {
border-left: none;
}*/
divs used to have a left border but I commented the line trying to figure it whats going on?
I am a css beginner so apologies in advance if I am asking basic questions.
I am using a jquery datepicker in my web application and have an issue with the positioning of the jquery date button. I am using a css framework (yaml) which has a whole set of defined styles for buttons so what I have needed to do is override all the pre-defineed styles.
When I specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
}
The date button is slightly too high and not in line with the input field...
When I fix this and specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
position: absolute !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
The date button is in line with the next field which is what I want.
BUT after changing the style of the button to use absolute (3 end lines of 2nd css extract above), whilst i am doing a mousepress the date control jumps up about 15 pixeles up the screen.
Has anyone got any ideas on how I might fix this? And a good explanation as to what is happening for my understanding.
thanks
You can try another solution by using the calendar icon inside the textbox.
Check this here :- http://jsfiddle.net/33Xxk/
.tInput_datepick {
width: 250px;
color: #555555;
text-decoration: none;
border-radius: 7px;
padding-left: 7px;
background-image: url(http://www.bay.k12.fl.us/portals/18/Images/calendar_icon.jpg);
background-repeat: no-repeat;
background-position: top right;
background-position-y: -5px;
height: 25px !important;
border: 1px solid #888e9c !important;
background-color: #f4f5f9 !important;
cursor: pointer !important;
}
I have used div event which appear with scrollbar on the page to show content.
Though I have adjusted the width of div, When it appears on the page; it reaches to right corner of the screen.
code:
<div id="txtHint" align="justify" style="z-index: 1; color:green; left: 350px; top: 270px; position: absolute; margin-top: 0px; width:500px;height:250px;overflow:auto;">
Height gets adjusted correctly, for width whatever I take i.e. 200,300, or 800px. It spans up right end.
I checked in mozilla and chrome both. I am testing it for my ec2 amazon instance.
Similarly my css button :
<input class="uibutton confirm large" type="submit" value="Connect with facebook" onclick="AjaxResponse()" >
When I click it, all actions performed correctly but it does not show any effect so that user can realize whether button is clicked or not.
Can someone tell me effect which can be realized on click event. I tried on google with css button click effect and tested someof them. But does not make any difference.
Here is css for this:
.uibutton,
.uibutton:visited {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.5em 0.8em 0.5em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 2.0px;
border: 0;
}
.uibutton.large {
font-size: 16px;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Sounds a lot like you need css click events. This can be achieved with a simple checkbox.
Here is a link demonstrating it:
http://tympanus.net/Tutorials/CSSClickEvents/index.html
http://jsfiddle.net/Hive7/gd7AJ/
Edit
To do the current element you give the class of css effect to the current element
Edit
Also if you want to make the clicked element change you need to put the checkbox before
Here is a fiddle demo of both:
http://jsfiddle.net/Hive7/gd7AJ/1/
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
I'm trying to overlap some text fields with transparency over a background that also has transparency, the problem is that the text fields appear opaque, as if they had no transparency applied, how can I manage for both the field and background to appear with a certain transparency?
This is the div that contains everything:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
}
And this is my input field:
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid black;
}
This is how it looks:
Your code seems to be working great, it just doesn't look all that transparent as the .8 transparency of the black background creates a dark grey which perhaps you aren't quite distinguishing from fully opaque. If you want to check this on your local copy, apply a basic background image (e.g. http://purelycss.com/data-uri-tileable-transparent-patterns/) and you should be able to just about see it below your wrapper and input field.
EDIT: If you're looking to reduce the "black on black" effect, you might want to just reduce the opacity of the 'rgba' - so something more like rgba(0, 0, 0, 0.5) for example. If not this, changing the colour of the base RBG colour might help you out here. It's one of those things you probably just want to play with and tweak.
it looks like it a problem with the stacking of your transparency, to ahcieve a 0.8 transparency on the input box you jsut need to add a further 0.2 transparency to the input (as it has effectively inherited 0.6 of the 0.8 you require from its containing element. see here:
http://jsfiddle.net/e6Z8N/1/
html:
<div id="wrapper">
<input type="text" />
</div>
css:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding:50px;
}
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.2);
color: white;
border: 1px solid black;
}
You may need to clear the default browser styles applied to input elements.
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;