Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am making a website with a slide type layout. Currently, I am working on the following two slides:
and
I want to have a button on each slide (like in slide 1).
I have applied the following rules to the button:
position: absolute;
bottom: 5%;
I have two buttons : "Know me" and "My skills".
Currently, both buttons are overlapping (that's why you can't see the "Know me" button).
What rules can I apply so that both buttons appear at the same position in their respective slides?
Elements with position: absolute are located relative their closest parent element with position: relative. To have your buttons appear in their relevant slide frames be sure to assign position: relative to each frame.
.slide {
height: 80px;
width: 200px;
position: relative;
}
button {
position: absolute;
bottom: 4px;
}
#slide-1 {
background-color: red;
}
#slide-2 {
background-color: green;
}
<div id="slide-1" class="slide">
<button type="button">Button 1</ button>
</div>
<div id="slide-2" class="slide">
<button type="button">Button 2</ button>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Previously legend-tags had an align property with the values top, bottom, left and right. But in HTML 5 this property is not supported anymore. W3schools advises to use css instead.
But how can you use css to position the legend to the bottom of the fieldset, so that it looks like this:
Edit: Just to clearify: I don't mean that the legend tag is not supported im HTML 5, but the align property does not exist anymore. And I want to position the legend on the bottom of the fieldset.
You need to manually position the legend.
fieldset {
width: 200px;
height: 50px;
position: relative;
top: 50px;
left: 50px;
box-sizing: border-box;
border: solid black 1px;
}
legend {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
padding: 0 5px;
background: white;
}
<fieldset>
<legend>Legend</legend>
Content goes here.
</fieldset>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on a dropdown menu for a site with a fairly large header. Inside of the header is a <ul> containing the primary menu, with each menu item revealing a dropdown. The problem I am having is that the primary menu is shorter than the header, so there is a small space the cursor has to travel through where it is not hovering over the primary menu or the dropdown. In this brief space, the dropdown menu disappears. How can I keep this from happening? I cannot move the dropdown up, or it overlaps with the header. I also have been unable to change the height of the <ul> in an effective way.
The site is private, but I have created a jsfiddle displaying the problem I'm having: https://jsfiddle.net/x0hvdaqn/
Edit
I had made the fiddle with a div instead of a ul for simplicity's sake, but when I changed it to a ul it started working. The actual menu I am building is made the same way, but does not work. Why would this be the case?
New fiddle with ul instead of div: https://jsfiddle.net/tgqof8my/
use this code. I hope, you need descreasing your margin in drop. Use this...
#wrapper {
width: 100%;
height: 75px;
background-color: green;
text-align: center;
}
#button {
height: 40px;
width: 25%;
margin: auto;
background-color: yellow;
top: 25px;
position: absolute;
}
#drop {
display: none;
background-color: red;
margin-top: 20px;
}
#button:hover #drop {
display: block;
}
<div id="wrapper">
<div id="button">
Primary Menu Item
<div id="drop">
Dropdown
</div>
</div>
Header
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am usning PlanetPress Connect and I am trying to place text over an image. I have looked through here and tried some examples but they are not working. The closest I can get is this:
Investment Returns and Expenses
this places the image on top and the text underneath it. Can someone help me?
This can be achieved many ways the easiest by using position absolute.
.image h1 {
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
Here is an example - https://jsfiddle.net/ssby4L9c/
two ways to do it, if you know how you want it i explaine it in more details
.background{
width:400px;
height:200px;
background-image: url('http://lorempixel.com/400/200');
margin-bottom:15px;
}
.test2{
position:relative;
}
img{
z-index: 1;
position: absolute;
}
p{
z-index: 2;
position: absolute;
}
<div class="background">
you can put the image as background
</div>
<div class="test2">
<img src="http://lorempixel.com/400/200/cats">
<p>
or you do it this way
</p>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a rectangular-shaped gray div that is supposed to hold a header ("sample text") and a thin turquoise highlight (which is also just a thin rectangle). When I have both the turquoise div and header inside the other div, one gets forced out.
First of all, how can I fix this issue? Also, is there a more efficient way for me to make the turquoise highlight in the gray div?
http://imgur.com/Sm8qy8J,kSuNEh5 (if I have HTML as shown)
http://imgur.com/Sm8qy8J,kSuNEh5#1 (if I remove the turquoise div)
<div class="column w2">
<div id="headerbox">
<div class="highlightbox">
</div>
<h3>sample text</h3>
</div>
</div>
Note I'm using some Sass CSS here:
h3 {
font: $header-type-font;
font-family: $header-type-font;
color: $header-type-color;
text-align: center;
}
#headerbox {
background-color: $box-color;
height: $block-height;
width: 400px;
}
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
}
Add float:left to your highlightbox class:
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
float:left;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have two images:
<img ng-src="image1.jpg" class="regular">
<img ng-src="image2.jpg" class="favorite">
For the second image, I am looking for a way to structure my CSS class such that a marker/symbol appears over the image (example a star for favorite or just a letter - maybe a drawing). Is there a way to do so?
As <img> element cannot have pseudo content, so you could wrap it into a <span> tag or so into the markup, and apply the pseudo content on it instead.
.favorite {
position: relative;
display: inline-block;
}
.favorite:before {
content: "\2605";
position: absolute;
left: 5px;
top: 5px;
}
<span class="favorite"><img src="//dummyimage.com/100x100"/></span>
Absolute position works.
Try:
With:
.regular {
position: absolute;
left: 0px;
}
.favorite {
position: absolute;
left: 100px;
border: 1px solid black;
}
Code here: https://jsfiddle.net/zyng2Lxj/
as image tag doesn't support after pseudoelement, what about a little jquery code like:
$(function() {
$('.favorite').after('<img src="" class="icon" />');
});
the position the image with the class as in this FIDDLE
(all credit to #Christopher Harris for his answer at Does :before not work on img elements?)