Closed Thread
Results 1 to 2 of 2

Thread: CSS: Basic Positioning Problem

  1. #1
    Root23 is offline Programmer
    Join Date
    Jan 2010
    Posts
    144
    Rep Power
    8

    CSS: Basic Positioning Help

    I'm sure this is pretty simple, but I'm new to using CSS. I'm taking an XHTML class and the teacher just briefly touched on this, and didn't provide much of an example.

    Now for one of the assignments we must create two layers. One layer contains an image map, and a list we'd created in a prior assignment. The other layer contains a form we had also created prior. We're supposed to used embedded styles for this. Here's what he says:

    Part I

    Start with your Page Four. Place your image map in one layer. This layer should have a margin of 20, padding 10, and a red background. Display this layer 15 pixels from the left and 80 pixels from the top. This layer should also include the list that goes with the image map.
    Also on this page, place your form in a different layer. This layer should have padding 15, margin 25, and a blue background. Center this layer (left — right) 20 pixels from the bottom.
    He says if he have problems with the layers overlapping to change the properties of the second layer to relative positioning and to change the numbers so they don't overlap. I can't seem to get it right.

    Here's what I have:
    Code:
    <style type="text/css">
    		.sample {
    				color:blue;
    				font-family: Arial, Helvetica, sans-serif;
    				font-style: oblique;
    				}
    		.layer1 {
    				position:absolute;
    				margin:20px;
    				top:80px;
    				left:15px;
    				background-color:red;
    				padding:10px;
    				}
    		.layer2 {
    				position:absolute;
    				margin:15px;
    				bottom:20px;
    				background-color:blue;
    				padding:15px;
    				text-align:center;
    				}
    		</style>
    Which places the second layer directly on top of the first layer. If I switch to relative it's the same, but now instead of the blue background only surrounding the form it now spans the screen left to right(aside form the margins).

    No matter how much I adjust the numbers for layer2 I can't get them not to overlap. He only wants us adjusting layer2, and not adding anything not already there.

    Ideas?
    Last edited by Root23; 02-28-2010 at 10:14 AM.

  2. CODECALL Circuit advertisement
    Join Date
    Always
    Posts
    Many

     
  3. #2
    Root23 is offline Programmer
    Join Date
    Jan 2010
    Posts
    144
    Rep Power
    8

    Re: CSS: Basic Positioning Problem

    It turns out it was okay to add the 'top' property to layer2. So that solved my problem.

Closed Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Basic problem learning jquery
    By onething in forum JavaScript and CSS
    Replies: 3
    Last Post: 05-24-2011, 10:10 AM
  2. Basic java problem (greatest of 3 nos.)
    By dharmil007 in forum Java Help
    Replies: 7
    Last Post: 01-29-2011, 08:25 AM
  3. Simple Visual Basic problem...
    By Grobi in forum Visual Basic Programming
    Replies: 0
    Last Post: 10-27-2010, 01:29 PM
  4. Basic AJAX code problem
    By DEViANT in forum AJAX
    Replies: 17
    Last Post: 09-03-2010, 01:25 PM
  5. Zoom positioning problem
    By HumansAreFriendsNotFood in forum HTML Programming
    Replies: 0
    Last Post: 06-20-2010, 02:16 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts