Question

I am just facing a problem,can not able to overcome(make be lack of proper identification of problem).The header of a web template is working well in 1280*800 but breaking in larger resolution monitors(1900*1440). The Header contains total three divs as bellows:

<div id="header">

            <!--#LOGO#-->
            <div id="logo">
            <a href="<?php echo SITE_URL;?>"><img src="<?php echo SITE_IMG?>shop-logo.png" alt="<?php echo SITE_NAME;?>"></a>               
            </div>
            <!--#HEADER NAVIGATION#-->
            <div id="welcomeimg">
            <img src="<?php echo SITE_IMG?>shop-willkommen.png" alt="">
            </div>
    </div> <!-- end header-->

And the css of the templates as follows:

#header {padding-bottom:0px; margin-bottom:0; background-color:#CCCCCC;background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;}
#logo
{

left:105px;
#left:-350px;
position:relative;
width:300px;

}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
}

The to div “logo” and “welconeimg” just breaking and getting out of the middle of the header(wraper).

It will be helpful for me,if ant one can solve the problem.

Thanks in advance.

Answer 1

Do you have a link you can show? I tried this, basically your example with the 3 divs having a special background color, that way you can see where they are going.

   
#header {
    padding-bottom:0px; 
    margin-bottom:0; 
    #background-color:#CCCCCC;
    background:url(../images/shop-header-bg.jpg);
    background-repeat:no-repeat; height:100px;
    background-color: red;
}

#logo
{

    left:105px;
    #left:-350px;
    position:relative;
    width:300px;
    background-color:green;

}
#welcomeimg
{
    float:right;
    position:relative;
    right:126px;
    width:380px;
    #top:-100px;
    height:97px;
    background-color: yellow;
}






    
    
        ">shop-logo.png" alt="">               
    
    
    
        shop-willkommen.png" alt="">