Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

PatrickPC

[Resolvido] Mudar menu de posição do menu

Por , em Desenvolvimento frontend

Recommended Posts

PatrickPC    0

PatrickPC
Postado

Olá,

 

Preciso saber como faço para mudar a posição do menu com o topo(logo) do site.

 

O menu ta em cima, gostaria que fosse pra baixo.

 

Segue imagem ilustrando como gostaria?

 

Fico no aguardo

 

Obrigado.

 

topo_site.GIF

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado 

position:absolute;
bottom:0;

 

Opá ...

 

Então Justin ... eu estou usando div's id ok.

 

Ao usar oq você orientou a div se transformou em Draw layer.

 

Segue a style.css, se possivel e puder me ajudar ok.

 

body {
margin: 0px 0px 0px 0px;
padding: 0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
color: #000000;
background-color: #000000;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: fixed;
}

h1, h2, h3 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #CD3788;
}

h1 {
font-size: 44px;
}

h2 {
font-size: 18px;
}

h3 {
}

p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
}

ul, ol {
}

blockquote {
}

a {
color: #CD3788;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.left {
float: left;
margin: 7px 30px 0 0;
}

img.right {
float: right;
margin: 7px 0 0 30px;
}

hr {
display: none;
}

.list1 {
}

.list1 li {
float: left;
line-height: normal;
}

.list1 li img {
margin: 0 30px 30px 0;
}

.list1 li.alt img {
margin-right: 0;
}

#wrapper {
}

/* Header */

#header {
width: 950px;
height: 70px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;

}

/* Menu */

#menu {
}

#menu ul {
margin: 0;
padding: 25px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
}

#menu a {
display: block;
float: left;
height: 29px;
margin-right: 3px;
letter-spacing: -1px;
text-decoration: none;
text-align: center;
text-transform: none;
font-family: verdana;
font-size: 15px;
font-weight: bold;
color: #f0d49d;
background-image: url(images/bt-l.png);
background-repeat: repeat-x;
padding-top: 8px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 35px;
}

#menu a:hover {
   height: 29px;
text-decoration: none;
font-family: verdana;
font-size: 15px;
font-weight: bold;
color: #111b35;
background-image: url(images/bt-l2.png);
background-repeat: repeat-x;

}

#menu li.current_page_item {
}

#menu li.current_page_item a {
}

#menu .first {
}

/* Search */

#search {
float: right;
padding: 10px 10px 0px 0px;
}

#search form {
float: right;
margin: 0;
padding: 4px 0px 0 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}

#search-text {
width: 213px;
height: 28px;
padding: 6px 0 0 7px;
border: none;
background: url(images/img02.jpg) no-repeat left top;
color: #000000;
}

#search-submit {
width: 82px;
height: 28px;
margin-left: 10px;
padding: 0px 5px;
background: url(images/img03.jpg) no-repeat left top;
border: none;
text-indent: -9999px;
color: #FFFFFF;
}

/* Page */

#page {
width: 930px;
margin: 0px auto;
padding: 10px 10px 10px 10px;
background: #E1E1E1;
}

#page-bgtop {
}

#page-bgbtm {
overflow: hidden;
}

/** LOGO */

#logo {
width: 950px;
height: 281px;
margin: 0 auto;
background-repeat: no-repeat;
background-position: left top;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
}

#logo p {
margin-top: -4px;
padding: 0px 0px 0px 145px;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #FFFFFF;
}

#logo h1 {
padding: 30px 0px 0px 140px;
letter-spacing: -1px;
font-size: 48px;
}

#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}

#logo a {
text-decoration: none;
color: #FFFFFF;
}

#banner {
padding-bottom: 20px;
}

/* Content */

#content {
float: left;
width: 610px;
padding: 0px;
}

/* Post */

.post {
background: url(images/img05.jpg) repeat-y left top;
}

.post-bgtop {
background: url(images/img04.jpg) no-repeat left top;
}

.post-bgbtm {
padding: 0px 30px 20px 30px;
background: url(images/img06.jpg) no-repeat left bottom;
}

.post .title {
height: 44px;
margin: 0px;
padding: 36px 0px 0px 0px;
background: url(images/img11.jpg) repeat-x left bottom;
}

.post .title a {
letter-spacing: -2px;
text-decoration: none;
text-transform: lowercase;
font-size: 36px;
color: #CD3788;
}

.post .title a:hover {
color: #424242;
}

.post .meta {
margin-left: 2px;
padding: 4px 30px 2px 0px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
color: #66665E;
}

.post .meta span {
margin: 0px;
}

.post .meta a {
text-decoration: none;
}

