I was wondering if i could do something similiar to this site (http://www.viralnova.com/hasnt-bathed-60-years-gallery/?mb=sk&Skyid=815). This site has a background then on top of the background their is a clump of content. As you slide the page back and forth the content stays centered, unless you slide the page to the very left. At this point the page stops adjusting and just stays put on the left. I was wondering if their was something to put this effect on my site. Should i make my site content inside a specific div then tell that div to center?
Sorry if my question is confusing.
-thanks
You can wrap your content like following code
<div class="wraper">
<div class="content"></div>
</div>
set the width to the wrapper and margin auto to left and right of the wraper
.wraper {
display:block;
width:200px; <-- define a width
height: 100px;
margin: 10px auto; <-- set margin left and right to auto
background: yellow;
}
Demo
Related
I would like to place a floating sidebar, next (left side) to my content div (auto centered). I would like to place it 790px from the top and when scrolled, it would still be on the top left side of the content div. I have found solution with javascript. But no of them is working with placing the sidebar next to a centered content (I need it dynamic, for all resolutions). All solutions I have found are changing the sidebar position to fixed (in javascript code), when scrolled (bellow 790px). But if I want it still next to my centered div, I need to use absolute position for the sidebar (even when scrolled), right? Is there any solution for this, please? Thank you very much.
use fixed - it creates the illusion of a following div - for example:
html:
<div id="sidebar">
[ sidebar content ]<br>
[ sidebar content ]<br>
</div>
<div id="container">
[content]<br>
....
</div>
css:
#sidebar {
position: fixed;
top: 60px;
width: 200px;
left: 0;
border: 1px solid #0f0;
}
heres the code - take out the javascript stuff and unnest the divs and let me know if that was acceptable :D
I am trying to create a fixed div in the middle of a page that is scrollable, but I'm not able to get the div to scale to the page size properly. It's set to take 70% of the page (AKA, stopping around 20px from the bottom of the browser) but when you make the height of the browser less, it doesn't seem to react properly.
I can't seem to figure out why this is, suspect it's related to fixed positioning a div and then attempting to use a percentage height but I am sure there is a way around it.
To see what I mean, there is an example website here for this. Drag the window up from the bottom and eventually the div does not resize anymore. :(
The CSS for the div is:
.singlepost {
position: fixed;
height: 70%;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
}
And the structure of the HTML is:
<div class="container">
<div class="container">
[This is the fixed width box I want to size]
</div>
</div>
One idea I had was to use javascript to determine the height of the browser dynamically and set the fixed with to a specific pixel height but I doubt that's the best way to solve this.
Your page is calculating the height of the .singlepost div correctly. It is always 70% and it is adjusting when the page height gets smaller.
The problem is the .singlepost div sits after some content that is a fixed height. So when the content above the .singlepost div is greater than 30% of the page height, the .singlepost div does not exceed the bottom of the page. But when you make the page height smaller, the top content gets less than 30% of the page, and at that point the bottom of the .singlepost div will drop under the bottom of the page.
Rather than setting the height, you can set the top and bottom:
CSS
.singlepost {
position: fixed;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
top: 270px;
bottom: 20px;
}
This assumes that your top content is 270px high.
I have a div that animated from height: 0 to height: 80% (80% of the body) and sometimes the content in this appearing div will be bigger than the div, requiring a scroll bar.
Problem is the scroll bar isn't apparant when the animation is running, and it only appears when it needs to after the animation. (kinda a good thing really)
But I'm being picky because I'm adding the final touches to my site and when the scroll bar randomly appears, it shifts the content left and it just looks funny.
So I want the scroll bar to be there all the time regardless. Is this possible?
Your animation library must be setting overflow: hidden on the outer element, which is why the scrollbar disappears.
Try wrapping the content in one more div:
<!-- the outer element; pass this one to the animation lib -->
<div>
<!-- the scroll bar will appear on this element -->
<div style="overflow: scroll; height: 100%">
<!-- content here -->
</div>
</div>
Try it here: http://jsfiddle.net/e3BkK/
To always display a vertical scroll bar, you can use
#yourDivId {
overflow-y: scroll;
}
If your contained content has a smaller height than #yourDivId, then the vertical scroll bar appears disabled.
If it has a bigger height, then the vertical scroll bar becomes enabled.
Add overflow: scroll to the body element through CSS: http://jsfiddle.net/GMcdf/1/.
body {
overflow: scroll;
}
I used position:absolute; so that when you click the tab "Send this page to your email", at the top, the panel goes down and goes over the content underneath instead of pushing them down. However, using absolute position means that the tab will move to the left when you zoom in or move to the right when you zoom out. It just doesn't look right when you zoom in or out. I want the tab to "go inwards" when you zoom out and not have it "slide". Is it possible to keep the tab from "sliding" and line it up with panel that slides out?
Here's my page with the tab: http://coroomer.com/apartments/ztestpage/index.php
Since you're using absolute positioning, you don't need to bother with javascript/jQuery. You can just modify your HTML/CSS as follows:
Move this:
<p align="center" class="flip" id="toggle">Send this page to your email.</p>
so that it's the first child of this:
<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">
In the above div (id="map_canvas"), set overflow to "visible". Then set #toggle's CSS as follows (tweak values to suit your needs):
#toggle {
font-family: segoe ui;
left: 100px;
top: -44px;
}
If you don't want to go that route (but you really should), you'd have to write a function that fires on window.onresize which sets the #toggle element's position relative to whatever element of your choosing.
you should use another div with fixed width and set it's position to relative, then when you put this div with aboslute positioning into this relative positioned div it won't move with page resizing
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.