Ir para conteúdo

POWERED BY:

Arquivado

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

derekmelo

problema de leigo

Por , em Desenvolvimento frontend

Recommended Posts

derekmelo    0

derekmelo
Postado

Boa tarde pessoal, tudo bem?

 

Bom, sou novo no forum, entrei agora e para iniciar o tópico, tenho que dizer que não sou desenvolvedor, já faz mais ou menos 2 semanas que estou mexendo no css de um tema de wordpress que comprei para um site que estou fazendo, e estou conseguindo me virar com tudo e estou até entendo razoavelmente o que estou fazendo, mas tem uma coisa em específico q não estou conseguindo fazer...

 

Na header do meu site tenho o espaço para o logo e o botão de cadastro, abaixo disso, tenho a barra de busca com a área de login, como segue no primeiro print.

 

5c16yt.jpg

 

 

O que preciso fazer é basicamente o seguinte:

 

Quero que a barra de busca tenha tamanho horizontal 100%, mas que a barra de busca e o campo de login continuem dentro da parte central do site, para que não quebre o css quando o tamanho do navegador for diminuido.

 

Depois disso, preciso que o logo do site fique na mesma linha da barra de busca, só que fora da área de conteúdo, mas a função de link ainda precisa funcionar, e por fim, preciso que o botão de cadastro fique em baixo desta barra...

 

Montei um print doq preciso, que tbm segue:

 

sl2w4g.jpg

 

Caras, já pesquisei de tudo na internet e não consigo fazer essas modificações... Será que vcs poderiam me ajudar?

 

O arquivo da header é o seguinte:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml [/url]" <?php language_attributes(); ?>>
<head profile="[url=http://gmpg.org/xfn/11]http://gmpg.org/xfn/11 [/url]">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  <?php include (get_template_directory() . '/library/options/options.php'); ?>
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<?php if($bp_existed == 'true') : ?>
<?php do_action( 'bp_head' ) ?>
<?php endif; ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="icon" href="<?php bloginfo('stylesheet_directory');?>/favicon.ico" type="images/x-icon" />
<!-- font_show start -->
<?php font_show(); ?>
<!-- font_show end -->
<?php wp_head(); ?>
</head>
<body <?php body_class() ?>>
<?php if ( is_user_logged_in() ) : ?>
<div id="site-wrapper">
<div id="headerContainer">
<?php locate_template( array( '/library/components/branding-header.php' ), true ); ?>
<?php if ( get_header_image() ) : ?>
<div id="top-header-graphic">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
<?php locate_template( array( '/library/components/discover-header.php' ), true ); ?>
</div>
<?php else : ?>
<div id="top-navigation-bar">
<?php locate_template( array( '/library/components/navigation-header.php' ), true ); ?>
<div class="clear"></div>
</div>
<div id="site-wrapper">
<div id="headerContainer">
<?php locate_template( array( '/library/components/branding-header.php' ), true ); ?>
<?php if ( get_header_image() ) : ?>
<div id="top-header-graphic">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</div>
<?php endif; ?>
<?php locate_template( array( '/library/components/discover-header.php' ), true ); ?>
</div>
<?php endif; ?>
<div id="container"><!-- start #container -->

 

 

E a parte do CSS que controla isso é a seguinte:

 

