www.webdeveloper.com
Results 1 to 3 of 3

Thread: image positioning

  1. #1
    Join Date
    Mar 2005
    Posts
    128

    image positioning

    when i place a certain image (lightnin) above my css buttons, it makes my
    buttons inoperable. the buttons work fine, except when the image is overlapping the buttons extended vertical space.
    does it have to do with the way my css buttons are displayed?
    i'm using IE browser. here's my code and a url, if you wanna take a look:
    http://fatbottoms.atspace.com/zbrindex.html


    p.guitar { position:absolute; top: 17px; left:271px }

    p.lightnin { position:absolute; top:-24px; left:101px }

    .buttons a { margin-left:122px;
    color: #0000CC;
    border: 4px solid;
    background-color: #FFCC00;
    font: bold 18px verdana;
    text-decoration: none;
    border-color: #FFFF00 #CC9900 #CC9900 #FFFF00;
    display: block;
    width: 105px; margin-top:16px;
    padding-top:2px; padding-bottom:2px;
    text-align: center; }

    .buttons a:hover {
    color:#0000FF;
    border: 4px ridge;
    background-color: #FFCC00;
    font: bold 18px verdana;
    text-decoration: none;
    border-color: #00FFFF;
    display: block;
    width: 105px;
    text-align: center;}




    <body>


    <div class="buttons" style=margin-top:302px>
    <a title="home sweet home" href="brindex.html">HOME</a>
    <a title="storyline & character desc." href="intro.html">INTRO</a>
    <a title="archives of all the strips" href="archives.html">STRIPS</a>
    <a title="merchandise" href="http://cafepress.com/bluesrock">SWAG</a>
    <a title="request a custom drawn strip for yourself" href="donations.html">CUSTOM</a>
    <a title="contact" href="mailto:fatbottoms@fastmail.us">EMAIL</a>
    </div>



    <div class="globe"><img src="brorbit1.jpg"></div>
    <!--<img style="position:absolute; top:290px; left:289px" src="brlogo2.gif">-->

    <p class="guitar"><img src="guitarsave1.gif"></p>

    <p class="lightnin"><img src="lightnin2.gif"></p>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Remove the image lightnin2.gif and place it as the background in the body:
    Code:
    body { margin:0; padding:0; background: #006 url(lightnin2.gif) no-repeat 101px -10px;}
    Validate your page.

  3. #3
    Join Date
    Mar 2005
    Posts
    128

    reply

    hey your code works great except, now part of the lightnin image is overlapped (hidden ) behind the globe image, because of the way i cropped the globe image (rectangle ). can i set up the buttons in a table and have it work? how would i code this?

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles