I'm using following outlook code which embeds an Outlook calendar in my website, but its aligned to the left by default. Can you please let me know to make it centre aligned to the screen.
Thanks
Code I'm using is
<style unselectable="on">
#wrap {
width:1000px;
height:900px;
padding:0;
position:relative;
left:0px;
top:0px;
overflow:hidden;
}
#frame {
width:1000px;
height:900px;
position:relative;
left:0px;
top:0px;
}
#frame {
-ms-zoom:0.7;
}
</style>
<div id="wrap" unselectable="on">
<iframe id="frame" src="[paste in here the link that outlook.com provides for you ... in between the quotes and without the brackets]"></iframe>
</div>
for center align set margin:0 auto to it's parent (if parent has width in px) or iframe.
#wrap {
width:1000px;
height:900px;
padding:0;
position:relative;
left:0px;
top:0px;
overflow:hidden;
margin:0 auto;
}
Add this line to #wrap in your css
margin: 0px auto;
See jsFiddle.
Related
I have a div fixed on the top and a div content below it.
When I scroll the page I want div content to be over the div top, I put z-index in div content but nothing happens...
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
z-index:300000;
}
html
<div id=top></div>
<div id=content></div>
I need div top to be fixed and content relative.
what is wrong?
https://jsfiddle.net/y97o6kaL/
Give z-index: -1; to #top will work for you.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
z-index: -1;
}
Working Fiddle
I would add position: relative; to the #content div.
This would remove the need for any z-index styles.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
position: relative;
}
<div id=top></div>
<div id=content></div>
I have 5 <div> tags on my page.
container <div>
header <div>
left panel <div>
middle panel <div>
right panel <div>
The left panel, middle panel and the right panel <div> are placed side by side using CSS float left. Now the problem comes when the fetched data is displayed in the middle panel <div> and its height starts increasing according to the amount of fetched data. Left panel <div> stays where it suppose to be but the right panel <div> changes its margin as shown in the figure.
This image explains the exact situation. Below is my CSS.
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
.container{
margin:0 auto;
padding:0;
}
.header{
height:100px;
width:100%;
}
.left_panel{
width:130px;
float:left;
}
.middle_panel{
width:70%;
float:left;
}
.right_panel{
float:right;
width:130px;
}
Please help me out with this. Thanks.
I think the issue is being caused because the combined width of your left, middle and right panels are exceeding the width of your page.
Try something like my fiddle where I have set the width of the left and right panels to 15% so under no circumstance will they exceed 100%
.left_panel {
width:15%;
float:left;
background: yellow;
}
.middle_panel {
width:70%;
float:left;
background: blue;
}
.right_panel {
float:right;
width:15%;
background: pink;
}
http://jsfiddle.net/WPgt9/
Hope this helps
HTML
<div class="container">
<div class="header">Header</div>
<div class="left_panel">Left</div>
<div class="middle_panel">
Middle
</div>
<div class="right_panel">Right</div>
</div>
CSS
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
.container{
margin:0 auto;
padding:0;
}
.header{
height:100px;
width:100%;
background-color:green;
}
.left_panel{
width:15%;
float:left;
background-color:red;
height:400px;
}
.middle_panel{
width:70%;
float:left;
background-color:blue;
height:500px;
}
.right_panel{
float:right;
width:15%;
background-color:red;
height:400px;
}
Fiddle http://jsfiddle.net/WPgt9/9/
when i position this div to the center and added a margin-top of 15px i got this white strip above the white div block. How do i get rid of it so that the white div is separated away from the top margin?
CSS:
body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#middle {
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
}
#bigbg {
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
HTML:
<img src="images/backgroundmain.jpg" id="bigbg">
<div id='middle'>
`
add top: 0; to your id #bigbg.
DEMO
I want three div's next to eachother (I placed them in a .wrapper div so I could float them to the left). The three div's should be centered on the page. So I thought, if I center the .wrapper with margin-left/right: auto, all the three divs would center up. This didnt work.
Also, when I resize the browser the divs move. I don't want that to happen.
I've googled endlessy and put lots of solutions in the script, nothing worked.
Also, it shows differently per browser (firefox, safari and Chrome).
Here's my HTML:
<div id="container">
<div class="wrapper">
<div id="lost"><img src="images/lost.png"></div>
<div id="compass"><img src="images/compass.png"></div>
<div id="sailor"><img src="images/sailor.png"></div>
</div>
<div id="sea">
<img src="images/seaAnimated.png" class="sea" id="animatedSea">
</div>
</div>
And my CSS:
body,html
{
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.wrapper
{
left:auto;
right:auto;
margin-left:auto;
margin-top:8%;
margin-right:auto;
padding-left:auto;
padding-right:auto;
width:100%;
height:75%;
}
#lost
{
float:left;
width:auto;
clear:both;
margin-left:auto;
margin-right:auto;
}
#compass
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sailor
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sea
{
position:absolute;
bottom:0px;
z-index:2;
background-image:url(images/sea.png);
background-repeat:repeat-x;
background-position:bottom;
height:25%;
width:100%;
}
#animatedSea
{
position:absolute;
bottom:10px;
width:auto;
height:25%;
z-index:-1;
}
try this
css
.wrapper{
text-align:center;
margin-top:8%;
width:100%;
height:75%;
}
#lost{
display:inline-block;
width:50px;
height:50px;
background-color:#0C0;
}
#compass{
display:inline-block;
width:50px;
height:50px;
background-color:#06F;
}
#sailor{
display:inline-block;
width:50px;
height:50px;
background-color:#96F;
}
html
<div class="wrapper">
<div id="lost">123</div>
<div id="compass">456</div>
<div id="sailor">789</div>
</div>
jsFiddle Code
You could use a fixed width on your wrapper to get it to center. You do have to specify a width (and not leave it empty) because divs are block-level, meaning that they fill the entire width by default.
http://jsfiddle.net/isherwood/CBMaX/2
.wrapper {
width: 240px;
margin-left:auto;
margin-right:auto;
}
#wrapper
{
text-align: center;
}
#compass
{
width:33.3%;
}
#sailor
{
width:33.3%;
}
#lost
{
width:33.3%;
}
Try this css. Include this css into your css.
<style>
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
position:relative;
}
.header{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
background:#00FFFF;
}
.body_content{
width:900px;
height:500px;
float:left;
padding:0px;
margin:0px;
background:#6666FF;
}
.fotter{
width:900px;
height:150px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
background:#336600;
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="body_content"></div>
<div class="fotter">sss</div>
</div>
Since you float everything in the wrapper, the browser won't pickup the size of your wrapper div, ie, it consider it has 'zero' height.
Solution:
use the magical overflow keyword in wrapper:
.wrapper{
overflow:auto;
//...
}
This is what I see:
What are you expecting?
#sridhar ,
For div the background color should be given like this right
background-color:#003366 and background image sould be given like this
background-image: url(../images/test-background.gif);