Solved

DIV Layering in HTML CSS page

Posted on 2012-07-29
4
748 Views
Last Modified: 2012-07-29
Hi, I want to move the <div id="Message"> up 200px into the <div id="top">.  this would be some form of a layer...  Any help would be awesome.

a working version is here:
http://iftbeta.trekfederation.com/newsletter/email.htm

code is below:
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Evan Cutler" />

	<title>Untitled 2</title>
    
    <style type="text/css">
        body {

        }
        #click {
            font-size:9px;
        }
        
        #frame {
        	background-color: #f3f3f3;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-bottom-med.jpg');
            background-color:#cccccc;
            background-repeat: repeat;
            width: 100%;
        }
        
        
        #top {
            position:relative;
            width: 100%;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg.jpg');
            background-size: 100% auto;
            background-color:#cccccc;
            background-repeat: repeat-x;
            min-height: 522px;
            z-index: 4;
        }
        
        #message{
            position:relative;
        	border: 1px solid #ccc;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-med.jpg');
            background-color:#cccccc;
            background-size: auto 100%;
            left: 50%;
            top: -120%;
            width: 700px;
            margin-left: -350px;
            margin-bottom: 50px;
            min-height: 100%;
            color: white;
            padding: 5px 5px 5px 5px;


        }

        #title {
            width: 100%;
            min-height: 50px;
            font-size: 3em;
            font-weight: bold;
            color: black;
        }

        #body {
            min-height:100%;
        }
                
        #footer {
            width: 100%;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-bottom.jpg');
            background-size: 100% auto;
            background-color:#cccccc;
            background-repeat: no-repeat;
            min-height: 160px;

        }
        
        #body p {
            width: 100%;
        }
    </style>
    
    
    
</head>

<body>
    <div id="click" align="center">if you cannot see the below: <a href="#">click here...</a></div>
    
    <div id="frame">
    <div id="top" align='center'></div>    
            <div id="message">
                <div id="title" align='center'><!--put Title here-->This is my Title</div>
                <hr />
                <div id="body"><!--put Body Text here-->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet egestas leo. Vestibulum nulla lorem, tempor et pulvinar et, accumsan quis erat. Cras nulla sapien, euismod quis volutpat sed, sodales a orci. Nullam tristique, mauris nec viverra bibendum, dui justo rhoncus lorem, eu consequat risus nulla ut est. Aenean id sapien malesuada odio malesuada aliquet. Phasellus pharetra cursus urna, id dapibus nulla vehicula nec. Aliquam suscipit egestas porta. Cras et sem hendrerit odio fringilla tempor eu non quam. Maecenas non neque id urna viverra suscipit. Proin viverra lectus ac purus commodo lobortis. Vestibulum non lorem in orci viverra condimentum.
                    </p>
                    <p>
                        Etiam metus enim, auctor et eleifend in, tincidunt at augue. In eleifend consectetur turpis id sagittis. Morbi posuere facilisis augue sit amet semper. Maecenas facilisis volutpat mattis. Vestibulum malesuada, erat eu dignissim egestas, ligula tellus vulputate augue, non elementum orci velit sit amet enim. Praesent elementum facilisis tortor, eu faucibus libero porttitor vitae. Integer a massa in elit rhoncus malesuada non rhoncus purus. Mauris suscipit imperdiet imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sed ipsum vitae sapien gravida mollis ac nec lacus.
                    </p>
                    <p>
                        Proin aliquam magna at nisi dictum elementum. Quisque tellus lorem, dictum ut vehicula eget, egestas a enim. Donec eu dolor et nunc condimentum scelerisque sed id magna. Aenean tristique metus non neque ultricies quis aliquet urna vehicula. Nullam varius nulla nec nibh tincidunt in dictum mauris pretium. Nunc vel tellus metus, at pellentesque est. Aliquam dui eros, vulputate eget interdum nec, molestie eget justo. Ut odio nunc, malesuada vitae bibendum eu, ultricies quis ante. Pellentesque scelerisque bibendum cursus. Nam condimentum dolor et nisl euismod eu luctus ante ultricies. Sed pulvinar posuere rhoncus. Etiam in elementum nisl. Integer porta dapibus mi, sit amet consequat libero venenatis ullamcorper. Curabitur placerat, felis convallis commodo pellentesque, odio tortor scelerisque mauris, vitae semper risus ligula eget est. Donec ac luctus massa. Vivamus in odio augue, non tempus tellus.
                    </p>
                    <p>
                        Maecenas magna lorem, molestie eleifend fringilla quis, tincidunt et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed et felis ipsum. Duis vestibulum laoreet libero ac facilisis. Mauris in sapien dui, suscipit dignissim ligula. Cras vitae consequat massa. Vivamus pretium nibh quis felis interdum sed consectetur purus aliquet. Suspendisse potenti. Suspendisse enim libero, viverra at gravida vel, ornare sed libero. Curabitur vitae nisi nibh.
                    </p>
                    <p>
                        Nulla interdum venenatis diam, et tristique est blandit condimentum. Nam ligula elit, semper at posuere vitae, auctor sit amet purus. Vivamus eleifend ante sem, facilisis volutpat orci. In hac habitasse platea dictumst. Suspendisse vel tortor nibh. Etiam sed tristique sem. Sed et lacus eu sapien eleifend fringilla vitae ac metus. Fusce at leo a dui ornare laoreet at rutrum orci. Aenean laoreet purus a felis euismod eu rutrum velit lacinia. Mauris eu arcu tellus, in aliquet tortor. Etiam ac tempor metus. Fusce non nulla aliquet magna pretium bibendum a et eros. Vivamus molestie felis eget eros adipiscing et varius justo molestie. Duis vehicula malesuada quam ut interdum. Donec luctus sapien at purus volutpat rhoncus. 
                    </p>
                </div>
            </div>
     <div id="footer" align='center'></div>             
     </div>
    
      




</body>
</html>

Open in new window

0
Comment
Question by:Evan Cutler
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38236694
why not just reduce the height of #top?
#top {
   min-height: 322px;
   ...
}

Open in new window

0
 
LVL 9

Author Comment

by:Evan Cutler
ID: 38236698
because I want the layering effect.
If I reduce min-height, it will just reduce the size of the top image.
I want that to remain.

thanks.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38236706
remove position:relative from top and message.

then replace this:
#message {
border: 1px solid #CCC;
background-image: url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-med.jpg');
background-color: #CCC;
background-size: auto 100%;
color: white;
padding: 5px 5px 5px 5px;
margin: -200px auto 0 auto;
z-index: 100;
}

not sure that's what you want though. You want that thick grey bar?

maybe you could post an image of what you want it to look like.
0
 
LVL 9

Author Closing Comment

by:Evan Cutler
ID: 38236712
That did it...
Thanks much...
They are extremely happy.
0

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question