on my website: http://evoxity.net/en/wallpaper/3-wallpaper.html
i noticed two bugs with fancy box. The first one is, if you decide to enlarge the pciture with a click on it. The first time it loads, the background is a bit out of the center, if you close the window and enlarge it again, its fine. This bug contains if you hover one of the sites of the fancybox and switch through the images.
The secound bug is, the line under the X to close the window.
Any suggestions how to fix that?
product.tpl:
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css:
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here some pictures to explain the last bug. (just click first, secound image to navigate) http://imgur.com/kGUyv2i,Ts8rrOk#0
Removing the lines under the X
a {text-decoration: none;}
The box looks centered for me when I open it.
search in global.css line 7959 add text-decoration:none;
Related
I am working on an old website for a client and I have run into a problem creating a button link. I considered creating a box with text in it, but I cannot produce text in the graphic that is as clear as the text generated in html. I have, therefore, created two boxes with blank space to accommodate the text. The text is superimposed over the box. The relevant code follows here.
.style1 {
font-size: 14px;
font-weight: bold;
}
.container {
position: relative;
text-align: center;
color: white;
font-weight: bold;
line-height: 100%;
}
.container:hover {
color: #000000;
}
.centered {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
}
.initials {
font-size: 16px;
}
.card {
width: 170px;
height: 100px;
background: url("otec_link.png") no-repeat;
display: inline-block;
}
.card:hover {
background: url("otec_link_gray.png") no-repeat;
color: black;
text-decoration: none;
}
.words {
color: #FFFFFF;
text-decoration: none;
}
.words:hover {
color: #000000;
text-decoration: none;
}
<div class="container">
<div>
<div class="centered" style="text-align:left;">
<span class="initials">O</span>nline<br><span class="initials">T</span>eacher<br><span class="initials">E</span>ducation<br><span class="initials">C</span>enter</div>
<span class="card"></span>
</div>
</div>
You can run the code to see the issues.
Here is what I am looking for:
A red box with white text.
On mouseover, a gray box with black text with anchor link available text and graphic.
Here is what I am getting:
A red box with white text.
On mousover the box, a gray box with white text, and when the pointer passes over the text it turns black and the red box returns.
There is a gap in the anchor link between the lines of text.
I have tried to create what is basically two links, one for the box and the other for the text to get around the font quality issue.
The website is comechildrensing.com. You can go there to see the issue in context. It is the top button in the vertical red menu bar on the left. If there is a tool I can use to make clean, sharp text in the graphics, it would make the whole mess go away. Otherwise, I am open to any solution that will resolve the problems.
Right now you've created three different hovers for three different elements that the user can hover over (pretty much) individually. It's better to do one hover and have it target other elements instead.
.container:hover .card {
background: url("otec_link_gray.png") no-repeat;
}
.container:hover .words {
color: black;
text-decoration: none;
}
I have a website with text that I've set to #666666 in CSS. This color persists just fine across browsers- however, when I view the site on a Windows machine, the text appears a much lighter shade of gray, despite my using the same browsers (Firefox and Chrome). This problem only occurs within the content elements- the nav bar is also set to #666666 and it behaves as desired.
The CSS for the nav bar:
a.nav {
color: #666666;
font-size: 48px;
font-family: 'Raleway';
text-align: center;
text-decoration: none;
margin-top: -50px;
}
The CSS for my content (this is the stuff that changes color):
#content {
color: #666666;
font-size: 18px;
font-family: 'Raleway';
width: 470px;
margin: 0 auto;
margin-top: 15px;
line-height: 128%;
text-align: justify;
}
Any ideas about why this might be happening and what I can do to remedy it?
may be rgb color as it may be more consistent applied on different elements.
color: rgb(102,102,102);
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}
I previously had horizontal lines on either side of my heading titles, however it has now stopped working and the line is displayed on top of the text, please help! The code I used for this and worked absolutely fine is below;
h6.two span {
background: #fff;
padding: 0 5px;
position: relative;
z-index: 5;
font-size: 14px;
font-weight: 500;
}
h6.two+p {
border-top: solid 1px black;
padding-top: 12px;
margin-top: -12px;
}
Can see the problem here
Not entirely sure what changed for you, but the way I'd do it (with more specificity in regards to selectors, of course) would be:
h6 {
background: #fff;
display: inline-block;
position: relative;
z-index: 1;
}
That way, you can set a block with a solid background to always exist on top of the line.
The reason mine stopped working was because, I went to edit my home page in Visual mode and the span tags were automatically deleted.