/*************************** header */ #top-navigation-bar{width:100%;padding:1px 0px;} #topbar{width:980px;margin:0 auto;text-align:left;} #topbar ul{float:right;} #topbar ul li{float:left;} #topbar ul li a{font-size:14px;display:block;line-height:42px;padding:0 15px;} #topbar ul li a:hover{text-decoration:none;} #bp-navigation-bar{width:100%;min-height:35px;padding:0px 0 0 0;} #bp-topbar{width:986px;margin:0 auto;text-align:left;} #bp-topbar ul{float:right;} #bp-topbar ul li{float:left;height:40px;}
#bp-topbar ul li a{font-size:14px;height:35px;display:block;line-height:37px;padding:0 15px;}
#bp-topbar ul li a:hover{text-decoration:none;}
#top-header-graphic img{margin:10px 0;}
#headerContainer{padding:0 0 5px 0;}
#site-wrapper,.footer-wrapper{width:990px;margin:0 auto;padding:0;}
#content{padding:0px 10px;}
.home-page #content{padding:0px;}
#container-background{padding:10px 0px;}
a.pcb,a.pcb span{height:23px;line-height:23px;padding:5px 5px 7px 5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-family:arial;}
a.join-button{font-size:12px;font-weight:bold;}
button#search-submit{height:25px;padding:3px 5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:0;}
#search-submit{font-size:13px;font-weight:bold;margin:0 0 0 5px;}
.prevButton{float:left;margin:5px 0 0 0;}
.nextButton{float:right;margin:5px 0 0 0;}
#header .logo{float:left;line-height:75px;}
#header .description{float:right;}
#header .description h4{float:left;padding-top:20px;}
#header .description .button{float:right;margin:13px 0 10px 15px;font-size:14px;}
#header .description .button a{font-size:15px;}
#header h1{font-size:35px;line-height:40px;text-align:left;padding-top:10px;}
#footer a{margin-right:10px;}
#discoveryBox .searchBox{width:420px;float:left;padding:10px 0 0 5px;}
#discoveryBox .searchBox label{margin:0 10px 0 0;font-family:Arial;}
#discoveryBox .searchBox #search-terms{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;font-size:13px;padding:5px;margin:0 5px 0 0;}
#discoveryBox .profileBox{width:500px;float:right;}
#discoveryBox .profileBox ul{float:right;}
#discoveryBox .profileBox li{float:left;}
#discoveryBox .profileBox li.avatar{margin:0;padding:0;}
#discoveryBox .profileBox a{font-size:17px;line-height:45px;padding:0px 15px;}
#discoveryBox .profileBox li.logout a{border:0;font-family:Arial;}
#discoveryBox .profileBox li.avatar a{padding:0;border:0;}
div.username-panel{font-size:11px;float:left;margin:0 10px 0 0;line-height:50px;}
div.username-panel input{font-size:12px;margin:0 0 0 5px;width:100px;}
div.password-panel{font-size:11px;line-height:50px;float:left;margin:0 10px 0 0;}
div.password-panel input{font-size:12px;margin:0 0 0 5px;width:100px;}
div.submit-button{float:left;margin:10px 10px 0 0;}
/*************************** content */
.generic-box{padding:4px 7px;text-align:left;margin:20px 0px;}
#statsBox h2{float:left;font-size:23px;font-size:26px;margin:5px 10px 5px 5px;}
#statsBox p{float:left;font-size:17px;line-height:20px;margin:10px 0 0 0;}
#statsBox .rss{float:right;margin:5px;}
#statsBox .rss span{padding:6px 5px 7px 5px;}

 

Se puderem me ajudar, agradeço imensamente, realmente não estou conseguindo fazer isso, e nem tenho idéia de como fazer...

 

Muito obrigado.

 

Att,

 

Derek Melo

 

 

Alguém?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O título do seu tópico não te ajuda a ser ajudado.

 

Evite colocar grandes quantidades de código no fórum.

Qndo for assim, poste um link referente ao problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Sabadini    3

Tiago Sabadini
Postado

Realmente cara, é melhor vc postar um link do que esse monte de código.

 

 

 

Quero que a barra de busca tenha tamanho horizontal 100%, mas que a barra de busca e o campo de login continuem dentro da parte central do site, para que não quebre o css quando o tamanho do navegador for diminuido.

Depois disso, preciso que o logo do site fique na mesma linha da barra de busca, só que fora da área de conteúdo, mas a função de link ainda precisa funcionar, e por fim, preciso que o botão de cadastro fique em baixo desta barra...

 

Mas vamos lá...

Se você quer que a largura seja 100% e não quebre quando o navegador vá diminuindo vc precisa ter uma largura mínima no elemento pai que dá o mínimo a soma das larguras e margens dos elementos internos.

 

.meu_elemento_pai{
    /* apenas uma representação */
    min-width : (largura_campo1 + largura_campo2 + largura_campo3)px;
}

 

E posta o link pra gente ver o código e os elementos no navegador.

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