We help IT Professionals succeed at work.
Get Started

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

bbimis
bbimis asked
on
280 Views
Last Modified: 2015-03-01
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
Comment
Watch Question
Commented:
This problem has been solved!
Unlock 3 Answers and 6 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE