asked on

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

Alicia St Rose

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.

bbimis

ASKER

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.

SOLUTION