Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Location
    UK
    Posts
    3
    Member #
    19360
    Hi all,

    I'm a graphic designer moving into web design. I use the graphicdesignforums for print, and am hoping that this site will be just as useful.

    I can do the basics of web design, more if I have the time to sit down and learn it.

    Anyway, if someone could kindly point me in the right direction of where I can find a solution to my problem I'd be very grateful.

    Basically I'm trying to make 2 banners on my web home page....1 that shows an excerpt from my blog with a link, and 1 that shows an offer plus a link to the offers page.

    I have made an image frame which I want to put the text into but placing them over each other is proving difficult as I'm using tables. Perhaps this is a bad approach on the whole, but as I said I'm a print designer not a web designer!

    I have attached an image to show you what I'm wanting to achieve. The method I have used is to layer the text on top of the image with a div tag, relative position ref and z-index but I don't think this is the right way as it doesn't line up the same in different browsers. And I'm sure there are much more

    Hope someone can help!!
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    http://www.studio378d.com/wdf.php

    <head>
    <title>Hello World</title>
    <style>
    * { margin: 0px; padding: 0px; }
    #pic { position: relative; top: 150px; margin-left: auto; margin-right: auto; height: 162px; width: 252px; background-image: url(http://studio378d.com/images/propic.jpg); }
    #pic h4{ position: absolute; top: 50px; left: 35px; font-family: Arial,sans-serif; }
    #pic p{ position: absolute; top: 77px; left: 35px; text-indent: px; font-family: Arial,sans-serif; font-size: 9px; color: #000000; }
    </style>
    </head>
    <body>
    <div id="pic">
    <h4>July Offer</h4>
    <p>
    FREE business card design included<br>
    with logo design.<br>
    <br>
    CPR will design your business cards<br>
    free of charge when we design your<br>
    logo. July only. <a href="http://#>See details</a>
    </p>
    </div>
    </body>
    </html>

    while($get_it !== true){ continue; }

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    took like 10 min i think.

    while($get_it !== true){ continue; }

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    9 min 59 seconds!

    I defined the margins for the "p" tag and "h" tag to get the same across browsers.

    View example here

    CSS
    Code:
    #promo {
        background-image: url(images/box_bg);
        height: 151px;
        width: 210px;
        position: relative;
        color: #666666;
        font-family: Arial, Helvetica, sans-serif;
    }
    #promo_text {
        width: 180px;
        text-align: left;
        position: absolute;
        left: 16px;
        top: 32px;
    }
    #promo_text   h5 { 
        margin-top: 5px;
        margin-bottom: 5px;
    }
    #promo_text p {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 10px;
    }
    Mark Up
    Code:
    <div id="promo">
      <div id="promo_text">
        <h5>July Offer</h5>
         <p>FREE business card design included with logo design.</p>
         <p>CPR will design your business cards free of charge when we design your logo! July only- <a href="http://www.aerowebbuilder.com">see details</a></p>
      </div> 
    </div>

  6. #5
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    what, was mine not cross browser comp?

    while($get_it !== true){ continue; }

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    No, I mean yeah, I was just explaining that to cpr so he knows why the p and h tags are in the css.

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    just giving you a hard time dude.

    while($get_it !== true){ continue; }

  9. #8
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Actually that took me about 20 min

  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    weeeeeeeeeeeeeeeeee!!!!!!!!

    while($get_it !== true){ continue; }

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    To do it right....


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com