- 27 Jul 2013, 21:28
#42068
Bom amigos venho por esse tutorial mostrar como Deixar o Top,Rodapé e Menu com width:100%;
Segue os passo abaixo que utilizei.
Os arquivos que deve ser alterados: header.tpl e stylesheet.css
Caminho do header:
daí eu tirei a Div <div id="header"> e coloquei fora da Div <div id="container"> após o <body>
Criei uma Div Chamada <div id="fulltopo"> </div> e dentro dela coloquei a Div <div id="header"> </div>
Ficando assim:
Ex:
e coloquei a Div <div id="menu"> </div> dentro da Div <div id="fullmenu"> </div>
Ex:
Ex:
Criei uma Div <div id="fullfooter"> </div> e coloquei a Div <div id="footer"> </div> dentro da "fullfooter"
Ficando assim:
Ex:
VEJA O RESULTADO AQUI
http://www.visaotec.com
Espero que seja útil para alguém,caso surgem dúvidas mande email para: comfevenceremos@gmail.com
Abraços a todos.
Segue os passo abaixo que utilizei.
Os arquivos que deve ser alterados: header.tpl e stylesheet.css
Caminho do header:
Código: Selecionar todos
Caminho do stylesheet.css: catalog\view\theme\seutema\template\common\header.tplCódigo: Selecionar todos
No tema padrão do Opencart o default a Div <div id="header"> está dentro da Div <div id="container">catalog\view\theme\seutema\stylesheet\stylesheet.cssdaí eu tirei a Div <div id="header"> e coloquei fora da Div <div id="container"> após o <body>
Criei uma Div Chamada <div id="fulltopo"> </div> e dentro dela coloquei a Div <div id="header"> </div>
Ficando assim:
Código: Selecionar todos
Depois fui no stylesheet.css e fiz as alterações nas Divs criadas<div id="fulltopo"> /* abre div fulltop*/
<div id="header"> /* abre div header*/
</div> /* fecha div header*/
</div>/* fecha div fulltop*/Ex:
Código: Selecionar todos
No menu eu fiz igual acima,só fiz uma outra Div chamada <div id="fullmenu"> </div> #fulltopo{
width:100%;
background:url('../image/suaimagem.png') repeat;
}e coloquei a Div <div id="menu"> </div> dentro da Div <div id="fullmenu"> </div>
Ex:
Código: Selecionar todos
No stylesheet.css ficando assim:<div id="fullmenu"> /* abre div fullmenu*/
<div id="menu"> /* abre div menu*/
</div>/* fecha div menu*/
</div>/* fecha div fullmenu*/Ex:
Código: Selecionar todos
Já no rodapé eu tirei a Div <div id="footer"> </div> de dentro da Div <div id="container"> </div>#fullmenu{
width:100%;
background:url('../image/suaimagem.png') repeat-x;
}Criei uma Div <div id="fullfooter"> </div> e coloquei a Div <div id="footer"> </div> dentro da "fullfooter"
Ficando assim:
Código: Selecionar todos
No stylesheet.css ficou assim:<div id="fullfooter"> /* abre div fullfooter*/
<div id="footer"> /* abre div footer*/
</div> /* fecha div footer*/
</div>/* fecha div fullfooter*/Ex:
Código: Selecionar todos
Depois disso é só ajustar no stylesheet.css o lugar que vc quer que fique cada item do topo como: #logo,#search ,#welcome e outros.#fullfooter{
width:100%;
height:230px;
margin-top:5px;
float:left;
background:url('../image/suaimagem.png') #00A9F0 repeat-x;
}VEJA O RESULTADO AQUI
http://www.visaotec.com
Espero que seja útil para alguém,caso surgem dúvidas mande email para: comfevenceremos@gmail.com
Abraços a todos.
Editado pela última vez por isaiasrj em 12 Ago 2013, 09:01, em um total de 1 vez.
NACIONAL VENDAS
Sistema de Vendas Online
www.nacionalvendas.com.br
www.facebook.com/nacionalvendasonline
"Posso todas as coisas naquele que me fortalece"
Sistema de Vendas Online
www.nacionalvendas.com.br
www.facebook.com/nacionalvendasonline
"Posso todas as coisas naquele que me fortalece"
