Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Having trouble aligning the inner child div tag with the bottom of the parent div tag.
Html:
<div class="product_standard" >
<div class="product_low" >
</div>
</div>
EDIT:
Got answered in the comments by ceejayoz:
on the parent style do:
position: relative
and on the child do:
position: absolute
bottom: 0
width: 100%
I've made a Demo as per the image.
----Below is the CSS Code----
#main{background:url("http://lorempixel.com/500/500");
width:500px;
height:500px;
position:relative;
}
#main:after{
content: "12.49 EURO";
z-index:1;
position:absolute;
bottom:0;
height:50px;
width:100%;
font-size:2em;
color:#000000;
background-color:rgba(255, 255, 255, 0.5)
}
---HTML code look like ----
<div id="main"> </div>
Here is the Working Demo. http://jsbin.com/duhicoqo/1/
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
This is the code I wrote. but it doesn't work as I expected. There is space around the background color still and I want to cover the div with that color.
What is the issue here?
#div {
background-color: black;
margin: 0;
}
This might be happening for 2 reasons :
You don't have initial values set to 0 in CSS for the entire DOM
You have some padding on a parent element,or margin on child element that you need to get rid off
Attaching a runnable snippet for your reference
*{
margin:0;
padding:0;
box-sizing:border:box
}
.main{
background:blue;
padding:1rem;
}
.child{
background:red;
padding:1rem;
}
.grandchild{
background:yellow;
padding:1rem;
}
<div class=main>
<div class="child">
<div class="grandchild">
Text
</div>
</div>
</div>
background-color is not applied on margins. Replace margin: 0; with padding: 0;
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
How can I vertically align text inside the div with the image?
Fiddle: http://jsfiddle.net/C6pf7/3/
EDIT: I cannot use display:table; or height for div1
I tried putting the image as a background in the div that's one way of sort of doing it. Although you can use
vertical-align:middle
Heres a link to question already asked previously.
Vertically align text next to an image?
Use below Code:
<div id = "div1" style='float:left;width:100%'>
<p align='left' >
<img src="http://www.loriswebs.com/html-tips/images/delphinium-close1c.jpg"
id= "img1" style='float:left;'></img>
123
</p>
</div>
Set min-height: for #div
Like
#div1{
text-align: center;
vertical-align : middle;
border: 2px solid red;
min-height:80px;
}
Use line-height:75px in your css and add a new div with style="clear:both;"
Css:
#div1{
text-align: center;
vertical-align : middle;
border: 2px solid red;
line-height: 75px; /* Add this */
}
Updated Fiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Please have a look at my code, I've spent several hours finding a solution to no avail. I'm not a professional Web Developer, I'm just doing this for our project at school.
http://cssdesk.com/6L2sN
What I'm trying to do is, the Black div is at the most top, and then the red below it, then green below it, same goes to the blue one. But it's doing the opposite. I don't understand why, is z-index not working as it should?
Give the items an position: relative, that should work.
Edit: And don't use negative z-index. Just give the element which should lie on the top, the highest, the second one the second highest,...
So the code should looke like:
<style>
#head{
position:relative;
z-index:100;
height:150;
width:222;
background-color:black;
}
#item1{
margin-top:-110;
z-index:90;
transition:0.5s;
background-color:red;
width:222;
height:192;
position: relative
}
#item1:hover{
margin-top:0;
transition:0.5s;
}
#item2{
z-index:80;
transition:0.5s;
margin-top:-110;
background-color:green;
width:222;
height:192;
position: relative
}
#item2:hover{
margin-top:0;
transition:0.5s;
}
#item3{
z-index:70;
transition:0.5s;
margin-top:-110;
background-color:blue;
width:222;
height:192;
position: relative
}
#item3:hover{
margin-top:0;
transition:0.5s;
}
</style>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Well I don't know how to explain it correctly. Here, check this screenshot which has what I want to make. My designer gave me this. If I don't find a solution i'll use images and no code. Is it possible to do this with CSS3?
Here is the image
See the triangle inside that box? I want to do this. Thank you!
Creative use of borders to achieve this effect, no images were harmed in the following sample and you can even set the position of the arrow on the element itself - becomes more straightforward if you can hardcode it for your design.
HTML
<div class="top">
<span class="arrow" style="left:40%"></span>
</div>
CSS
.top {
background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg);
background-size:cover;
width:300px;
height:300px;
border:1px solid #888;
position:relative;
overflow:hidden;
}
.arrow {
border:30px solid #aaa;
border-bottom:none;
border-color:transparent #aaa transparent #aaa;
position:absolute;
left:0;
bottom:0;
}
.arrow:before, .arrow:after {
content:'';
position:absolute;
width:5000px;
bottom:0;
height:30px;
background:#aaa;
}
.arrow:before {
right:30px;
}
.arrow:after {
left:30px;
}
Working JSfiddle sample.
Or the full integrated sample here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a website that needs a few css made banners and I'm having a bit of trouble creating them. I would show you what I had, but their too embarrassing to share...
My goal is to try and only use html and css to build these instead of images. This is kind of what I'm trying to build with the text inside of it...I think that is where I'm failing.
Any help would be much appreciated and would save my head the pain of hitting against the wall.
The only thing you need is a <div> element and manipulate the CSS.
Have a look here and here as they have everything that you will need to get started
I've also created a Fiddle for you that will give you the effect you want.
EXAMPLE
HTML
<div class="bookmarkRibbon"></div>
CSS
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
}
And here is your flag with text inside as you show it in the picture.
EXAMPLE
HTML
<div class="ribbon">BANNER</div>
CSS
.ribbon {
text-align:center;
display:block;
width:100px;
height:100px;
background:#d00202;
}
.ribbon:after {
content:"";
display:block;
position:relative;
top:80px;
width:0;
height:0;
border-width:30px 50px 50px 50px;
border-style:solid;
border-color:#d00202 #d00202 transparent #d00202;
}