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/
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 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 4 years ago.
Improve this question
I'm stumped with the implementation on this one.
The yellow square/bg appears on hover and there should be an offset like that one in the image below. Im using bootstrap by the way. Any help or a point in the right direction would be highly appreciated. Thanks
This image is the design mockup and what i am trying to achieve.
This example will give you an ability to do an animated hover. It uses a css transform:
.row {
background: transparent;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
position: relative;
}
.col-content::before {
transition: all 0.25s ease-in;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
content: '';
z-index: -1;
}
.col:hover .col-content::before {
background: orange;
transform: translateX(5px) translateY(5px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="col-content">
1 of 2
</div>
</div>
<div class="col">
<div class="col-content">
2 of 2
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="col-content">
1 of 3
</div>
</div>
<div class="col">
<div class="col-content">
2 of 3
</div>
</div>
<div class="col">
<div class="col-content">
3 of 3
</div>
</div>
</div>
</div>
This is a very rudimentary example, but should give you an idea. Using a before pseudo element, positioned absolutely with a z-index of -1 and containers with a transparent background should give you the desired results. See the example.
body {
margin: 0;
box-sizing: border-box;
}
.parent {
padding: 32px;
background-color: #dfdbe5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.row1,
.row2 {
width: calc(100vw - 64px);
position: relative;
display: flex;
background: #fff;
clear: both;
overflow: visible;
margin-left: 5px;
}
.row1::after,
.row2::after {
content: "";
display: table;
clear: both;
}
.row1 {
z-index: 1;
}
.row2 {
clear: left;
z-index: 0;
}
span[class^="container"] {
width: calc(100% - 64px / 3);
float: left;
position: relative;
padding: 10px;
border: 5px solid #6690ce;
margin-left: -5px;
margin-top: -5px;
}
span[class^="container"]:hover::before {
content: "";
background: #ffd100;
position: absolute;
padding: 5px;
top: 3px;
left: 3px;
width: 100%;
height: 100%;
z-index: -1;
}
<section class="parent">
<div class="row1">
<span class="container1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
<span class="container3">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container4">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
</div>
<div class="row2">
<span class="container5">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container6">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container7">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
</div>
</div>
This is one approach to implement a hover effect with offset:
JSFiddle Example
If you are able to provide a code example, I can help you a bit more.
<div class="container">
<div class="heading">
<h1>Hey</h1>
</div>
</div>
.container{
width: 100px;
border: 1px solid red;
text-align: center;
}
.heading:hover {
width: 100px;
border: 1px solid yellow;
background-color: yellow;
position: relative;
margin: 4px 0;
left: 5px;
}
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 8 years ago.
Improve this question
If i have a div 100px x 100px.
And i define 10x child divs that should fit next to each other with 10px x 10px.
Why do they not?
try it with your browser: http://dwaves.de/prozentuale-angaben-check.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Statisches Layout</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html,body {
height: 100%;
width: 100%;
}
.container {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
.relative {
width: 10%;
height: 10%;
background: yellow;
position: relative;
float: left;
}
.fixed {
height: 10px;
width: 10px;
background: blue;
position: relative;
float: left;
}
</style>
<body>
<div class="container">
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
</div>
</body>
</html>
In the link you posted, you have 12, not 10 <div> elements. Also, you have an unnecessary <br/> tag. Fix those two issues and they will fit in one row.
JSFiddle demo here (with <br> and two last <div> tags removed).
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;
}
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 got a fiddle http://jsfiddle.net/HEue6/1/ that looks good for a start and now I want it to look and feel more like Office 365. I think the font in Office 365 is Segoe UI Semilight but I'm not sure. In the meantime we've used the Google font Raleway but another font that was mentioned is also called Futura. Now I would like to add the effect that also Office 365 has, that a grey rectangular box marks the selected area.
Can you help me? Do you think that the correct font is chosen or can it get more similar to Office 365? How should I add the grey rectangle for a chosen element?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>-Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,200" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="header-title">Account Administration</div>
</div>
<hr />
<div id="navigation-bar">
<div id="navigation-content">
<!-- SINGLE BUTTON MODULE --> <a href="/admin/adduser">
<div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/search"><div class="navigation-button">
<div class="navigation-header">Search account</div>
<div class="navigation-desc">Search and manage accounts</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/export"><div class="navigation-button">
<div class="navigation-header">Export</div>
<div class="navigation-desc">Export to Excel and other formats</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<form id="inputForm" role="form" class="marg-left" action="/admin/import" method="post" enctype="multipart/form-data">
<input id="upload" name="file" type="file" onchange="this.form.submit();"/><a href="" id="upload_link"><div class="navigation-button">
<div class="navigation-header">Import</div>
<div class="navigation-desc">Import from tab-separated files on disk</div>
</div> </a>
</form>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/setup"> <div class="navigation-button">
<div class="navigation-header">Setup</div>
<div class="navigation-desc">Setup global parameters</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="j_spring_security_logout"><div class="navigation-button" id="logga">
<div class="navigation-header">Logout</div>
<div class="navigation-desc">Exit account administration</div>
</div></a>
</div>
</div>
</div>
</body>
</html>
Its a very quick and dirty implementation, but change your CSS to:
FIDDLE
body {
font-family:'Raleway', sans-serif;
}
#header {
width: 100%;
position: fixed;
height: 45px;
border-bottom: solid 2px #0072c9;
background-color: #FFFFFF;
z-index: 30;
}
#header-title {
left: 250px;
font-size: 22px;
bottom: 7px;
color: #0072c9;
font-weight: 400;
position: absolute;
}
#navigation-bar {
width: 230px;
height: 100%;
box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.2);
z-index: 20;
position: absolute;
}
#navigation-content {
width: 100%;
height: auto;
position: absolute;
top: 47px;
}
.navigation-button {
position: relative;
width: 100%;
height: 80px;
margin: 15px 0px;
}
.navigation-header {
position: absolute;
top: 15px;
left: 10px;
color: #0072c9;
font-size: 25px;
}
.navigation-desc {
position: absolute;
bottom: 15px;
left: 10px;
font-size: 12px;
color: #0072c9;
}
#logout {
border-top: solid 2px #0072c9;
}
#navigation-content a:hover div.navigation-button {
background:lightgrey;
}
#navigation-content a:hover div.navigation-button:before {
content:' ';
display:block;
position:absolute;
right:-20px;
top:15px;
height:30px;
width:30px;
background:white;
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}