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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem displaying image inside DIV tags

    My logo image won't display. I'm trying to load an image and mouseover nav bar, and a search input all within div tags. Any suggestions on what is wrong?

    CSS:
    Code:
    #canvas{margin:0 auto;width:950px;}
    #header{color:#b60022;
    background:url(images/header.gif) no-repeat;
    width:835px;
    height:275px;
    margin-left:auto;
    margin-right:auto;
    padding:0;}
    #logo{text-align:center}
    #globalnav{ padding: 225px 0 0 0; background-image:url(../img/navheader.gif) no-repeat;}
    #globalnav a{background-image:url(../img/nav.gif);background-repeat:repeat-x;color:#A6A6A6;display:block;font-family:helvetica, arial, sans-serif;font-size:.9em;font-weight:bold;padding:10px 12px;text-align:center;text-decoration:none;text-transform:uppercase;}
    #globalnav a:hover{background-image:url(../img/nav_h.gif);background-repeat:repeat-x;color:#A6A6A6;margin:0;padding:10px 12px;}
    #globalnav ul{list-style-type:none;margin:0 auto;padding:0;}
    #globalnav ul li{border-left:1px solid #3676c4;border-right:1px solid #1957aa;float:left;margin:0;padding:0;}
    #search{float:right;margin:6px 0 0;}
    #search input{background-image:url(../img/input.gif);background-repeat:repeat-x;border:0;color:#696969;font-family:helvetica;font-size:1em;padding:8px 5px 7px 0px;width:118px;}
    DIV tag:
    Code:
    <div id="canvas">
    <div id="header">
    <div id="logo">
    <img src="img/boobmagnetlogo.png">
    </div>
    <div id="globalnav">
    <ul>
    <li><a href="<{$xoops_url}>"><{$smarty.const._YOURHOME}></a></li>
    <li><a href="<{$smarty.const.XOOPS_MODULE_URL}>/soapbox/">News</a></li>
    <li><a href="<{$smarty.const.XOOPS_MODULE_URL}>/wfdownloads/">Magnets</a></li>
    <li><a href="<{$smarty.const.XOOPS_MODULE_URL}>/contact/">Contact</a></li>
    </ul>
    </div>
    <div id="search">
    <form method="get" action="<{$xoops_url}>/search.php">
    <input type="text" value="Keyword Search ..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
    <input type="hidden" name="action" value="results" />
    </form>
    </div>
    </div>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,993
    Thanks
    15
    Thanked 233 Times in 233 Posts
    If this is a banner type of logo, why even put it in a div tag?
    Code:
    <body>
    <img id="mylogo" src="logo.png" />
    <div id="container">
    Then, in the css give #mylogo and #container some 'top' for proper spacing.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I have tried this with and without div tags and end with the same result.

    The reason I used the div tags is because I was looking to use a #wrapper so I could assign attributes like absolute position, margins, and size defined within the css.

    But any solution where the image will load is acceptable at this point.
    Last edited by codefantom; 06-19-2013 at 10:35 PM. Reason: missed spellings

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,993
    Thanks
    15
    Thanked 233 Times in 233 Posts
    Well, the #wrapper or #container has to be position: relative; so the contents can have position absolute with respect to it. And set it at top:100px; or so, and maybe the banner at top: 20px; and look out for z-indexes, they can be important when you're using position absolute. I've used that, and it works very well, it gives you complete control over the top of the page.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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