Viva, estou a tentar mudar o header da minha loja online, queria que por cima da barra de pesquisa aparecesse uma imagem.
html:/head>
<body onload="initialiseMenu();{EXTRA_EVENTS}">
<div id="topHeader">
<div>{SEARCH_FORM}</div>
</div>
<h2 class="pos_right">This heading is moved right to its normal position</h2>
<div>{SITE_DOCS}</div>
<div id="pageSurround">
<div>
CSS:}
h2.pos_left
{
position:relative;
left:-400px
}
h2.pos_right
{
position:relative;
left:400px
}
#topHeader {
text-align: right;
height: 46px;
padding-right: 0px;
padding-top: 55px;
width: 95%;
margin: 0px auto;
/* SKIN VARIABLE IS cAsE SeNsItIvE */
background-image: url(../../../images/getLogo.php?skin=KitaBlue);
background-repeat: no-repeat;
background-position: top left;
}
.boxTitleLeft, .boxTitleRight {
font-family: "Lucida Sans", "Lucida Sans Unicode", Verdana;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
background-color: #326e96;
height: 15px;
border-top: 1px solid #E1E1E1;
border-left: 1px solid #E1E1E1;
border-right: 1px solid #E1E1E1;
padding: 5px;
}
.boxContentLeft, .boxContentRight {
border: 1px solid #E1E1E1;
background-color:#FFFFFF;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 5px;
}
.boxCategories {
border: 1px solid #E1E1E1;
background-color: #FFFFFF;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 10px;
}
.colLeft {
position: relative;
z-index:5;
left: 0px;
width: 160px;
float: left;
}
.colMid {
position: relative;
width: 100%;
float: left;
}
.colRight {
position: relative;
width: 160px;
float: right;
}
.boxContent {
border: 1px solid #E1E1E1;
background-color: #FFFFFF;
padding: 10px;
color: #333333;
margin-bottom: 10px;
margin-top: 0px;
position: inherit;
}
Tentei colocar uma nova div com o nome de topheader2 mas o problema é que empurra sempre a outra div para baixo, ou para cima se puser a nova por baixo. Como faço para que apareça a imagem sem desconfigurar a #TopHeader?
Agradeço uma ajudinha pessoal
Abraços.
