Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble with overlapping image and text?

    Hi,
    I'm relatively new to dreamweaver and creating a site, that has an image as a background.

    I'm simply trying to place text on top of the background image, by overlapping elements.

    I have managed to get h1{ to appear and positioned correctly, infront of the background image.

    The problem is when i tried to add another paragraph of text. (h2{) It does not appear.

    A little help with the coding perhaps?



    HTML CODE:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link href="Make_page.css" rel="stylesheet" type="text/css" />
    </head>


    <body>


    <div id="bg">
    <img src="make_bgrnd.png"/>


    <h1>

    <br/>
    <a href="Homepage_makedo.html";>home</a>
    <br/>
    <a href="make_page.html";> Make</a>
    <br/>
    <a href="do_page.html";>Do</a>
    <br/>community
    <br/>About
    <br/>Join

    </h1>


    <h2>


    03/11 We are asking you on the 07.03.11 to<br/>
    combine brain power, unite as one, and leave the studio for a day,<br/>
    take up a handcraft approach and drop the digital.<br/>
    We have picked out some of the most creative and alternative<br/>
    spots for you and your team to participate in workshops<br/>
    organised by Make Do.<br/></p>
    <p>Depending on the location you choose, this will impact the<br/>
    environment in number of positive ways. click on the map<br/>
    below for a full view of what Leicester has to offer.</p>

    </h2>

    </div>

    </body>
    </html>




    CSS CODE:
    #bg {
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    }


    #bg img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%;
    z-index:1;

    }
    h1 {

    position:relative;
    top: 30%;
    left: 35%;
    font: 14px/1.5 'Gotham rounded';
    color:#282828;
    z-index:10;

    a {
    text-decoration: none;
    }

    h2 {

    position:relative;
    top: 30%;
    left: 20%;
    font: 14px/1.5 'Gotham rounded';
    color:#282828;
    z-index:20;
    }




    a:link {
    color:#171717;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color:#171717;
    }
    a:hover {
    text-decoration: none;
    color:#171717;
    }
    a:active {
    text-decoration: none;
    color:#171717;
    }

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    <h1> tags are not paragraph tags. Instead, replace them with <p></p> tags.

    Heading tags are used to give weight and importance to a bit of text, and while I guess they could wrap entire paragraphs of words, you should probably stick with what they're intended for.

    Here is a good article about heading tags.

    Did you want your background image to display the full dimensions of the browser? If so try adding it as a background-image to your body tag in your stylesheet.
    Teed


  •  

    Posting Permissions

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