Suporte phpBB

Suporte com ética e seriedade
https://suportephpbb.com.br/

Problemas com CSS no header

https://suportephpbb.com.br/viewtopic.php?t=44421

Página 1 de 2

Problemas com CSS no header

Enviado: 24 Mar 2011, 20:22
por sayroz
URL do Fórum: http://www.measurefiles.com.br/camara/p ... cao/forum/

A quem puder me ajudar acessem o forum acima e vejam o header..

eh tá ridículo, eu sei rsrs mas to tentando e por isso estou aqui. vamos aos problemas.

1° Quero que o .navbar volte ao normal (igual a esse do forum).
2° arredondar a div do search box, igual a imagem.
3° aumentar o input box e colocar um imagem no botao (submit). (ja tenho a imagem)

Vejam o JPG de como quero deixar o header : http://www.measurefiles.com.br/camara/p ... Social.jpg

edit: eu q eu tinha feito estava bem melhor (mais organizado) mas perdi o arquivo, estou em viajem e segunda retorno. Vinny-- conto com a tua ajuda. rs!

Re: Problemas com CSS no header

Enviado: 24 Mar 2011, 20:30
por _Vinny_
sayroz, o seu fórum não esta acessivel aqui e a imagem não bem clara do que pretende fazer.

Re: Problemas com CSS no header

Enviado: 25 Mar 2011, 01:14
por sayroz
_Vinny_ escreveu:sayroz, o seu fórum não esta acessivel aqui e a imagem não bem clara do que pretende fazer.
veja agora.

Re: Problemas com CSS no header

Enviado: 25 Mar 2011, 10:29
por RobsonArsB
poste o arquivo overall_header.html

Re: Problemas com CSS no header

Enviado: 28 Mar 2011, 18:00
por sayroz
ssegue os 3 arquivos nos quais estou alterando, engraçado que no mmeu forum offline a formatacao esta bem diferente, inclusive aparece a parte de busca, ja no online nao aparece.

Código: Selecionar todos

<!--- box border START -->
<div id="box">
<div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div id="left-border">
<div id="right-border">

<!--- box border END -->
<div class="inside">
 <div class="notopgap">
<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
			
			<div id="site-description">
				<div class="header-pad"><a href="{U_INDEX}" title="{L_INDEX}" id="logo"></a></div>
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                <h1 class="site-desc" >{SITENAME}</h1>
                <P class="site-descB"> POPULAR </p>
				<p class="site-descA">{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
            <div style="height: 140px ;">
                  
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
               </div>
               
			</div>
		<!-- ENDIF -->
    
			<span class="corners-bottom"><span></span></span></div>
		</div>

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>
			<!-- INCLUDE prime_quick_login.html -->
			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>
	</div>

	<a name="start_here"></a>
	<div id="page-body">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
colours.css

Código: Selecionar todos

h1 {
	color: #2657A8;
}
#search-box {
	background: #FFFFFF url("{T_THEME_PATH}/images/gradient.png");
	background-repeat:repeat;
	max-width: 600px;
	color: #FFFFFF;
	height: 110px;
	top:-330px;
	width: 250px;
}
#search-box #keywords {
	background-color: #FFF;
}

#search-box input {
	position:relative;
	border-color: #0075B0;
	top:40px;
	left:-150px;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	
	
	color: #FFFFFF;
	margin: 0 auto;
	margin-bottom: 4px;
	min-width: 590px;
}

.navbar {
	background-color: #d2d2d2;

}
common.css

Código: Selecionar todos

h1 {
	/* Forum name */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #1F5592;
	margin-bottom:auto;
	margin-left:auto;
	margin-top:auto;
	margin-right:auto;
	font-weight: bold;
	font-size: 5em;
}

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #0099FF;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}
#logo {
	width: auto;
	padding: 0px 0px 0 0px;
}
#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}
#search-box #keywords {
	width: 95px;
	background-color: #FFF;
}

#search-box input {
	position:relative;
	border: 1px solid #b0b0b0;
	left:-150px;
}
#search-box input.button1 {
	padding: 1px 5px;
}

#search-box li {
	text-align: right;
	margin-top: 4px;
}

#search-box img {
	vertical-align: middle;
	margin-right: 3px;
}

/* Site description and logo */
#site-description {
	float: left;
	width: 40%;
	
}
.header-pad {
	padding-top: 10px;	/* adjust this according to the size of your site logo */
	padding-left: 08px;
	
}

.site-desc {
	position:relative;

	padding-left: 130px;
	top:-156px;
	marging-bottom: 0px;
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}
.site-descA {
	position:relative;
	font-size: 2.9em;
	padding-left: 130px;
	top:-200px;
	margin-top: -5px;
	marging-bottom: 0px;
	color:#8E918E;
	font-weight: bold;
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}
.site-descB {
	position:relative;
	font-size: 3.0em;
	padding-left: 130px;
	top:-166px;
	marging-bottom: 5px;
	margin-top:-8px;
	color:#0000FF;
	font-weight: bold;
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}


/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	color: #000000;
	padding: 0 5px;
	height: 150px ;

}

.navbar {
	background-color: #ebebeb;
	padding: 0px 10px;

Re: Problemas com CSS no header

Enviado: 28 Mar 2011, 19:27
por RobsonArsB
em common.css
procure por:

Código: Selecionar todos

#site-description {
   float: left;
   width: 40%;
   
}
após adicione:

Código: Selecionar todos

