Is there any way or workflow that will allow you to see elements that are positioned partially (or wholly) outside the viewport of the browser while designing? Like you can with artboards in Illustrator?
For example: Say I have a rectangle positioned at {left: -50px} in the body (that's a minus in there), meaning that 50px worth of rectangle is outside the viewport. Is there any tool that will visually represent that?
A hack solution: Create a div to contain all the content of your website, but make the width < 100% so that you can see the content as it overflows into the body. Change the width as you like..
<div class="virtualize-overflow">
Normal Content
<div class="overflow">Overflowing content</div>
</div>
.virtualize-overflow{
display:block;
background-color:gray;
width:50%;
height:50%;
margin:auto;
margin-top:30%;
}
.overflow{
display:block;
width:250px;
height:100px;
margin-left:-100px;
background-color:red;
}
Related
I have three container, left, middle and right. Width ratio is like 15%, 70% and 15%. I want to restrict max-width of middle container to 1000px.
This works fine as long as screen resolution is under 1428px. If screen resolution is greater than 1428px, 70% becomes greater than 1000px. So i need to write another rule for these bigger screen.
So middle container is now 1000px. How i can distribute rest space to other two container - left and right? A JavaScript solution gives a certain jump/shake in the browser. I want to avoid these shaking in browser.
OK so here is how things are. I suppose you have html something like this :
HTML:
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
So you have to apply css like this ( I don't know if you're satisfied with browser support but I think there is no css only another way)
CSS:
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.left,.right,.center{
float:left;
margin:0;
padding:0;
display:inline-block;
height: 100px;
}
.left,.right{
width:15%;
background:yellow;
}
.center{
background:red;
width:70%;
max-width:1000px;
}
#media(min-width:1000px){
.left,.right{
width:calc((100vw - 1000px) / 2)
}
}
https://jsfiddle.net/Lghms68y/ Here is a fiddle. NOTE : You'll have to zoom out the page to see the effect :)
This is my site http://lostlegendsmc.net76.net/index.html. Is there any way to keep the absolutely positioned elements from moving when the screen size does. I have already tried to wrap them and that didn't work so I am completely stuck right now
You can wrap everything on a div with hard coded width and height and absolute positioning. If so, your elements will never move, assuming the parent that contains all the content is actually out of the document flow and has always the same size.
Absolute elements are absolute positioned in relation to its parent, so if the parent has an absolute position and a fixed width and height, it prevents its content from being moved as the screen size changes.
Hard coding the size and absolute positioning it is an option: http://jsfiddle.net/gespinha/f6zPy/1/
HTML
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
</div>
CSS
#wrapper {
width:1024px;
height:1024px;
position:absolute;
background:#00f;
}
#one, #two {
width:100px;
height:100px;
position:absolute;
}
#one {
background:#f00;
top:300px;
left:0;
}
#two {
background:#0f0;
top:500px;
right:0;
}
I need to get the fixed margin to the right and left side using a wrapper inside an absolute div (it should work with relative, but I'm limited). Here is the graphics of the desired result using different screen resolutions:
what I am currently getting to work is the left "50px width" margin, but the right "5px width" seems like it's not working.
I've heard that for some things javascript can be helpful, yet I could not find implementations of this kind.
CSS:
.main_wrap{
width:100%
position:absolute;
}
.div_contener {
position:absolute;
height:400px;
border:1px solid blue;
left:50px;
width:100%
margin-right:5px;
width:100%
}
.div_sub_wrapper {
position:absolute;
width:100%;
}
HTML:
<div class="main_wrap">
<div class="div_sub_wrapper">
<div class="div_contener">
<p>sample words</p>
</div>
</div>
</div>
Fiddle
The other thing is that if I use a fixed with size for the contener class, it should not get scrolling like it does now with this 100% width.
You can specify a left and a right css. If the width is auto it will fill the space:
.div_container {
left:50px;
right:5px;
width:auto;
}
http://jsfiddle.net/uxNzF/1/
How can I get two divs aligned in the same "row" on a website?
I have been working on this page, and I have tried to get a menu that floats to the left side of the website and then the content to the side of that.
I have tried using this as the div's CSS:
.menu
{
width:25%;
height:auto;
margin-bottom:2px;
float:right;
position:fixed;
}
.content
{
width:70%;
height:50%;
margin-bottom:2px;
padding: 25px;
float:right;
}
The page is not displaying them side-by-side and floating, but instead how most website such as: http://www.exorithm.com/, where they have a sidebar and an area for content.
Can anyone help?
All my code: http://pastebin.com/KqYkrweE
I think the problem is that you have position:fixed on the menu. If you use position fixed or absolute, it removes the element from the document flow, so float:right becomes irrelevant.
Edit: Here is a better example of achieving the same result
Also bear in mind that you are using percentages for width and then applying a pixel based padding. This could lead to the elements becoming too wide for the page and displaying one below the other.
70% + 25% = 95% with 5% left over.
If the 5% is less than 50px (making the whole width 1000px) then your columns will total greater than the entire width. A better approach would either be to use percentage based padding (not 100% sure how well this works) or to apply your padding, margins and borders to elements inside the floated columns, like so:
// CSS
.leftCol {
float:left;
width:25%;
}
.rightCol {
float:left;
width:75%;
}
.content {
padding:25px;
}
// Markup
<div class="leftCol">
<div class="menu">
Here is my menu
</div>
</div>
<div class="rightCol">
<div class="content">
Here is my content
</div>
</div>
Edit 2:
If you want your menu to stay on screen as the user scrolls down, then position:fixed will do the job. I looked at your page and it looks like you have a fixed width navigation of 206px. Therefore your styles for the existing markup would be better off as something like:
// CSS
.menu {
position:fixed;
left:0;
top:0;
width:206px;
}
.content {
padding: 25px 25px 25px 231px;
}
You are floating right instead of left.
Your .content has a padding of 25px on each side, which means 50px overall. Since your menu is 25% and the content 70%, if your container is smaller than 1000px you run out of space.
I'm trying to create in HTML5 a view made of div's that displays in the center of the page while the background is grayed out. Something like the Silverlight child window. I am having a horrible time trying to get this to work.
You can easily do it with some basic css like so. This is just the css part not javascript to animate it or toggle. But it should be enough to get you started.
CSS
.div {
position:absolute;
top:300px;
width:300px;
height:260px;
left:50%;
z-index:1000;
margin-left: -150px; /* negative half the width of the div */
}
.background {
background:#000;
opacity:0.5;
position:fixed:
width:100%;
height:100%;
z-index:999;
}
HTML
<div class="div">
My Content
</div>
<div class="background "></div>
this is to make the page centered with 900px width, you add this to your div element:
width:900px;margin-right:auto;margin-left:auto;
for the background, you need to add the following style to you body element
color:gray;padding:0px;margin:0px;
you have to include a width in order to center an element. margin-right:auto; margin-left:auto; will not work if you did not include a width!