On a website there is a black line on the left of a picture about 1 or 2 pixels long. I can't get rid of it after checking the code (border etc). I think its a javascript problem. The picture doesn't have the black line on the home page but does have it on subsequent pages. There is no margin etc. How would I identify/fix the problem
image with no black border
http://www.darkrome.com/tours/rome-tours/colosseum-coliseum-ancient-rome-tour
image with black border on left hand side
http://darkrome.com/tours/vatican-tours/extended-vatican-museum-tour-with-bramante-staircase
Check out your css and remove the background image.
Actually the float: left is causing the issue, so you can remove it afaik
#tourDetFluidOuter {
margin: 0;
padding: 0 0;
width: 100%;
height: 100%;
float: left;
background: url(/images/tour-detail-bg.gif) repeat-x 0 0;
}
this black border (actually it is not a border but a background) is produced by
#tourDetFluidOuter {
margin: 0;
padding: 0 0;
width: 100%;
height: 100%;
float: left;
background: url(/images/tour-detail-bg.gif) repeat-x 0 0;
}
just remove the background or cover it fully.
Related
I have a div that will be the header of the site I'm working on that is a custom shape. The issue I am having is that the header needs to resize horizontally while retaining the integrity of the border radius and curves that are part of the shape. The problem with just using a transparent div with the shape as a background SVG is that when the window is resized, the integrity of the border radius and the angled section of the graphic are lost, meaning they get distorted into another shape. Here is an image of the shape:
The initial way I attempted to create this element was by placing it as an SVG, and resizing one of the line segments of the SVG in Javascript, but the performance on this was very poor, it was overly-complicated, and it was difficult to get the sizing correct.
The closest I got to the desired result was by cutting the right side tail of the SVG and using it as an :after element, which gave me the horizontal fluidity I was looking for, but encountered issues with matching the border color of the div and the stroke of the SVG. The div uses a translucent white background and a translucent colored border. Since the border is technically "on top" of the white background, the resulting color value is dynamic depending on the background of the page. This makes it difficult to match the stroke of the SVG and the border color of the div. There was also an issue where a vertical line would show up at different resolutions between the div and :after SVG element. You can see in the picture below that this method is not ideal, the SVG border color and width does not match the div on the left, and if you look closely there is a gap between the two elements (much more visible on a dark background which the site will be using).
body {
background-color: black;
margin: 10px 20px;
}
.header {
background-color: rgb(217 217 217 / 0.5);
border: 3px solid rgb(122 112 158 / 0.5);
border-bottom-left-radius: 24px;
border-right: none;
display: block;
width: calc(100% - 305px);
height: 60px;
position: relative;
}
.header:after {
background-image: url("data:image/svg+xml,%3Csvg width='308' height='65' viewBox='0 0 308 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.00179921 3.00586H293.755C296.737 3.00586 299.597 4.08424 301.706 6.00378C303.815 7.92331 305 10.5268 305 13.2414V22.7809C305 25.4955 303.815 28.099 301.706 30.0185C299.597 31.938 296.737 33.0164 293.755 33.0164H126.396C75.9048 33.0164 52.8027 61.9625 0 61.9625L0.00179921 3.00586Z' fill='%23D9D9D9' fill-opacity='0.5'/%3E%3Cpath d='M293.755 0.00585938C297.447 0.00585938 301.037 1.33813 303.726 3.78519C306.424 6.24078 308 9.6351 308 13.2414V22.7809C308 26.3872 306.424 29.7815 303.726 32.2371C301.037 34.6842 297.447 36.0164 293.755 36.0164H126.396C101.996 36.0164 84.1741 42.9185 65.6587 50.0893L65.1482 50.287C46.4357 57.5333 27.0057 64.9625 9.15527e-05 64.9625V61.9625C1.01084 61.9625 2.01071 61.9519 3.00009 61.9311C28.1433 61.4023 46.5167 54.2861 64.6923 47.2465C83.1648 40.0919 101.433 33.0164 126.396 33.0164H293.755C296.737 33.0164 299.597 31.938 301.706 30.0185C303.815 28.099 305 25.4955 305 22.7809V13.2414C305 10.5268 303.815 7.92331 301.706 6.00378C299.597 4.08424 296.737 3.00586 293.755 3.00586H0.00189066L0 0.00585938H293.755Z' fill='rgb(122 112 158 / .50)' /%3E%3C/svg%3E%0A");
content: "";
background-size: contain;
background-repeat: no-repeat;
width: 310px;
height: 66px;
left: 100%;
top: -3px;
position: absolute;
}
<div class="header">
</div>
You were on the right track with splitting up the image. You could either split the png you provided in your example, or if you have access to the tools, you could make three svgs.
Using the png you provided as an example, I made a new image 50px wide starting from the left. I made a second image 500px wide starting from the right. Finally, for the center, I made a third image that was only 1px wide taken from the horizontal center of the provided png. That 1px can be repeated horizontally to give the illusion that it is one image.
There are many ways to assemble them for the header. You could use a table, a grid, divs with positioning and float. I chose to use flex.
body {
background-color: black;
margin: 10px 20px;
}
.header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 96px;
}
.header_left {
flex-grow: 0;
background-image: url("h_left.png");
background-repeat: no-repeat;
width: 50px;
max-width: 50px;
min-width: 50px;
}
.header_middle {
flex-grow: 1;
display: block;
background-image: url("h_mid.png");
background-repeat: repeat-x;
}
.header_right {
flex-grow: 0;
display: block;
background-image: url("h_right.png");
background-repeat: no-repeat;
width: 500px;
max-width: 500px;
min-width: 500px;
}
<body>
<div class="header">
<div class="header_left"></div>
<div class="header_middle"></div>
<div class="header_right"></div>
</div>
</body>
I'm trying to insert an vertical image 1 pixel wide into my webpage but depending on the browser, zoom level or position of other elements on the page the image is often resized to be 0 pixels and dissapears. How can I stop this? Am I doing this wrong?
My html image (green space is just 1 pixel of green.
<IMG class="dividerImage dday3" SRC="/SafeSiteLive/images/safesite_documents/icons/greenspace.gif">
My css
.dividerImage {
float: left;
margin-top: 50px;
height: 50vh;
width: 1px;
}
Some green vertical images not displaying
Different zoom level more of the images display
I should have been using an empty div instead, works much better.
<div class="dividingDiv">
</div>
And the css.
.dividingDiv {
border-left: 1px solid green;
float: left;
height: 50vh;
margin-top: 50px;
width: 0;
}
I am trying to implement a star rating system for articles and found this nice plugin. I have exchanged the default star.gif with my own stars. Everything works fine if I use a full star rating. As soon as I am trying to use the split star function, the stars are not displayed correctly anymore.
The stars itself have a width of 32px.
The half stars should be on top of the right side of the full stars.
The following if-clause seems to be responsible for calculating the position:
// Prepare division control
if(typeof control.split=='number' && control.split>0){
var stw = ($.fn.width ? star.width() : 0) || control.starWidth;
var spi = (control.count % control.split), spw = Math.floor(stw/control.split);
star
// restrict star's width and hide overflow (already in CSS)
.width(spw)
// move the star left by using a negative margin
// this is work-around to IE's stupid box model (position:relative doesn't work)
.find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' })
};
it is embedded in a "for-each star" loop. I have debugged this with firebug and the calculation seems to be correct. Each second star should have a left-margin of -16px.
For some reason this is not displayed on the site though.
Does anyone know what I am doing wrong? I have to mention that I do not have much experience with JS.
Here is the css:
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
float: left;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 17px;
}
div.rating-cancel, div.rating-cancel a {
background: url("delete.gif") no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
}
div.star-rating, div.star-rating a {
background: url("star.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
div.rating-cancel a, div.star-rating a {
background-position: 0 0;
border: 0 none;
display: block;
height: 100%;
width: 32px;
}
div.star-rating-on a {
background-position: 0 -32px !important;
}
div.star-rating-hover a {
background-position: 0 -64px;
}
div.star-rating-readonly a {
cursor: default !important;
}
div.star-rating {
background: none repeat scroll 0 0 transparent !important;
overflow: hidden !important;
}
I cannot really tell what went wrong here. First of all the width in this setting had to be adjusted. Then one might want to get rid of the float option and use inline-block on the display instead. That way the following components will be drawn in a new line.
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: inline-block;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 32px;
}
If I changed this value with firebug nothing happened. I replaced the css with the original file and then just added the changes I needed again and voilá, everything looks nice now.
I've ran into a inconsistency with the sliding animation in jQuery and I'm not too sure how I can overcome it.
I basically have two floating divs that act as opening and closing doors:
.door-one{
float: left;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
And the animation to govern their movements:
$(document).ready(function(){
$('.home-button').click(function(){
$('.door-one').animate({width: 'toggle'}, 1000);
$('.door-two').animate({width: 'toggle'}, 1000);
});
});
The problem exists with the left floating element. You see, the right one moves off the page to the right (images and all) in one smooth motion. The left one however just gets 'covered' up and doesn't actually 'slide' off of the page.
Is anyone familiar with this? Is there anyway to get the left element to slide off the page properly?
The background image for right door works, because the float causes it to move right as the door's width shrinks. The background image simply goes along for the ride.
The background image for the left door does not work, because the door doesn't move left when its width shrinks.
An alternative would be to animate the left door's position rather than its width.
You can do this by removing float: left and adding absolute positioning for the left door. I don't think you can toggle left for this purpose. But you can animate it in one direction or the other based on its current offset.
Snippet:
$('.home-button').click(function(){
var d1= $('.door-one');
if(d1.offset().left < 0) {
d1.animate({left: '0'}, 1000);
}
else {
d1.animate({left: '-50%'}, 1000);
}
$('.door-two').animate({width: 'toggle'}, 1000);
});
html,body {
width: 100%;
height: 100%;
margin: 0px;
}
.door-one{
position: absolute;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="home-button">Click me</button>
<hr>
<div class="door-one"></div>
<div class="door-two"></div>
I have made a JSFiddle where I am trying to make a DIV stay fixed vertically in the viewport as the user scrolls, but stay under a header.
However, the fixed DIV, with the green border, pops over to the right edge of the viewport when you scroll down to the point where the Javascript kicks in.
How do I constrain the green DIV so that it stays within the red bordered containing DIV? Ideally its horizontal position would stay fixed relative to the right edge of the container.
CSS:
header {
width: 100%;
height: 10em;
border: purple thin solid;
}
#container {
border: thin solid red;
position: relative;
height: 100%;
max-width:30em;
margin: 0 auto 0 auto;
}
#staticRight {
border: green thin solid;
display: inline-block;
float: right;
right: 0;
margin: 2em 0 0 0;
width: 120px;
height:600px;
font-size: .82em;
line-height:2em;
}
article {
border: blue thin solid;
max-width: 20em;
}
Javascript:
var elementPosition = $('#staticRight').offset();
$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
$('#staticRight').css('position', 'fixed').css('top', '0');
} else {
$('#staticRight').css('position', 'static');
}
});
Try this code. Giving right also to your staticRight div
$('#staticRight').css('position', 'fixed').css('top', '0').css('right','20px');
Instead
$('#staticRight').css('position', 'fixed').css('top', '0');
DEMO
When you set an element to fixed, it gets out of the flow and hence setting the parent to relative would'nt matter. The fixed div gets positioned at the desired coordinates relative to the browser window. So if you can calculate the left poition from the browser, just add it to your $(window).scroll when you change it to fixed. Your code should look like this-
<div id="staticRight" style="position: fixed; top: 0px; left: 70%;"></div>