.logomarca {
	float: left; 
	width: 380px
	padding: 15px 0;
}
.logomarca h3,.logomarca p {
	margin-left: 10px; 
	margin-right: 10px;
}

.lateraltop {
 	margin: 0 0 0 390px;
}

agora no seu arquivo overall_header.html

faça isso:

Código: Selecionar todos

<div class="logomarca">
    Aqui você coloca a formatação feita do seu logo
        </div> <!-- end .logomarca -->
  <div class="lateraltop">
    Aqui você coloca a formatação da sua caixa de busca
        </div><!-- end .lateraltop -->
Abaixo coloquei o mesmo codigo usado acima em "quote" para poder explicar :
<div class="logomarca">
Aqui você coloca a formatação feita do seu logo
</div> <!-- end .logomarca -->
<div class="lateraltop">
Aqui você coloca a formatação da sua caixa de busca
</div><!-- end .lateraltop -->
Onde está marcado de verde você jogara sua formatação tanto logo como busca conforme ilustrado.
qualquer duvida só avisar!

Re: Problemas com CSS no header

Enviado: 29 Mar 2011, 03:40
por sayroz
A dica que voce me deu ja ajudou bastante. Veja novamente o o header do forum no link passado acima.
estou tentando encaixar as 3 colunas "logomarca","centrotop","lateraltop"
logomarca e lateral seguirá a logica que vc indicou, e no centro ficara o nome, desc e etc do site.

Não estou conseguindo alinha-las no top, sobrando assim um espacao na parte de baixo, e em cima tbm.

como posso ajustar isso?
abaixo segue os codigos onde estou mexendo.
overall.html

Código: Selecionar todos

<div class="logomarca" >
			<div id="site-description">
				<div class="header-pad"><a href="{U_INDEX}" title="{L_INDEX}" id="logo"></a></div>
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
               	<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
             
			</div>
		   </div>
           <div class="centrotop">
            <h1 class="site-desc" >{SITENAME}</h1>
                <h3 class="site-descA"> POPULAR </h3>
				<p class="site-descB" >{SITE_DESCRIPTION}</p>
            </div>
		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
        	<div class="lateraltop">
			<div id="search-box">
                            
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
               
			</div>

Código: Selecionar todos

#search-box {
	color: #FFFFFF;
	position: relative;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
	width:240px;
	top:-150px;
	
}
.logomarca {
       float: left;
       width: 180px;
       padding: 15px 0;
}
.logomarca h3,.logomarca p {
       margin-left: 10px;
       margin-right: 10px;
}
.centrotop {
margin: 0 0 0 190px;
width:350px;
}

.lateraltop {
       margin: 0 0 0 260px;
	  
} 
.site-desc {
	position:relative;
	
	marging-bottom: 0px;
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}
.site-descA {
	position:relative;
	top:-20px;
	marging-bottom: 0px;
	color:#224A95;
	font-weight:bolder;
	font-size:3.9em;
	 
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}
.site-descB {
	position:relative;
	
	
	marging-bottom: 0px;
	color: #818181;
	font-weight:bolder;
	font-size:2.3em;
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}

Re: Problemas com CSS no header

Enviado: 29 Mar 2011, 13:04
por RobsonArsB
overall_header.html

Código: Selecionar todos

<div class="logomarca">
            <div class="header-pad"><a href="{U_INDEX}" title="{L_INDEX}" id="logo"></a></div>
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                  <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p></div>
  <div class="lateraltop">  
                 <div id="search-box">          
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
               <input class="button2" value="{L_SEARCH}" type="submit" /><br />
               {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form></div>
               
  </div>
  <div class="centrotop">
   <span class="site-desc">PARTICIPAÇÃO</span><br />
   <span class="site-descA">POPULAR </span><br />
   <span class="site-descB">Fórum Social</span>
                  </div>

Código: Selecionar todos

.logomarca {
	float: left; 
	width: 170px; 
	color:#000;
	padding: 1px 0; 
}
.lateraltop {
	float: right; 
	width: 250px;
	color:#000;
	padding: 1px 0; 
}

.centrotop {
  margin: 0 250px 0 170px;
  padding: 1px 0; 
  
} 

/*header tweaks */
.header-pad {
	padding: 1px;
	
}

.site-desc {
	font-size:38px; font-weight:bolder; color:#009;
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}
.site-descA {
	font-size:33px; font-weight:bolder; color:#224A95;
	 
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}
.site-descB {
	font-size:24px; font-weight:bolder; color:#818181;
		/* padding left has to be changed to 25px if there is no blank space on the left side of the site logo */
	
}
OBS: eu fiz algumas modificações na formatação do texto para se enquadrar melhor com style,
na linha .site-desc coloquei qualquer cor caso queira mudar substitua pela sua cor.

Re: Problemas com CSS no header

Enviado: 29 Mar 2011, 19:00
por sayroz
Quuuuase resolvido. fiz as alterações devidas, porém , o botton-footer não acompanhou o .body, repare q esta desigual, onde eu conserto isso?

Re: Problemas com CSS no header

Enviado: 29 Mar 2011, 19:37
por RobsonArsB
reparei que você não fechou a tag corretamente:
está assim:
div class="lateraltop">

Correto seria:

<div class="lateraltop">

sempre ao fazer uma edição olhar atentamente se nenhum chevron ( < > ) está faltando.
Todos os horários são UTC-03:00
Página 1 de 2

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB