We Keep Coding

Centering my site in html

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

Floating scrolling sidebar next to a centered relative div

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

Two divs (one with tinymce) to share a scrollbar

I have these two divs:
<div id="ing" style="position:relative;">
<div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; ">
</div>
</div>
And then in JS I set tinymce to the "ingredients" div. How to make these two divs share a scrollbar like this: http://jsfiddle.net/userdude/hThsx/

Problem her is that your editor uses a contenteditable iframe with an own document.
So this iframe has an own scrollbar and you cannot do anything about it except adjusting the iframe dimensions to the inner documents dimensions. In this case there won't be a scrollbar for the editor iframe.
Now you may follow Cobra_Fasts idea of putting a wrapper div around your two divs and let it have a scrollbar.

slideToggle the whole div

I am developing a page where the content is hidden behind a jquery toggle button. I want the content wrapper to expand both horizontally and vertically when clicked (currently the wrapper only expands vertically).
I'm not sure how to organize my files. Currently, the wrapper has these css attributes:
#wrapper {
width: 900px;
margin: 0 auto;
margin-top: 40px;
background-color:#FFF;
border-radius: 42px;
-moz-border-radius:42px;
padding:30px;
-webkit-box-shadow: 0 0 10px #000;
}
The "panel" div controls the javascript via:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Changing the #wrapper width directly in the css causes the content inside the slideToggle to be truncated: ie. the wrapper won't expand to the proper horizontal size after sliding if the width is set. On the other hand, if I remove the width attribute, the page is no longer properly wrapped. How should I remedy this problem?
<div id="wrapper" >
<div id="intro" class="content-wrapper"><span class="content">CONTENT</span>
<div class="wrapper-inner container"><div class="home-page container">
<div id="panel">

Not sure i fully understand the problem, but here are 2 possible solutions:
1. use the jQuery .animate() method instead of slideToggle, that will give you all the flexibility you need.
2. if you are having problems with the surrounding layout, place your wrapper inside a div with a fixed size, and change your #wrapper to position:absolute

trying to scale jquery panel toggler with position:absolute to my webpage

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