.post .entry {
padding: 10px 0px 0px 0px;
}

.post .comments {
display: block;
width: 120px;
height: 18px;
margin: 0px;
padding: 3px 0px 0px 40px;
background: #90BF35;
border: 1px solid #5F817E;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}

/* Sidebar */

#sidebar {
float: right;
width: 300px;
font-family: Arial, Helvetica, sans-serif;
}

#sidebar ul {
margin: 0;
padding: 0;
background:  none;
list-style: none;
line-height: normal;
}

#sidebar li {
background: url(images/img09.jpg) repeat-y left top;
}

#sidebar li ul {
margin: 0px 0px;
padding: 0px 0px 20px 0px;
background: url(images/img10.jpg) no-repeat left bottom;
}

#sidebar li li {
margin: -20px 30px 20px 30px;
padding: 8px 0px 8px 10px;
border-bottom: 1px solid #E0E0E0;
background: url(images/img12.jpg) no-repeat left 13px;
}

#sidebar li li a {
font-weight: normal;
}

#sidebar li li a:hover {
color: #CD3788;
}

#sidebar p {
margin: 0;
padding: 0px 14px;
}

#sidebar h2 {
height: 50px;
margin: 0px;
padding: 30px 0px 13px 30px;
background: url(images/img08.jpg) no-repeat left top;
letter-spacing: -1px;
text-transform: lowercase;
font-size: 24px;
font-weight: normal;
color: #CD3788;
}

#sidebar p {
line-height: 200%;
}

#sidebar a {
text-align: left;
text-decoration: none;
font-weight: bold;
color: #666666;
}

/* Calendar */

#calendar {
}

#calendar caption {
padding-bottom: 5px;
font-weight: bold;
}

#calendar table {
width: 100%;
border-collapse: collapse;
border-bottom: 1px solid #24130F;
border-left: 1px solid #24130F;
border-right: 1px solid #24130F;
}

#calendar thead th {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
background: #24130F;
}

#calendar tbody td {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
}

#calendar tfoot td {
padding: 5px;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
}

#calendar tfoot #next {
border-top: 1px solid #24130F;
text-align: right;
}

#calendar tfoot #prev {
border-top: 1px solid #24130F;
}

#calendar .pad {
border-bottom: 1px solid #24130F;
}

#calendar #today {
background: #24130F;
}

/* Footer */

#footer {
width: 920px;
height: 100px;
margin: 0 auto;
padding: 0;
}

#footer-bgcontent {
}

#footer p {
margin: 0;
padding: 30px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: 11px;
}

#footer a {
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O menu ta em cima, gostaria que fosse pra baixo.

Poste um link para o teu site, ficará mais fácil sugerirmos algo.

 

Esqueça o modo visual do DreamWeaver.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 


<div id="logo">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="950" height="281">
   <param name="movie" value="images/topo_ml.swf">
   <param name="quality" value="high">
   <embed src="images/topo_ml.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="950" height="281">
 </object>
</div>

<div id="header">
<div id="menu">
	<ul>
		<li><a href="#" class="first">Home</a></li>
		<li class="current_page_item"><a href="#">Tatuagens</a></li>
		<li><a href="#">Body Piercing </a></li>
		<li><a href="#">O nosso Staff </a></li>
		<li><a href="#">Eventos e congressos </a></li>
		<li><a href="#">Contatos </a></li>
	</ul>
</div>
<!-- end #menu -->
</div><!-- end #header -->

só mexer no html :lol:

 

estude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Prof 2000    0

Prof 2000
Postado

Pessoal, estou com problema bem similar.

O menu esta em cima normal. Porem não consigo deixar ele centralizado na pagina. A width coloquei 100% para que quando usuario use tela diferente amplia o menu totalmente na tela. Até ai tudo bem, mas assim meu menu tem apenas 5 itens (home, contato downloads,etc...). Mas eles ficam tudo na esqueda ae do centro ate a direita fica uma faixa sem nada... queria deixar centralizado o que eu faço? me ajudemm..

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Pessoal, estou com problema bem similar.

O menu esta em cima normal. Porem não consigo deixar ele centralizado na pagina. A width coloquei 100% para que quando usuario use tela diferente amplia o menu totalmente na tela. Até ai tudo bem, mas assim meu menu tem apenas 5 itens (home, contato downloads,etc...). Mas eles ficam tudo na esqueda ae do centro ate a direita fica uma faixa sem nada... queria deixar centralizado o que eu faço? me ajudemm..

Obrigado.

 

UL > LI > A ?

 

Declare text-align center para a UL, display inline (ou inline-block dependendo do uso) para as LI. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito