http://jsbin.com/iGIToRuV/1/edit
I'm working on a WYSIWYG website designer as an experiment for a variety of reasons. (The plan is to make this desktop and mobile friendly)
One issue I'm having is getting the div#canvas to be 100% via width and height. In addition I don't even see the div#canvas on Firefox either, and unsure as to why that is.
Let me elaborate...
My div#canvas is positioned where I want it. My div.options is positioned on the right:0; and it's width is 291px. I want to tell my div#canvas to fill the page width so it covers the body, but doesn't exceed past it.
I explained the best I could, but to understand more visually, here's a design prototype I made for this post.
The HTML:
<body>
<header class="header">Links</header>
<div class="toolbox">Tools</div>
<div class="content" id="canvas"></div>
<div class="options">Options</div>
</body>
The CSS:
/* Canvas */
#canvas {
position:absolute;
top:81px; left:44px;
width:100%; height:100%;
}
.header {
position:absolute;
top:0; left:0;
width:100%; height:81px;
}
.toolbox, .options {
position:absolute;
top:81px; height:100%;
}
.toolbox { left:0; width:44px; }
.options { right:0; width:291px; }
You can specify all the four dimensions and it will stretch your canvas:
#canvas {
position: absolute;
top: 81px; left:44px; right: 291px; bottom: 0;
}
Related
I want objects on the site not to move out when the browser size changes.
How can I solve this problem?
Here is the code of one object that is moving out
div[class=ygol4] {
border-radius: 200px;
border: 3px solid #ffffff;
width: 15px;
height: 15px;
background: #151515;
position: fixed;
top: 86.3%;
left: 36%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 3;
}
#container{
width:960px;
margin:0px auto;
}
#container img{
width:960px;
}
#left-column{
width:700px;
float:left;
background:lightblue;
}
#right-column{
width:260px;
float:left;
background:gold;
}
#media screen and (max-width:959px){
#container{
width:100%;
}
#container img{
width:100%;
}
#left-column{
width:70%;
}
#right-column{
width:30%;
}
}
#media screen and (max-width:640px){
#left-column{
width:100%;
}
#right-column{
width:100%;
}
#media screen and (max-width:320px){
#container{
width:320px;
}
}
<div id="container">
<img
src="https://unsplash.com/photos/osPrIcTwJy4"/>
<section id="left-column">
this is the left column
</section>
<aside id="right-column">
this is the right column
</aside>
</div>
This is one of the most annoying searches I went through but try following this format it helped me and saved me alot of time. To understand the concept of the method check out this YouTube video https://youtu.be/fA1NW-T1QXc
As far as I'm aware, by using "%" as a unit of measurement, you're telling the object to position itself relative to the element it's in. If that element is the <body> then your element will position relative to the body's size, which causes it to change with the size of the screen. You could probably fix this by surrounding your elements in a <div> with a pre-set width and height in pixels. Let me know if that fixes the issue!
I have a bunch of images being displayed one at a time in a div. The images are all a few thousand pixels by a few thousand pixels.
For example, one image is 4353x2721.
When I preview the page, it zooms in the picture and cuts out things along only the top and bottom edges. It remains the right width.
I need it to just resize it so that it fits the screen/div properly without cutting any parts.
The CSS for that section is:
.largeImage img {
position:absolute;
top:0;
left:0;
width:100%;
}
If I add height:100%;, it still doesn't work. Still zooms in.
You need to set max-width: 100% and max-height: 100% for image. It will make image to fit its larged dimension to parent container limits and scale down other dimension.
Look at snippet:
.largeImage {
width: 150px;
height: 200px;
display: inline-block;
position: relative;
border: 1px solid green;
}
.largeImage img {
display: block;
position:absolute;
top:0;
left:0;
right: 0;
margin: 0 auto;
max-width:100%;
max-height:100%;
}
<div class="largeImage">
<img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg">
</div>
<div class="largeImage">
<img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg">
</div>
I have an issue regarding the following CSS setting:
How to set an element vertically center?
.cycle-overlay { position:absolute; top:0; left:0; }
The common way to do this is take the object to 50% from the top and then margin it 50% of the width of the object back:
.cycle-overlay{
position: absolute;
left: 0px;
width: 100%;
top: 50%;
height: (for example) 100px;
margin-top: (-height/2 that means:) -50px;
}
finaly if u want to have the DIV fixed at the position set the Position to absolute
Use like this. You need to specify negative margin-top with half of your div height. Here i have assumed your div have a height of 200px.
.cycle-overlay { position:absolute; top:50%; left:0; margin-top:-100px; }
First of all you need to set height for a absolute positioned element to make it vertically align middle
.cycle-overlay{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
height:20px;
}
NOTE: TOP, LEFT, RIGHT and BOTTOM accepts only numeric values.
I want to rotate the image in y direction . My code is as follows
Js part
$(function () {
$("#content").click(function () {
var css = {
'transform': 'perspective(2000px) rotateY(-25deg )',
'transition-duration': '500ms'
};
$("#content").css(css);
});
});
CSS part
#mainpage{
height: 100%;
width:100%;
position: absolute;
top:0;
left:0;
}
#menubar{
height: 100%;
width:100px;
position: absolute;
top:0;
left:0;
background: #FF0000;
}
#content{
height: 100%;
width: 100%;
position: absolute;
top:0;
left:0;
background-image:url(images/clubs/Informals.jpg);
background-size:100% 100%;
}
HTML part
<div id="mainpage">
<div id="menubar"></div>
<div id="content"></div>
</div>
The code is working perfectly in firefox. But in chrome the perspective effect comes only after the animation is complete. In IE animation is not working it just changes to the final position. I tried adding the prefix '-webkit-' but still I am having the same problem.
You need yo use browser specific -webkit- for transform
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
To prevent your jquery becoming unmanagable I may be beneficial to put these values within a class and then just add the class rather than the css
i do have 1 parent div and 2 child div, i want to these 2 child div will be equal to its parent height or whenever the content of 1 child div expand the other child div will expand as well. I like to use % instead of px so that when you zoom it in or out the height size stay the same or if any of you guys know some tricks to work for it i will appreciate it here's my js fiddle http://jsfiddle.net/deftmagic/29Puw/4/
<div class="content-wrapper">
<div class="task-pane">
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
<div class="tbl-div">
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
</div>
.content-wrapper{
background:#000;
min-height:0;
width:100%;
overflow:hidden;
}
.task-pane{
background:red;
height:100%;
width:20%;
float:left;
}
.tbl-div {
background:green;
height:100%;
width:80%;
float:right;
}
note: guys i already search some of this same problem and it occur some do use table but my conflict to it is when i use table tag it can't provide to add div tag inside that i needed the most so please if there's any solution instead of table maybe some script i'll appreciate it-- thanks ^^
I've had to do this multiple times and have several tricks to pull this off, and vary depending on case. For this instance, I'd make the parent relative in size, the smaller child absolute, and the other one default so it'll cause the container to size it self.
.content-wrapper{
background:#000;
min-height:0;
width:100%;
overflow:hidden;
position: relative;
}
.task-pane{
background:red;
width:20%;
position: absolute;
top: 0; bottom: 0;
}
.tbl-div {
background:green;
width:80%;
float:right;
}
Updated fiddle: http://jsfiddle.net/29Puw/9/
.content-wrapper {
background:#000;
overflow:hidden;
position: relative;
}
.task-pane {
background:red;
min-height: 100%;
width: 20%;
left: 0px;
position: absolute;
}
And the updated fiddle.