Member Avatar for techyworld

Hi... i need some help.
I have a .jsp file and a div tag containing h1 tag.

<div id="header">
    <h1 class="header1"><fmt:message key="application.title"/></h1>
</div>
<div id="login"><jsp:include page="/WEB-INF/common/login.jsp" /></div>

here my css file:

#header{border-bottom:1px solid #999;margin-bottom:10px;height:10px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
        background: transparent url('../images/test1.jpg')right top no-repeat;
    }

my problem is the second image test1 is not displaying. how can i solve this issue?

Edited by pritaeas because: Moved.
  • 4 Contributors
  • 17 Replies
  • 376 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by k99rs
Member Avatar for techyworld

i did it still dont work.

Member Avatar for techyworld

i add a div tag:

<div id="header">
    <h1 class="header1"><fmt:message key="application.title"/></h1>
    <div id="subHead"></div>
</div>
<div id="login"><jsp:include page="/WEB-INF/common/login.jsp" /></div>


 and in my css file:

#subHead{background: transparent url('../images/test1.jpg')left top no-repeat;}

I dont know why it's not working! :(

Edited by techyworld
Member Avatar for techyworld

ok now it's appearing. but amhaving problem to align it above the border! any idea how to do this?

Member Avatar for pritaeas

Am not sure which border you mean. Anyway, without being able to see the whole thing it's just guess work.

Member Avatar for techyworld 
ok i have a border here

#header{border-bottom:1px solid #999;margin-bottom:10px;height:10px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
        background: transparent url('../images/test1.jpg')right top no-repeat;
    }


and here my subHead:

#subHead{margin-bottom:10px; padding-top:1px; height:55px;width:100%;min-width:960px;
background: transparent url('../images/test1.jpg')right top no-repeat;}


it is being displayed below the border. I want it to be above.
Member Avatar for Noranterry

CSS3 allows this sort of thing and it looks like this:

body {
             background-image: url(images/bgtop.png), url(images/bg.png);
            background-repeat: repeat-x, repeat;
         }

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
Member Avatar for techyworld

@priteas I change both to 55px and still not working.

#header{border-bottom:1px solid #999;margin-bottom:10px;height:55px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
    }

and here my subHead:

#subHead{margin-bottom:10px; padding-top:1px; height:55px;width:100%;min-width:960px;
background: transparent url('../images/test1.jpg')right top no-repeat;}

@noranterry i dont have body. i have only div tag.

Edited by techyworld
Member Avatar for techyworld

I am having problem to align the two image on same line. one on the left and one on the right. Please Help...

Member Avatar for techyworld

I know where the problem is but cant find a solution.

<div id="header">
    <h1 class="header1"><fmt:message key="application.title"/></h1>
    <div id="subHead"></div>
</div>
<div id="login"><jsp:include page="/WEB-INF/common/login.jsp" /></div>

the div id=subHead is after the h1 tag. so thats why the image is displaying after the h1 tag. if i put the div tag above,the image is displayed first , then the h1 tag below. I want both to be align on the same line.
one image on the left, then my text, and one image on the right. all 3 on the same line above the border. how to do this.here my css file:

#header{border-bottom:1px solid #999;margin-bottom:10px;height:55px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
    }

and here my subHead:

#subHead{margin-bottom:10px; padding-top:1px; height:55px;width:100%;min-width:960px;
background: transparent url('../images/test1.jpg')right top no-repeat;}
Member Avatar for techyworld

ok i try a solution using float, but it's not working.

<div id="header" style="width:50%; height:50%;">
    <h1 class="headerTitle"><fmt:message key="application.title"/></h1>    
</div>
<div id="subHead" style="width:50%; height:50%;"></div>

<div id="login" style="width:100%; height:50%; "><jsp:include page="/WEB-INF/sitemesh-common/login.jsp" /></div>

and here my css:

#header{border-bottom:1px solid #999;margin-bottom:10px;float:top left;min-width:960px;
    background: transparent url('../images/test.png') no-repeat;}

#subHead{margin-bottom:10px;float:top right;min-width:960px;
background: transparent url('../images/test1.jpg')no-repeat;}

#login{float:bottom;*margin-bottom:-26px;}

the image test1 is not displaying. why this?

Member Avatar for k99rs

ok. now place both divs (subhead and header) in a single div. such as to have:

<div>
    <div id="header">
    </div>
    <div id="subhead">
    </div>
</div>

This here should work.

Member Avatar for techyworld

@k99rs both image is not appearing now.(When i add the new div tag).

Member Avatar for k99rs

It should have work. Here is a working example.

<html>
<head>
    <style>

        .header{
            background-image:url('DSC04558.jpg');
            float:left;
            width:50%;
            height:50px
        }
        .subheader{
            background-image:url('DSC04559.jpg');
            float:right;
            width:50%;
            height:50px;

        }
    </style>
</head>
<body>
    <div>
     <div class="header">
      </div>
      <div class="subheader">
      </div>
    </div>
</body>
</html>
Edited by k99rs
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.