i need help with css formating? - very new at this but trying really hard

I want the page to scale based on the monitor size.
I would like the box that is a rotating image (the one that has leading the field...) to be centered and padded about 1inch below the top menu box.

then I would like the box that contains the mission statement and the about us to fall about 1 inch below rotating box but be offset from the right.

I can't for the life of me figure it out. I'm assuming I'm using the positioning:absolute; relative and so on wrong but I don't really understand.

here is the code for the rotator...
<style type="text/css">
/* rotator in-page placement */
    div.rotator {
    background-color:#00ffff; 
	position:relative;
    top:20%;
    left: 5%;
    width:30%;
	height:30%;
	display:none;
}
/* rotator css */
	div.rotator ul {
	margin:0;
	padding:0;
}
	div.rotator ul li {
	float:left;
	position:absolute;
    left:10%;
    
    
	list-style: none;
}
/* rotator image style */	
	div.rotator ul li img {
	/*border:1px solid lightblue;*/
    padding-top: 40%;
    padding-left:20%;
    padding-right:80%;
    padding-bottom:20%;
	background: white; 
  
}
    div.rotator p.box1{
        position:absolute;
        top:20px;
        left:50px;
        background:#dccaca;
        font-family: 'Sigmar One', cursive;
        font-size:x-large;
    
    }

    div.rotator p.box2 {
        position:absolute;
        top:80px;
        left:50px;
        background:#dccaca;
        font-family: 'Sigmar One', cursive;
        font-size:Larger;
    }
     div.rotator p.box3 {
         position:absolute;
         top:120px;
         left:50px;
         background: gray;
         font-family: 'Sigmar One', cursive;
         font-size:medium;
     }
    div.rotator ul li.show {
	z-index:500;
}
     #form1 {
         height: 1269px;
     }
 </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">
    function theRotator() {
        //Set the opacity of all images to 0
        $('div.rotator ul li').css({ opacity: 0.0 });

        //Get the first image and display it (gets set to full opacity)
        $('div.rotator ul li:first').css({ opacity: 1.0 });

        //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

        if ($('div.rotator ul li').length > 1) {
            setTimeout('rotate()', 6000);
        }
    }

    function rotate() {
        //Get the first image
        var current = ($('div.rotator ul li.show') ? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

        if (current.length == 0) current = $('div.rotator ul li:first');

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') : current.next()) : $('div.rotator ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = $( sibs[ rndNum ] );


        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);

        //Hide the current image
        current.animate({ opacity: 0.0 }, 1000, function () { setTimeout('rotate()', 6000); }).removeClass('show');

    };

    $(document).ready(function () {
        //Load the slideshow
        theRotator();
        $('div.rotator').fadeIn(1000);
        $('div.rotator ul li').fadeIn(1000); // tweek for IE
    });
</script>

Open in new window


then I call it in the html of :
<div class="rotator">
<ul>
<li >
    <p class="box1">Leading</p>
    <p class="box2">the Field in</p>
    <p class="box3">Joint Replacement</p>
<a href="javascript:void(0)">
<img src="images/tape.jpg" width="300" height="168" alt="pic1" 
    />
</a>
</li>
<li>
    <p class="box2">the Field in</p>
<a href="javascript:void(0)">
<img src="images/footballdoc.jpg" width="1090" height="350"  alt="pic2" />
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/ban3.jpg" width="1090" height="350" alt="pic3" />
</a>
</li>
</ul>

Open in new window


here is my main css:
body{

background-color:aqua;
}
ul{list-style-type:none}
#top-menu  {
    position:relative;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 10%;
    background-color: white;
    margin-bottom: 0px;
    background-image:url('images/ban1.jpg');
    background-repeat:no-repeat;
}
#top-menu pre {
    font-family:Helvetica Narrow, sans-serif;
    font-size:large;
    margin-top:2%;
    margin-left:70%;
  
  
   
    
}
/*the top menu navigation buttons*/
#top-menu ul{width:480px; height:32px; position:absolute; top:80px; right:1%;
}
#top-menu ul li{float:left; width:79px; height:32px; padding:0 0 0 1px;}
#top-menu ul li a{display:block; width:79px; height:32px; background:url(images/menubg-normal.gif) 0 0 no-repeat #7E7B00; color:#ffffff; font-size:8px; font-weight:bold; line-height:32px; text-transform:uppercase; text-align:center; text-decoration:none;}
#top-menu ul li a:hover{background:url(images/menubg-hover.gif) 0 0 no-repeat #7E7B00; color:#7C7900; text-decoration:none;}
/***********************************************/


