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;
}
Related
I want to create a div that has three nested divs touching each other in a row. I want the div at the center of this container to have a constant width. While I want the left div's width to expand to the left(i.e. not pushing the other two divs in the container to the right) on hover and stay expanded on click. I want the same thing to happen to right div's width except it expands to the right. All the nested divs would have content in them some of the content not completely visible until the div expands.
This would be the general idea:
When Neither is Hovered -->
enter image description here
When One Is Hovered -->
enter image description here
When They Are Both Clicked -->
enter image description here
The problem is I haven't been able to figure out a way to do this or find out if there is a tutorial or something that would be helpful in accomplishing this. I have tried googling how to create this, and in all honesty was not to sure exactly what to search up but nothing has really helped me get both divs expanding the way I want. I would appreciate any help in finding a tutorial or any implementation that might work.
So far I have been able to get this far in terms of coding it in HTML and CSS, but have been stuck for a while with no attempt being closer than this. I would need this to be on top of other elements on a page in my webpage hence the z-index, and positioning is so that I could move it to my desired place on the webpage. I am able to get the right div to expand how I want easily as that is the default behavior but when I try to get the left div and right div to both expand I have been stuck. I have gotten the left div to expand at one point but that led to the right div not working. So right now this is the closest I have gotten both expand properly but the left div is under the center div instead of beside it.
I added a bit of a yellow background in the images to give an idea of positioning
Result on Webpage No Hover -->
enter image description here
Result on Webpage On Hover Of Left Div-->
enter image description here
Result on Webpage On Hover Of Right Div-->
enter image description here
HTML-->
<div class="sliding-window">
<div class="left-wing">
</div>
<div class="middle-box">
<h3>Content</h3>
</div>
<div class="right-wing">
</div>
</div>
CSS-->
.sliding-window{
display: flex;
flex-direction: row;
/* justify-content: center; */
z-index: 25;
position: absolute;
top: 30%;
left: 35%;
width: 850px;
}
.middle-box{
left: 250px;
border: 1px red solid;
text-align: center;
height: 300px;
width: 250px;
border-radius: 10%;
background-color: grey;
}
.left-wing{
border: 1px violet solid;
height: 250px;
/* float: left; */
position: relative;
float: left;
left:200px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing{
left:450px;
border: 1px green solid;
height: 250px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing:hover{
width: 200px;
}
.left-wing:hover{
width: 200px;
/* margin-left: -200px; */
}
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 have a div container which is about 600px of width. I'm displaying an image inside this container. I have given the image a width:100% and height:'auto'. There are no issues in this but when i have to display a small image (Ex:width around 50px),because the width is set to 100% it appears blurry. How can i prevent this from happening? My thought was to however getting the width of the image and if it's lower than let's say 80px, the image width is set to a lower value. Is it the correct approach to do this? Or is there any better way?
My code
<div className="home_post_sections">
<img src={image} className="homepost_image"/>
</div>
css
.home_post_sections {
width: 610px;
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
margin-bottom: 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: white;
}
.homepost_image {
width: 100%;
}
I want my div container to fill with the image if it does not affect
the resolution much.
How much the resolution is affected - how much blur is acceptable - is an opinion. The browser won't make this decision for you.
You can use max-width on the image instead of width. That way the image will never be wider than it's native resolution. So an image with a width of 60px, will take up 60px of the container.
You can also add display: block to the image to remove the small strip of whitespace at the bottom of the container. More info here.
.home_post_sections {
width: 610px;
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
margin-bottom: 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: white;
}
.homepost_image {
max-width: 100%;
display: block;
}
<div class="home_post_sections">
<img src="https://unsplash.it/610" class="homepost_image" />
</div>
<div class="home_post_sections">
<img src="https://unsplash.it/60" class="homepost_image" />
</div>
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.
I have a menu button. The main blue outline is meant to sit above the image but right now the blue border is behind the image.
Can you help me figure out what I need to do to get the image behind the blue border?
I cut the blue border into 2 sections, the top & the bottom. The bottom is a tall image, so that the border can grow/be large for tall images.
This is how the buttom is meant to look:
This is how it currently looks:
My Code:
<div class="buttonTop">
<div class="buttonBottom">
<img class="buttomImg" src="images/ButtonImages/sweets2.jpg" width="150px" height="105px" alt=""/>
</div>
</div>
.buttonTop {
background: url(../images/dinnersButton.png) 0 top no-repeat;
padding-top: 73px;
display: block;
width: 153px;
height: 113px;
margin: 0px auto;
}
.buttonBottom {
background: url(../images/buttonBottomLite.png) 0 bottom no-repeat;
padding: 0px 2px 5px 2px;
display: block;
height: 109px;
z-index: 2;
}
.buttomImg {
z-index: 0;
}
<div class="round_border">
<img src="" alt="" />
</div>
--- CSS
.round_border {
padding: 5px;
border: 5px solid blue;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
That should work in most modern browsers.
The methodology is flawed. You cannot put something inside a div while at the same time expect it to appear behind that div. Your div has a background image and anything you put inside it will cover the background, period.
You need to re-think the whole thing... each of the three items in their own div all within another div used as a container. Then you can put the image div behind (under) the border div.
EDIT:
The following jsFiddle shows how to put three div's in a container, while having the second two cover the first. The two div's are transparent to simulate your transparent border PNG which also allows you to see the div behind. The red div behind is supposed to represent your photo and it's set to position: absolute and bottom: 0.
http://jsfiddle.net/sparky672/a9cX8/