I am trying to move my divs with the texts hallo1 and hallo2 to my canvas element and make it centered.
Does anyone have and idea on how to achieve this?
Below is code:
<canvas id="canvas1">hi</canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas2"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas3"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas4"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
put everything in a div and center it with text-align:center;. If you still need it to be on the left side of the screen use float:left;, like this:
fiddle
#everything {
text-align:center;
float:left;
}
One posibility without modifying your layout is simply adjusting the position:
div {
position: relative;
left: 80px;
top: -125px;
}
fiddle
A version that adjusts to different text widths is to use 13ruce1337 answer and adjust it vertically
#everything {
text-align:center;
float:left;
position: static;
}
div {
position: relative;
top: -125px;
}
I have to redefine everything position, because the style to the text div would modify it
fiddle 2
Related
I have two div element inside main div element I want those two div float left and the align center of the main div.
Something like this.
[ main div [div1][div2] ]
I have successfully floated the two divs but I am failing to assign the space on both the side. I mean to say align them in center.
code to float left css
.container{
width:100%
height: auto;
}
.img{
width:auto;
height:auto;
float:left;
}
.data{
width:auto;
height:auto;
}
html code
<div class="container">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
if you write text-align:center to parent.It will align their children
thank you for comments
.container{
width:100%
height: auto;
text-align:center;
}
.data{
width:auto;
height:auto;
}
<div class="container">
<div class="img"><img src="https://picsum.photos/200/300"/></div>
<div class="data">data goes here</div>
</div>
You can wrap the img and data div in a div, then float that div right with a 50% width. I prefer not to use floats; flexbox would be a better option in my opinion, but if you like floats, I put some code below you can try.
HTML:
<div class="container">
<div class="dataImgContainer">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
</div>
Add below to the CSS sheet:
.dataImgContainer {
width: 50%;
float: right;
}
I would like to center text underneath images. The images and text in question are in the passphrase generator at this site. I have tried simply adding a <br> in between the images and the text, different display properties, the bottom and top properties, changing flex direction on the text alone, probably more that I can't remember at this time.
This is the JS just in case there is something wrong with the way im generating the images and text.
All help is greatly appreciated!
You use figure and figcaption elements from html5
<figure>
<img src="http://www.innomate.com/application/files/4514/8474/3363/front01.png" />
<figcaption>Testing</figcaption>
</figure>
Here is fiddle to demonstrate:
https://jsfiddle.net/twk3abom/
I'd suggest you to wrap your images and phrases in a figure element to break the layout of the parent that has display: flex;. See this fiddle for a quick reference.
You need to wrap each <img> and <p> tags inside a <div>. That should do the trick.
So it should look like this,
<div>
<img>
<p></p>
</div>
<div>
<img>
<p></p>
</div>
...
You can try to put each element in a <div> nothing else to change.
This would look like this on HTML:
<div id="passphraseBilder">
<div>
<img>
<p>bowling</p>
</div>
<div>
<img>
<p>doughnut</p>
</div>
<div>
<img>
<p>calculator</p>
</div>
</div>
Try This :
div {
width: 200px;
margin: 0 auto;
text-align: center;
border: 1px solid #ccc;
}
img {
width: 100%;
}
p {
color: #fff;
background-color: #000;
margin: 1px 1px 2px 1px;
}
<div id="wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJqYSNS-A4_Vd8CptMrxXbIFS3q1HaHPHZSnscG1iNSMmrMKRS">
<p>Flowers</p>
</div>
I am trying to animate image from left to right and then right to left at the bottom. This is the code i am using which is working fine.
This is the Demo.
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
</div>
I want this animation at the bottom of the screen with the transparent div background. When i am adding this line
<div id="animate" style="position:fixed; bottom:0px; right: 5px; z-index: 999">
Then the animation is not working. Any one can help me in this issue? Thanks in advance.
just remove top:50px; from your image style and use css for animate div
#animate{
position: fixed;
bottom: 0;
overflow:hidden;
left:0;
right:0;
height: 100px;
background: #eee;
}
DEMO
Try adjusting top property to calc(70%); 70% of parent element height
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:calc(70%)"/>
</div>
jsfiddle http://jsfiddle.net/oa5pcfqe/2/ , https://jsfiddle.net/oa5pcfqe/2/embedded/result/
Try following:
<div id="animate" style="position:fixed; height:100px; bottom:0px; left: 5px; z-index: 999">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:0px"/>
</div>
Check Fiddle.
Just remove the parent "animate" div and style the image "bottom" as "0px".
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; bottom:50px"/>
Demo
https://jsfiddle.net/oa5pcfqe/5/
I have two divs. One div contains an image, and the other will contain a text caption that will be layed over the image.
How can I make the caption div width be equal to the image div in a fluid design?
The page is designed using a fluid layout and thus the image will can size with the browser size is changed.
<div id="captions">Captions</div>
<div id="image"></div>
Is there a way to do this in CSS?
You could put both elements into your div and then set the width
<div id="yourdiv">
<img id="yourimg" src="" />
<p class="yourtext">Here some Text</p>
</div>
and then set the width of .yourtext
.yourtext {
width: 100%;
}
FIDDLE
We may inverse the situation as follows:
HTML
<div id="captions">
Captions..
<div id="image"><img src="http://lorempixel.com/450/200/" /></div>
</div>
CSS
#captions{
background: #000;
color:#fff;
/* width:100%;*/
display:inline-block;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image{
width: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image img{
vertical-align: bottom;
}
This is a DEMO
I am continuously drawing some lines in my canvas using kinetic.js and I want a div-text to appear on top of this canvas. Using relative and absolute trick I can place a div in the middle of my canvas but the problem is as I am continuously drawing lines, these lines are being drawn on top of my div-texts which I dont want to happen!
Basic template:
<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
greatTexts
</div>
<div id="container" style="position: relative; width: 100%; height: 100%;">
<canvas></canvas>
</div>
I believe you could also just set a z-index value on both #container and #div-text.
Like this:
<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;z-index:999;">
greatTexts
</div>
<div id="container" style="position: relative; width: 100%; height: 100%;z-index:990;">
<canvas id="myCanvas" height="500" width="500"></canvas>
</div>
This shows an example.
A canvas if by default empty, meaning you can see elements behind it.
Since you placed your <div> before the <canvas>, in the code, the <div> is rendered under the <canvas>.
Solution? Switch the divs around a little:
<div>
<canvas style="position:absolute; width:100%; height:100%; background:red"></canvas>
<div id="div-text" style="background-color:#00baba; position:absolute; margin-top:50%; margin-left:50%;">
greatTexts
</div>
</div>
Just place the div with text after the container div like this
<div id="container" style="position: relative; width: 100%; height: 100%;">
<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
greatTexts
</div>
There's no need to create a canvas element, because as you've mentioned, KineticJS automatically creates those for you.