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
Using Photoshop I can make this effect. My question is how can I achieve this through CSS?
Thank you.
Use a figure tag, and inside place a figure caption element with position absolute, this should be the correct semantic way of doing it.
Depending on your site you'll use ids or clases to target these elements
http://jsfiddle.net/MPB4H/
html
<figure>
<img src="http://i.stack.imgur.com/ejI6T.png"/>
<figcaption>
Here comes your text
</figcaption>
</figure>
Css:
figure{
position:relative;
}
figcaption{
position: absolute;
display: block;
bottom: 65px;
width: 100%;
background-color: rgba(255,255,255,0.7);
color: red;
text-align: center;
font-weight: bold;
}
Your HTML will look like this:
<div class="containter>
<img class="image" src="car.jpg" />
<div class="text>here goes your text</div>
</div>
And here is your CSS:
.container { position: relative; }
.containter .image { position: absolute; z-index: 1;}
.containter .text { position: absolute; z-index: 2; left: 0; bottom: 20px; }
Ask me if you don'g get why I wrote those lines.
Check this out.
Fiddle
HTML
<div class="img-container">
<img src="http://i.stack.imgur.com/ejI6T.png" />
<span class="caption">Here goes text and text and text so on.........</span>
</div>
CSS
.img-container{
width:100%;
position:relative;
}
.img-container img{
width:100%;
}
.caption{
width:100%;
background:rgba(255,255,255,0.8);
color:#CF0943;
position:absolute;
bottom:40%;
font-weight:bold;
padding:5px;
font-family:"Calibri";
font-size:18px;
text-indent:80px;
}
Related
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 3 years ago.
Improve this question
I am brand spanking new to HTML so please excuse the lack of knowledge. I am currently trying to set up a little website and I want to have three sections that a user can click on that will route the user to a different part of the website. Simply put, I want three sections, aligned left, center, and right that is able to be shown on the same line. Every time I am attempting this however, I set up one section on the left, and then I can get a section on the center and the right, but it is going on another line horizontally.
How can I get all three sections to be on the same horizontal line and simply just left, right and center?
The trick is to use display: inline-block although there are many ways to do this.
Suggest you look into flexbox as this will make your future coding life a lot easier.
#container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<div id='container'>
<div id='left'></div>
<div id='center'></div>
<div id='right'></div>
</div>
<html>
<head>
<style>
#parent-container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: yellow;
}
#right {
background-color: green;
}
</style>
</head>
<body>
<div id='parent-container'>
<div id='left'>
Left
</div>
<div id='center'>
Center
</div>
<div id='right'>
Right
</div>
</div>
</body>
</html>
Use bootstrap to align your divs.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/
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
There seem to be various methods of creating a horizontal three column div layout:
Position: relative/absolute;
Float: left/right; with margin: 0 auto; for center div
Float: left; for all divs
Display table / table-cell
Any thoughts on which is best practice and the advantages/disadvantages of each approach.
Thanks,
Edit1: Example edited to include line heights
Edit2: One requirement which I forgot to mention is that columns should all be of equal height, thanks #LGSon for pointing that out.
Edit3: added new method - 4. Display table / table-cell. I know this just feels wrong but in the absence of any other working solutions looks like the best option available at the moment.
1. Position: relative/absolute;
<div id="mainContent" style="position: relative; width:95%; margin: 0 auto; background-color: lightGrey;">
<div style="position: absolute; left: 0%; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="position: absolute; left: 33.5%; width: 33%; background-color:green;">Middle</div>
<div style="position: absolute; left: 67%; width: 33%; background-color:yellow;">Right<br>line2</div>
</div>
<br><br><br>
2. Float: left/right; with margin: 0 auto; for center div
<div id="mainContent" style="overflow: hidden; width:95%; margin: 0 auto; background-color: lightGrey;">
<div style="float:left; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="float:right; width: 33%; background-color:yellow;">Right<br>line2</div>
<div style="margin: 0 auto; width: 33%; background-color:green;">Middle</div>
</div>
<br>
3. Float: left; for all divs
<div id="mainContent" style="overflow: hidden; height:100%; width:95%; margin: 0 auto; background-color: lightGrey;">
<div id="left" style="float: left; width:33%; background-color:blue;">Left<br>line2</div>
<div id="mid" style="float: left; width:33%; background-color:green;">Middle</div>
<div id="right" style="float: left; width:33%; background-color:yellow;">Right<br>line2</div>
</div>
<br>
4. Display table / table-cell
<div id="mainContent" style="width:95%; margin: 0 auto; display: table;">
<div style="display: table-cell; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="display: table-cell; width: 33%; background-color:green;">Middle</div>
<div style="display: table-cell; width: 33%; background-color:yellow;"> Right<br>line2</div>
</div>
In general, use flexbox, its newest and modern way for layout, the other one's can sometimes be at hand when one simply can't use or solve it with flexbox, though that is quite rare.
With flexbox you get exactly that, flexibility, and here is a great article about it: A guide to flexbox
.mainContent {
display: flex;
width:95%;
margin: 0 auto;
}
.mainContent > div {
flex-basis: 33.33%;
}
.mainContent > div:nth-child(1) {
background-color:blue;
}
.mainContent > div:nth-child(2) {
background-color:green;
}
.mainContent > div:nth-child(3) {
background-color:yellow;
}
<div class="mainContent">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
Update based on comment/question edit
Since equal height is a requirement, it is either the above flexbox or the below display: table (unless you want to use script or resort to the old holy grail concept)
These two offers dynamic content without the need of fixed height and can easily switch between stacked vertically or horizontally, using a media query.
.mainContent {
display: table;
width:95%;
margin: 0 auto;
}
.mainContent > div {
display: table-cell;
width: 33.33%;
}
.mainContent > div:nth-child(1) {
background-color:blue;
}
.mainContent > div:nth-child(2) {
background-color:green;
}
.mainContent > div:nth-child(3) {
background-color:yellow;
}
<div class="mainContent">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
Here's my summary of options:
Your first example (Position: Absolute) -- I'd steer away from this, as it's by definition unresponsive to different screen widths and devices.
Second example (Float: [mixed]) -- this one will work, but it takes a lot of hard-coding float values, which will make it difficult to edit later or apply to other layouts with four items per line, for example. Aim for reusability!
Third example (float: left) -- this definitely works if you want everything left-aligned, but not much else.
I agree with #LGSon; Flexbox is the way to go, unless you want to use Bootstrap or a similar framework with a grid system: http://getbootstrap.com/css/#grid
sometimes simple is the best. I would stick with the third alternative, but as you see you have to give a positive value for margin property.
I would use this solution for your problem:
HTML CODE
<div class="left blue">Left</div>
<div class="left green">middle</div>
<div class="left yellow">right</div>
CSS CODE
.left {
float: left;
width: 33%;
margin: 10px 2px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
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 want to convert a html view to a image. This is the div code
<html>
<div class="row">
<!--image div -->
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
convert this div to a image.</div></div>
</html>
i want to convert this html view to a image. does anyone know ?
You can use html2canvas library:
function convertImg() {
html2canvas(document.querySelector('.row'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
$('button').click(convertImg);
.row > div {
background: red;
color: white;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<button>Convert page as img.</button>
<div class="row" style='height:260px; position:relative; top:10px;'>
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
convert this div to a image.</div>
</div>
There's a library that converts HTML to HTML-Canvas. This Canvas can be saved as an image afterwards. Check out the examples:
http://html2canvas.hertzen.com/
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'm trying to make a Tumblr page. The idea is to have several book titles listed on the left side that, when hovered over, display the information for said book on the right side.
Example
There, "Example 2" is being hovered over in the blue box, so its respective information appears in the red box on the right. If I were to hover over "Example 3" from there, the information box for "Example 2" would fade out while the one for "Example 3" would fade in. I hope I'm make some sort of sense here.
Now, I know I could achieve this with pure CSS, but I imagine that would involve creating a custom CSS class for each title in the list. Is there any other way of potentially doing this while avoiding the CSS dance?
Pure CSS, one class for all titles - Codepen
HTML
<div class="menu">
Example 1
<div class="show">
<h1>EXAMPLE 1</h1>
<hr>
<p>text here</p>
</div>
Example 2
<div class="show">
<h1>EXAMPLE 2</h1>
<hr>
<p>text here</p>
</div>
Example 3
<div class="show">
<h1>EXAMPLE 3</h1>
<hr>
<p>text here</p>
</div>
Example 4
<div class="show">
<h1>EXAMPLE 4</h1>
<hr>
<p>text here</p>
</div>
</div>
CSS
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.menu {
width: 120px;
height: 300px;
background-color: #2F43B7;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu a:hover + .show { /* Select .show that is immediately after a */
opacity: 1;
}
.show {
transition: 500ms;
opacity: 0;
background-color: #B72F2F;
position: absolute;
top: 0;
left: 130px;
width: 400px;
height: 300px;
text-align: center;
}
.show h1 {
font-size: 46px;
margin-bottom: 0;
}
.show h1,
.show p {
color: #fff;
}
.show hr {
width: 90%;
border: 2px solid #000;
}
Same effect with jQuery:
$(".show").css("opacity", 0);
$("a").hover(
function(){
$(this).next(".show").stop().fadeTo("slow",1);
},
function(){
$(this).next(".show").stop().fadeTo("slow",0);
});
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
For the moment, my application only uses simple checkboxes with label. Our app designer wants us to change this into clickable images which works like checkbox.
Here an example:
I have no idea how to proceed, should i try to create a div (the square) filled with the image and then set my current checkbox in the bottom right corner of that div ?
Or maybe there's a simplier way to do it ?
http://jsfiddle.net/pwoojpv1/
HTML
<div class="check-img" style="width:100px;height:100px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/883px-Tux.svg.png" >
<div class="check">✓</div>
</div>
CSS
*{
box-sizing:border-box;
}
.check-img{
position:relative;
top:0px;
left:0px;
}
.check-img img{
border:solid 2px gray;
width:100%;
height:100%;
cursor:pointer;
}
.check{
padding-left:5px;
color:grey;
height:20px;
width:20px;
background:grey;
position:absolute;
bottom:0px;
right:0px;
}
.check-img.checked img{
border-color:orange;
}
.check-img.checked .check{
background:orange;
color:white;
}
JS
$(document).ready(function(){
$(".check-img").click(function(){
$(this).toggleClass("checked");
});
});
Put the <img> inside a <label> element that's tied to the checkbox <input> element's id. So when you click on the label (the image), it's the same as clicking on the checkbox. Then wrap the <input> and the <label> inside a <div> so you can position the checkbox on the bottom right corner.
HTML:
<div class="container">
<input id="checkbox1" type="checkbox" />
<label for="checkbox1">
<img src="http://i.imgur.com/rpUZ96Y.jpg" />
</label>
</div>
<div class="container">
<input id="checkbox2" type="checkbox" />
<label for="checkbox2">
<img src="http://i.imgur.com/fKRGSmS.jpg" />
</label>
</div>
CSS:
.container {
display: inline-block;
font-size: 0;
position: relative;
}
.container input {
bottom: 0;
position: absolute;
right: 0;
}
Here's a fiddle.