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
How can I make something like in wikihow, like a what's new page. Image, then text on top of it, like adding a caption to an image, with HTML and CSS? Is it even possible?
Yes very possible.
<div class="container">
<img src="" class="photoSet">
<h2>Wonderful world</h2>
</div>
.container h2 {
position: absolute;
color: #fff;
background: rgba(0, 0, 0, 0.7);
......
z-index: 2;
}
.container{position: relative;}
another reference
http://css-tricks.com/text-blocks-over-image/
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 2 years ago.
Improve this question
I'm looking for some techlogy that I can make an effect at the bottom of <input> element when I hover on it. Like this:
If I understand correctly, you're looking for box-shadow property. Like this:
input {
width: 280px;
height: 20px;
border: 3px inset;
}
input:hover {
box-shadow: 0 2px cyan;
}
<input type="text">
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 4 years ago.
Improve this question
I want to split this image into half in mobile view and display each of these halfs upperleft and bottom left of the same div
Rough idea how it should look like
something into like this.
Hope this helps!!
.slice{
width:238px;
height:544px;
overflow:hidden;
position: relative;
}
.slice img {
position: absolute;
}
.right-half {
position: absolute;
right: 0;
}
.bottom {
float:right;
}
<div class="box">
<div class="slice">
<img src="https://i.stack.imgur.com/UHwtV.png" />
</div>
<div class="slice bottom">
<img class="right-half" src="https://i.stack.imgur.com/UHwtV.png" />
</div>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Which is the best way to link the logo to in the following scenario? Shall I replace the DIV with Link or can i do something in CSS.
The question is can you link the DIV(logo) from the CSS itself
CSS
.login-container .login-box .login-logo {
background: url("img/logo.png") top center no-repeat;
width: 100%;
height: 149px;
float: left;
margin-bottom: 20px;
}
HTML
<div class="login-logo"></div>
This will be best to link your logo Link
Yup, as you mentioned using an anchor tag instead of a div for your logo is the cleanest solution here. You can keep using the same class, then you shouldn't have to revise the CSS much if at all.
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 6 years ago.
Improve this question
I have a markup that looks like this:
<div>
<ul>
<li>Uno</li>
<li>Dos</li>
</ul>
</div>
Basically, what I want to do is bring the <ul> outside of its parent . How can I do this using CSS if possible? Thanks.
div{ position: relative; }
ul{ position: absolute; top: 100%; }
https://jsfiddle.net/zuremvwh/
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 8 years ago.
Improve this question
I have a little problem with CSS styling. For some reason which I can't determine this won't style correctly and I can't edit the colour in CSS. Here is an image to what the actual header looks like and for some reason the background won't style.
Here's my css styling code for the class that it's using:
.panel-heading {
text-align: center;
background-color: #ececb0;
}
Here's my html code for the header:
<div class="panel-heading"><h3 class="title">DeadSwitchand</h3></div>
use !important over the background-color property:
.panel-heading {
text-align: center;
background-color: #ececb0 !important;
}
JsFiddle