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.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.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.
Here's what I have:
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).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>
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.
There are currently 1 users browsing this thread. (0 members and 1 guests)
Bookmarks