
Originally Posted by
mlegg
how can I change my css to do this?
Replace the top lines of the css with this (this is only an approximation):
Code:
body {
margin: auto;
background-color:maroon;
background-repeat : repeat;
position:absolute;left:18%; right:18%;
}
#mainPicture {
position:relative;width:100%; height : 235px;
width:100%;
padding-top: 0;
margin: 0;
}
#nav1 {
background: transparent url(http://nationalkitchencabinets.com/images/hmenu.jpg) repeat-x scroll left top;
height:40px;
margin:0 auto ;
width:100%;
text-align:center;
}
Then on the pages where you have the div with id="mainPicture" and/or the iframe for the video player:
The div:
Code:
<div id="mainPicture">
<img src="http://nationalkitchencabinets.com/images/KSLogo.jpg" style="position: absolute; width:100%; height:100%" alt="">
</div>
The iframe:
Code:
<div style="position: absolute; bottom:40px; width:40%;right:10px;height:40%;">
<iframe title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/uKow1lb4W7k" allowfullscreen="" frameborder="0" style="position:absolute; height: 100%; width:100%; right:0px">
</iframe>
</div>
Arie.
Bookmarks