I have an issue with a project I'm working on, I'm holding buttons inside a container, whenever I try to move them in css the buttons will disappear, and setting a top or right relative value of the container css will move the entire website, what I'm trying to achieve is have all the buttons lined up on the right side, I've included a small sample of the code which is my current work, and a link to the site so you can see the result.
I believe the issue might be with the size of the canvas, but increasing the size of the canvas stretches all the images to fit it, and I'm still unable to move them using the css. Thank you for any help you can provide.
HTML:
<div id="container">
<div id="webgl"></div>
<input type="image" id="intro" src="images/icon-intro.png"/>
<input type="image" id="avatar" src="images/icon-avatar.png"/>
<input type="image" id="news" src="images/icon-news.png"/>
<input type="image" id="play" src="images/icon-play.png"/>
<input type="image" id="stop" src="images/icon-stop.png"/>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#intro,
#intro {
width: 10%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#intro {
z-index: 10;
}
A link to the site that has the issue:
http://playground.eca.ed.ac.uk/~s1572393/
Thanks again for any help or explanations.
After following the recourse in the question comments I was able to solve the issue.
I removed the container and refactored the css for the input elements to the following:
#intro {
position: absolute;
right: 30px;
top: 30px;
z-index: 10;
}
Related
I have a canvas that displays video, and I want to bind a range slider to the left or right side of it. CSS is proving to really fight with me on this one. I can deal with stretching or slider values but just binding it to the side of that canvas is what is proving very difficult. Any help is greatly appreciated. If it's any easier to explain with a horizontal slider I will also be binding one to the bottom, may be simpler since I'm not rotating the style of the slider.
HTML:
<div class="centerVideo">
<canvas id="video-canvas" style="width: 1024px; height: 576px"></canvas>
<div style="float: right; position: fixed;">
<form name="verticalForm">
<output name="verticalValue" for="verticalRange" id="verticalLabel" style="font-size:22px;">Tilt: </output>
<span style="font-size:12px;">0</span>
<input type="range" style="transform:rotate(270deg);" name="verticalInput" id="verticalID" value="0" min="-90" max="0" oninput="tilt(this.value)">
<script>
function tilt(val) {
//do stuff
}
</script>
<br>
<span style="font-size:12px;">-90</span>
</form>
</div>
</div>
CSS:
.centerVideo {
margin: 0;
position: absolute;
top: 30%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Here is a Codepen https://codepen.io/thisisloop/pen/gOaBLjE
I added your Slider to the left of the screen and added a class to the slider div.
Inside this class I added:
position: relative;
right: 15%; //for changing the horizontal position can also use "left:"
bottom: 510px; //for changing the vertical position can also use "top:"
You could do this more cleaner if you used flexbox or grid, here are some nice ressources to learn:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
These are essential for making good layouts.
Hope I could help you
I'm working on a project for which I'm making a chat right now.
Everything chat related is working just fine, but my problem is that I want the chat window to be fixed to the bottom when overflow-y is active so I don't have to manually scroll down to see the latest messages. (Something how Facebook chat & twitch.tv chat works)
(I'm sorry that I cannot show any of my attempts in doing this as I just don't know what to do.)
Thanks in advance.
Edit: Here is some of the HTML & CSS Code.
Note: Actual messages are pushed as strings to logs
//CSS
#chat {
margin-top: 110px;
background-color: #FAF9FA;
height: 75%;
}
#chat-window {
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
//HTML
<div class="col-sm-3">
<div id="chat">
<div id="chat-window">
<div id="logs">
</div>
</div>
<input type="spec" id="message" placeholder="Type your message..."/></br>
<button id="send" class="btn">Send</button>
</div>
</div>
Well if your goal is to simply scroll to the bottom:
window.scrollTo(0, document.getElementById('myChatWindow').scrollHeight);
I don't know if i catch your goal, but i think that just css position:fixed solve your problem.
.chat-box {
position: fixed;
background: #ccc;
right: 0;
bottom: 0;
padding: 20px;
}
example: https://jsfiddle.net/Julivan/261qjdp9/
hope it helps
I need to do tank animation, where according to the liquid level, the height of the tank(image) changes. For this I have written HTML code as below:
<div>
<img id='T1' style="height:0px;position:absolute">
</div>
Now I am obtaining the level information from database using ajax and trying to change the height of the image according to the value of the level parameter using JavaScript.
var level=response;
document.getElementById('T1').height=level."px";
This is changing the height from top to down, but I want down to top.
Inverting the div using transform is not working. Also transition is not working as transition-time cannot be specified in this case.
Please provide me some suggestions.
Position the image absolute to the bottom of the container with bottom: 0 so that it always starts at the bottom and extends from there.
To demonstrate:
var level=14;
document.getElementById('T1').style.height = level+"px";
var changeLevel = function() {
var level = document.getElementById('level').value;
document.getElementById('T1').style.height = level+"px";
}
div {
margin-top: 20px;
position: relative;
height: 50px;
background-color: #eee;
}
#T1 {
height: 0px;
background-color: #909;
width: 100%;
position: absolute;
bottom: 0;
}
<input id="level" type="text" placeholder="Level" />
<input type="button" value="Change Level" onclick="changeLevel()"/>
<div>
<div id='T1'></div>
</div>
You can add following CSS for this
#t1 {
position: absolute;
left: 0px;
bottom: 0px;
}
or
<div>
<img id='T1' style="height:0px;position:absolute; bottom: 0px; left: 0px;">
</div>
Hard to figure out what you are trying to do. Maybe a link would help. Only thing I could see is style.height is written incorrectly.
document.getElementById("T1").style.height = level + "px";
I am making a simple reactjs app where I need to put a button over image.
My html looks like:
<div className={"panel-body"}>
<img className={"img-responsive center-block"}
src={album.photos.data[0].source} />
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
Its all fine except button is shown below the image.
But I want to show the button over the image or in the middle of the div
How can I make this work ?
make button position relative and use z-index: maybe it will be helpful for you.
If you want to center the button in a div, while there is a background image to the div. I would suggest, to assign a background image for the div, rather than inserting an image into the div. Check out the fiddle:
http://jsfiddle.net/49s505sa/1/
HTML:
<div id="wrapper">
<button type="button">Your Button</button>
</div>
CSS:
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
background: url('http://placehold.it/350x150') /*assign image, for demo purposes */
}
button {
height: 20px;
position: relative;
margin: -20px -50px;
width: 100px;
top: 50%;
left: 50%;
}
So, inside the render method
var style = {
backgroundImage: 'url(' + album.photos.data[0].source+ ')'
}
<div className={"panel-body"} style={style}>
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
In this way, we will dynamically assign images to particular divs. And wont have to worry too much about styling.
Hope that helps!
Use z-index properties
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).. Note: z-index only works on
positioned elements
(position:absolute, position:relative, or position:fixed).
img {
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}
I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.
I am not sure why this is occurring as all my code is very simple:
$(function() {
$('#banner').cycle('fade');
});
<div id="banner">
<img src="images/banner01.jpg" />
<img src="images/banner02.jpg" />
<img src="images/banner03.jpg" />
<img src="images/banner04.jpg" />
<img src="images/banner05.jpg" />
</div>
#banner
{
width: 750px;
text-align: center;
height: 370px;
margin: auto;
margin-top: 20px;
}
#banner IMG
{
width: 750px;
height: 320px;
}
I am not sure what I have done wrong or what I can do to fix it. Would anyone know?
The site is here if you want to look: http://austin7.org.au/
EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.
Set the left to 0.
#banner img{
left: 0;
}