/*left box stuff

*/
#leftbox {
    padding:0px;
    margin:0px;
    position:absolute;
    top:10px;
    left:160px;
    
    width:15%;
    height:160px;
    background: Yellow;

}
#leftbox pre{
   font-family: 'Shadows Into Light', cursive;
   font-size:100%;
    color:black;
    margin-top: 2%;
    margin-left:12%;
    margin-bottom:2%;
    height: 30%;
}
 p#leftboxbottom{
    color:aqua;
    border-bottom-style:dotted;
    margin-left:20px;
}
/*#leftbox h1{
    position:absolute;
    top:1px;
    text-align: left;
    font: 400 17px/1.3 'Oleo Script', Helvetica, sans-serif;
    color: #2b2b2b;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.1);*/

    
}
#leftbox h2{
    position:absolute;
    top:-1px;
    left:30%;
    margin-left:15%;

}


/*right box format */

#rightbox {
    position:relative;
    top:1%;
    margin-left:40%;
    width:45%;
    height:700px;
    background-color:White;
    box-shadow: 10px 10px 5px #888888;
    
}
#rightbox pre{
    color:Black;
    
    width:12%;
}
 .rightbody{
     color:black;
     margin-left:3%;
 }
 .rightboxbottom{
    color:aqua;
    border-bottom-style:dotted;
    margin-left:0%;
}

.rightbox h1{
    margin-left:20px;
    font-family:Impact;
    font-size:larger;
   
}
#news{
    position:absolute;
    top:30%;
     
}
.overlay{
    position:absolute;
    top:500px;
    left:300px;
    width:300px;
    color:white;
    background-color:orange;
    opacity:900;
    

}
.h1format{
     position:absolute;
     left:10%;
    top:1px;
    text-align: left;
    font: 400 17px/1.3 'Oleo Script', Helvetica, sans-serif;
    color: #2b2b2b;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.1);

}

Open in new window

help-with-css.PNG
bbimisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hi bbimis,
You need to provide a link to the site in it's entirety for anyone to begin to help you.
And if you are dealing with responsiveness (changing layout depending on monitor size), then you need to be using Media Queries.
0
bbimisAuthor Commented:
How about this since I don't really have a place yet to host.  Can u explain to me the difference between position:absolute and position:relative ect.  I'm under the impression that if I wanted a box moved anywhere on the page I would tag it say #movingbox. And give it a position:absolute.  Then if I wanted say a <pre> selector to be inside the box but to the right I would use the position:relative?  That's where my trouble is. Thanks.
0
captainCommented:
Have a look at the w3 resource for positioning, always a great place to start:
http://www.w3schools.com/css/css_positioning.asp
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Slick812Commented:
greeting bbimis, , ? ? ? ?, , Not sure about how to start explaining, the use of CSS for positioning is not as simple as - "the impression that if I wanted a box moved anywhere on the page, and give it a position:absolute.", ,The answer to that is - maybe, or maybe not? Depending ON other ELEMENTS that are in a position RELATIVE to that one and still other elements.
As to - "Then if I wanted say a <pre> selector to be inside the box but to the right I would use the position:relative?"  the answer to that is just NO, it will not.

You can use the position:absolute; inside of the <body> tag, to place that element at a specific single, NON-relative, defined position on that page maybe as,    top:8.36px;  left:7.75%
But it may cover up anything that is behind it at that location. So for me and using  position:absolute;  on the <body> tag , depends greatly on the place on page and the structures that I need there like <div> <table> .
So then, to set something as   position:relative;  , then this does not change the default position, BUT it does change that element to be a "Reference" position, you can declare  top:-10px;  left:-12px; on that element, and that element will move it's display (and only it's display) UP and to the left, BUT, since it is now a "Reference" position, then the area that it originally occupied does NOT move or change, (the area that the Page uses for it's sizing displacement) , , ,  so even if it looks like it moves up and left , the elements above, below, and on sides, Do Not Move at all, and that element can move over top, or underneath the visibility of elements beside it.  . .
Also because the   position:relative;   changes it to a "Reference" position, then you can declare an element Inside of that one, as   position:absolute;   , and if you give it a position say -  bottom:0.23em; right:1.86%;       then it goes to the display position at the bottom right of the element that is  position:relative;   , NOT a position in the <body> . Since this element that is  position:absolute;   can be placed OVER or UNDER other elements, Inside that "position:relative;" element, , then this is called "Layers", or stacking.

But this was NOT easy for me to understand, just from description and examples, you may need to construct some <div> and declare them as position:   and then see how you can use them on a page and experiment to see how and what you know to do with those.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
position:relative... put the element in the position where it naturally falls in the listing order.
position:absolute... take the element out of the normal flow and position it inside of the most immediate ancestor element which has position specified, or default to the body.

As soon as I saw a CSS rule with both position:absolute and float:left on the same element it was clear to me that before we can give you any real help you need to understand the basics.  position and float will conflict because in most cases the computed value will be different for each; though generally the browser will ignore the float and do the positioning.

There is a suggestion that you visit w3schools, but they are pretty lightweight, you probably need to try the tutorials at: https://developer.mozilla.org/en-US/docs/Web/CSS

MDN is a little more challenging, but you are less likely to get incorrect informstion, and you need to challenge yourself if you intend to leasrn how to do web development well.

Cd&
0
bbimisAuthor Commented:
Thanks figured it out.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.