so I'm using the following code to change the contents of a div:
document.getElementById("boxed").innerHTML = document.getElementById("aboutus").innerHTML;
And the following is the CSS code behind the div "boxed":
.boxed
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 90%;
min-height: 90%;
height:auto;
top:50%;
background-color:#F5F5F5;
}
How can I keep the div centered vertically while at the same time allowing for vertical resizing based on the content within? I don't want to use overflow; I want the div itself to change size when I click a button that executes the Javascript code.
Related
My first slide on this page, Promotion slide wasn't responsive...I added
max-width: 100%; height: auto
to the css. It works But now it adds too much space below the image when viewing on mobile device. It also makes the title disappear. How do I make this image responsive, but get rid of the space below?
http://new.921thefrog.com/index.php/test-promo-slider/
Here is the rest of the code
.promo_slider_wrapper { margin:10px 0; position:relative; }
.promo_slider { height:235px; overflow:hidden; position:relative; }
.promo_slider img {margin:0; padding:0; max-width: 100%; height: auto }
promo_slider .panel {
overflow:hidden;
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
}
In order to center the image you can apply this on the img elements:
img {
position:absolute;
width: 100%;
height: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
But still you will need some js if H > W because in that case the height should be 100% and the width auto
// EDIT
I just took a look at the page source code
<div class="promo_slider auto_advance" style=" height:418px;">
the height should be set to auto, not 418px
This is the website I am modifying: sb460training.org
Here is the code snippet:
#apdiv1 {
position: absolute;
width: 2815px;
height: 276px;
z-index: 1;
top: 1px;
left: 0px;
background-color: #000;
}
#apdiv2 {
position: absolute;
width: 3150px;
height: 115px;
z-index: 2;
left: 0px;
top: 230px;
}
#apdiv3 {
position: absolute;
width: 221px;
height: 411px;
z-index: 3;
left: 0px;
top: 259px;
background-color: #FFF;
}
#apdiv4{
position: absolute;
width: 2853px;
height: 115px;
z-index: 4;
left: 219px;
top: 401px;
}
Do you know what the width dimensions should be so I can get rid of the annoyingly extra space that shows up to the right of the web page?
Thanks
Like the other answers, I agree that your CSS should change the fixed widths to 100%.
However, in your HTML you have img elements with explicit widths, to substitute background colours. For example, in the "apDiv2" DIV element, you have an in-line image containing white, "SB460_Pic/Secondary title2.jpg". This image is set to 2128px wide, causing the page to extend horizontally.
I would recommend removing the images that are being used to pad the right of each DIV, and instead set background colours in CSS.
UPDATE
Quick and dirty example:
http://pastebin.com/4PmZN1r4
change all your container widths to 100%.
give your html a width:100%; margin:0;
give your body a fixed width:1200px or so.
set your body with a margin: 0 auto if you want it centered.
I've heard the same similar issue.
all you need to do is try working with margin set to 0 and auto.
in most cases, try eliminating the use of 'position absolute' and work more with margin, padding and position relative.
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.
I have
<div id=overlay>
<div></div>
</div>
the height and width of the outer div is set to 100%.
What happens here is, the 100% refers to the size of the element inside (inside div).
I have a dynamically changing element on inside div, and I wanted to be my outer div got the size of the page screen.
NOTE that these div (outer and inside) are a popup element. So I wanted to cover all other elements behind the popup that's why I need the 100% of the page behind.
this is my css for the outer div
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
min-height: 100%;
min-width: 100%;
height: auto !important;
width: auto !important;
text-align:center;
z-index: 1000;
background-image:url(template/popup-bg.png);
}
my js
function overlay(e)
{
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
Simply change the HTML to this
<div id='overlay' class='hideOverlay'>
<div></div>
</div>
Now on clicking simply change the class.
Change your js to this
function overlay(e)
{
$('#overlay').attr('class', 'showOverlay');
}
Check the following style
.showOverlay
{
background-color: red;
height: 100%;
left: 0;
top: 0;
opacity: 0.2;
position: fixed;
width: 100%;
z-index: 1001;
}
.hideOverlay
{
display:none;
}
Background-color is given just to check the div's visibility. Change it as per your choice.
It is nice to have some opacity for overlays to have a better look and feel effect.
Try to set:
position: absolute;
Something like this...
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll