Very new to web dev so apologies in advance if I sound like I do not know what I am doing. Trying to have this type of border around an image but cannot manage to do this with that specific corner. Any ideas?check the link please cannot embed images into this post
There are two blocks. you can use something like this(picture on the red one)
.bg
{
width: 120px;
height: 120px;
border: solid green;
}
.image
{
position: relative;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div class="bg">
<div class="image">
</div>
</div>
</body>
</html>
Related
I have a React component that is trying to simulate a progress bar. For simplicity sake, I've paired it down to the code-snippet below:
.bar {
background-color: #EAECEF;
border: 1px solid #3D4D5B;
height: 12px;
width: 100%;
}
.progress {
background-color: #3D4D5B;
color: #000;
height: 12px;
width: 100%;
}
<html>
<body>
<div class="bar">
<div class="progress"></div>
</div>
</body>
</html>
The issue is that at certain resolutions, unwanted gaps start to appear between the inner div and the outer div. This can be shown by simply zooming in (ctrl-+) the rendered progress bar. I've only noticed this behavior with Chromium-based browsers and not with Firefox.
Does anyone know why this would be happening and/or have any suggestions on how to address this issue?
Would you like to remove border style from bar div element?
It will solve the problem.
The issue was happening because of the border (1px) which appears/disappears when zooming in/out. Now, the issue is solved only by removing the border.
.bar {
background-color: #EAECEF;
/*border: 1px solid #3D4D5B;*/
height: 12px;
width: 100%;
}
.progress {
background-color: #3D4D5B;
color: #000;
height: 12px;
width: 100%;
}
<html>
<body>
<div class="bar">
<div class="progress"></div>
</div>
</body>
</html>
I'm trying to use draggable divs, but the ghost image I get while dragging is wrong. The divs are inlined, and there is a hidden overflowing part. Here is a minimal example that demonstrates the problem. HTML:
<div class="box" draggable="true">
<div class="inner-box"> </div>
</div>
<div class="box">
</div>
And the CSS:
.box {
overflow: hidden;
display: inline-block;
width: 80px;
height: 80px;
background-color: #ccc;
}
.inner-box {
position: relative;
left: 40px;
top: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
}
JSFiddle: https://jsfiddle.net/gokjkqxm/
If you try to drag the first div, the ghost image contains a part of the second one, which is something I'd like to avoid. Does anybody know of a way to solve this issue without using images?
Thanks in advance!
I'm working on a page in html. I was able to include an image in a box but I don't know why it is not visible. Should I have to include it somewhere? It is in the directory with all the others images of the project. Here is the view in my page
And here is my code:
HTML
<div id="LibraryContent"style="text-align:center;">
<div id="adbox">
<img src="../images/thriller.jpg" align="left" style="width:100px;height:100px" />
</div>
<section class="container">
<nav>
<style>
div {
height: 650px;
width: 850px;
padding: 3px;
border: 3px solid;
vertical-align: middle;
}
</style>
</nav>
</section>
</div>
CSS:
#LibraryContent {
background: transparent;
vertical-align: top;
display: table-cell;
padding: 8px 0 0;
position: fixed;
top: 10%;
left: 50%;
margin-top: -50px;
margin-left: -300px;
}
#adbox {
width: 840px;
height: 150px;
margin-top: -9px;
background-color: dimgrey;
}
As I had some problem posting the code I take away the body part. Hope you can help me. It is just a bug or maybe something with the type of the image. All the images are in the directory ../Web/Music/images. I'm not using javascript (just to be precise)
according to the above shown image the problem is related to the path
try to check that the path is correct or not
check that the file type you used is correct or not
check the case of file like you used thriller.jpg instead of Thriller.jpg
I have images that are also links, coded like this:
<img src="pages/squirrely.png" />
They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen.
I tried changing the width and height of the lin, but it didn't work. My css is:
#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
I would not work with an imagemap in this case, but do something like this:
The HTML:
<div class='container'>
<img .../>
<a ... ></a>
</div>
The CSS:
.container {
position: relative;
}
.container img {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
.container a {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 25px;
left: 25px;
}
Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)
There are several web applications that'll allow you to choose the coordinates for the mapping. I've tried this one with great success:
http://www.maschek.hu/imagemap/imgmap
I hope this helps you with your project!
I'm trying to create a template webpage that uses the golden ratio for proportion. However, it appears I'm not doing it correctly.
I would like some advice on the proper use of:
div tags for laying out panels on a page
CSS and the position attribute
Any other tags or tips that will help me achieve an attractive page
HTML:
<html>
<head>
<title>Golden Ratio</title>
<link rel="StyleSheet" title="Default" href="gr.css" type="text/css">
</head>
<body>
<div id="header">
</div>
<div>
</div>
<div id="bodyleft">
</div>
<div id="bodyright">
</div>
<div id="footer">
</div>
</body>
</html>
CSS:
body {
background-color: white;
}
#header {
width: 960px;
height: 100px;
background-color: red;
}
#bodyleft {
position: absolute;
top: 100px;
width: 592px;
height: 700px;
background-color: blue;
}
#bodyright {
position: absolute;
top: 110px;
left: 610px;
width: 368px;
height: 700px;
background-color: green;
}
#footer {
position: absolute;
top: 800px;
width: 960px;
height: 100px;
background-color: black;
}
I did some rather extensive golden ratio work in this post Is there a CSS way to position an HTML element vertically following the golden ratio? that may be helpful to you.
here is a link, http://jsfiddle.net/etienne_carre/WYStC/
I like to use the float left to align all my div and put a clear after it to finish the row.
Maybe this can help?
https://github.com/gbutiri/phi-grid
It's an extension that can be used with bootstrap and uses flexbox.