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 8 years ago.
Improve this question
I am writing a web page but
I have a problem to position :after of .posts to bottom-right in all boxes.
Example in jsfiddle:
.posts::after {
content: " ";
width: 0;
height: 0;
border-top: 15px solid #DDD;
border-right: 13px solid transparent;
position: relative;
bottom: -41px;
right: -2px;
z-index: 999;
}
How can I achieve this?
http://jsfiddle.net/mu222/2/
Give .posts a position (relative), then set the after to position: absolute; bottom: 0; right: 0
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 1 year ago.
Improve this question
I want to draw a line before and after the text. And I want to do these features twice. Like in the image below : How can I achieve this? I tried before and after but could not solve it. I am beginner in CSS. THanks for your time.
Something like this, with ::before and ::after pseudo-elements.
.team {
text-align: center;
position: relative;
color: darkslategray;
font-size: 2em;
}
.team-span {
display: block;
text-transform: uppercase;
font-size: 0.5em;
margin-bottom: 0.5em;
}
.team-span::before,
.team-span::after {
display: inline-block;
content: "";
width: 1.5em;
height: 0.2em;
margin: 0 0.5em;
/* the lines */
border-top: 2px solid;
border-bottom: 2px solid;
}
<h2 class="team">
<span class="team-span">Our Best Team</span> Our Team
</h2>
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 1 year ago.
Improve this question
i have a div i.e
<div class="msg-panel" id="mydiv"></div>
CSS code:
.msg-panel {
position: absolute;
height: 35px;
width: 200px;
background-color: green;
top: 30%;
left: 50%;
color: #fff;
display: none;
border-radius: 20px;
font-weight: bold;
}
i want to display this div for ten seconds on button click.
can you help me for this
thanks.
This should work:
$(function() {
$(".msg-panel").show()
setTimeout(function() {
$(".msg-panel").hide()
}, 10000);
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm building a scalable mobile menu icon and the :after pseudo class is not working. This is intended to create 3 black lines to represent the "hamburger" menu icon. The first line is created, the second line is created using the :before pseudo class, however the :after pseudo class is not rendering, thus the third black line is not appearing.
JS Fiddle - https://jsfiddle.net/eeks1swx/
I'm not entirely sure why and I can't seem to figure it out. Any thoughts?
.hamburger {
height: 15px;
width: 20px;
position: relative;
display: block;
cursor: pointer;
box-sizing: border-box;
}
.hamburger__line:before,
.hamburger__line:after,
.hamburger__line {
position: absolute;
height: 20%;
background-color: #000;
width: 100%;
border-left: 0;
border-right: 0;
top: 40%;
}
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
.hamburger__line:before {
top: -200%;
}
.hamburger__line:after {
top: 200%;
}
<div class="hamburger">
<div class="hamburger__line"></div>
</div>
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
... you have an uppercase L - classes are case sensitive.
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 8 years ago.
Improve this question
i need help with CSS. I want to style h2 tag element underline.
Preview (what i need):
You could use :before :pseudo-element to do this.
h2 span {
position: relative;
color: #842990;
font-weight: 100;
border-bottom: 1px solid black;
}
h2 span:before {
content: '';
position: absolute;
width: 35%;
height: 5px;
bottom: -3px;
left: 0;
background-color: black;
}
<h2><span>QUICK NOTES</span></h2>
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 8 years ago.
Improve this question
My client wants to put a black background under the top navigation bar. it can be at
http://seasonlawn.com/CellularSolutionsHTML/catalog.html
can someone please help me how to code this in css
open the default.css file in a text editor and change the following code:
#headertop {
width: 100%;
min-width: 1130px;
padding-bottom: 7px;
background: url("../images/topnav-rep.png") repeat-x left top transparent;
height: 32px;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
border-top: 1px solid grey;
margin-top: -1px;
}
to the
#headertop {
width: 100%;
min-width: 1130px;
padding-bottom: 7px;
background: #000000;
height: 32px;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
border-top: 1px solid grey;
margin-top: -1px;
}
Currently the problem is ../images/topnav-rep.png image is not accesible. In the above line we are removing the image and making the background color for #headertop element black (hex -> #000000).
the problem is that image you included(in .categorymenus ul) is failed to include/load
you can sue firebug to check
what you need to do is include proper path everything else is ok
there also many image failed to load also
Add Background color to this class
#main-nav .categorymenus{background-color:#000;}
.categorymenus ul{here background image failed to load check this once}
<div class="categorymenus" style="display: block;background: url("http://www.lacovachamiami.com/images/layout/lightBackgound.png") repeat ;">