Jump to content
acao

[Resolvido] optimizar css

Recommended Posts

acao

boas

estou com dificuldade em optimizar o meu css,

acontece que mudei de pc e o css ficou desorganizado,

nav em alguns form não funciona,

divs fora do local,

botões (os nomes não cabem no botão, aumentou o tamanho da letra).

@charset "utf-8";
/* CSS Document */
root {
display: block;
}
* {
margin:0;
}
html, body {
margin:0;
padding:0;
height: 100%;
	width: 100%;
font:100% "Times New Roman", Georgia, Arial, Helvetica, sans-serif;
background-color:#CCC;
	font-size: 13pt;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right:0;
padding-left:0;
}
label, input, select, textArea{
font-size: 13pt;
}
a img {
border: none;
}
a:link {
color:#42413C;
text-decoration: underline;
}
a:visited {
color:#6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
a:active{
color:  #F00;
background: #CCC;
}
div {
margin:0;
padding:0;
border:none;
}
/*--------------------------------------------------------------------
			  // main //
--------------------------------------------------------------------*/
.main {
margin:0;
padding:1px 1px 1px 1px;
background-color:#CCC;
	width: 100%
}

/*----------------------------------------------------------------------
			 // header //
----------------------------------------------------------------------*/
header {
margin:0px;
width:100%;
height:120px; /* 160px; barra do meio*/
background-color:transparent;	/*#F00;*/
}
.headertop {
height:40px;
background-color:#003;  /*cor do top*/
	width: 100%;
}
ul#Log_out {
width: 300px;
height:40px;
float:right;
margin:0;
}
ul#entrar {
width:150px;
height:40px;
float:right;
margin:0;
}
ul#entrar li {
float:left;
list-style:none;
padding:7px 0px 0px 15px;
}
ul#entrar li a {
padding:0;
text-align: center;
color: #FFF;
background: transparent;
}
.headerbody {
height:80px;   /* 120px; barra do meio*/
background-color: chocolate;/* #009; cor do meio */
	width: 100%;
}
.headerbody h1 {
text-align:left;
font-size: 48PX;
padding-top:13px;
padding-left:60px;
}
/*----------------------------------------------------------------------
			 // nav //
----------------------------------------------------------------------*/
nav {
margin:0;
padding:0;
height:40px;
background-color: peru;/* #00006A;*/
	width: 100%;
}
#menuNav{
height: 40px;
	width: auto;
padding-left:300px;
}
#menuNav ul{
	letter-spacing: 0.1em;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
background:transparent;
height:40px;
list-style:none;
margin:0;
padding:0;
}
#menuNav li{
float:left;
padding:0px;
}
#menuNav li a{  /* tamanho do botao */
background: transparent; /* #006633*/
color:#ffffff;
display:block;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#menuNav li a:hover, #menuNav ul li:hover a{ /* mostra cor ao passar do rato*/
background:  #CCC; /*#003f20 */
color:#FFFFFF;
text-decoration:none;
}
#menuNav li ul{ /* mostra o menuprincipal do sub menu*/
background:peru;/* #00006A;*/ /*#006633;*/
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#menuNav li:hover ul{  /*amostra o sub menu*/
display:block;
}
#menuNav li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
#menuNav li:hover li a{
background:none;
}
#menuNav li ul a{  /*coloca no centro */
display:block;
height:40px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
#menuNav li ul a:hover, #menuNav li ul li:hover a{
background: #CCC; /*#003f20 */
border:0px;
color:#ffffff;
text-decoration:none;
}
#menuNav  ul .selected a, #menuNav ul ul .selected a{
background-color: #CCC;
display:block;
}
/*========================Inicio content==============================
			  // content // corpo da pagina sem o rodape
======================================================================
---------------------------content------------------------------------
			  // pag	// registoAv e outras
---------------------------------------------------------------------*/
.content {
background-color: #FFF;  /* transparent; */
	margin:10px 50px 0px 50px;
	width: 100%;
}
.coluna1,.coluna2,.coluna3{
/*padding-bottom:10px;*/
	margin: 0px;
	padding: 0px;
	display: inline-table;
	height:100%;
	background-color:  white;  /*azure;*/
}
.coluna1{
margin-left:2px;
width: 20%;
float:none;
}
.coluna2{
width: 59%;
float: none;
}
.coluna3{
width: 20%;
float:none;
}

os formularios estão dentro da coluna 2

questões:

1- como consigo controlar o tamanho do munitor, resolução e tamanho do texto?

2- como consigo fixar as div coluna1, coluna2, coluna3 (em coluna tabela)

porque tenho os formularios na coluna2 ,

se os formularios ultrapassarem o tamanho da coluna2 as div desorganizam-se (ex: passam de colunas para linha)

(aqui a opção seria a coluna3 deslizar para a frente aumentando o width)

<body>
   <div class="main">
				 <header>
							   <div class="headertop">
							   </div>
							 <div class="headerbody">
							 </div>
				  </header>
				 <nav>
							   <div id="menuNav">
								 </div>
				  </nav>
				  <div class="content">			  
								 <div class="coluna1">
									   <p>coluna lado esquerdo</p>
								 </div> <!-- fim div coluna1 -->
								  <div class="coluna2">
								  </div> <!-- fim div coluna2 -->
								  <div class="coluna3">
								  </div>
					 </div>
		 </div>
</body>

cumps

acao

Edited by acao

Share this post


Link to post
Share on other sites
acao

e a duvida?

btw, vou presumir que com otimizar, é fazer um minify/compress do css

custumo usar esta online tool:

Minify CSS

boas

obrigado pela resposta,

pois coloquei optimizar por a questão é vasta e sem saber que medidas tomar.

editei o post anterior para uma melhor compreensão.

cumps

acao

Share this post


Link to post
Share on other sites
acao

bem, quanto a tua primeira questão, o que andas a procura é "responsive designs"

sempre que me abordam sobre o assunto, gosto de apresentar este tutorial que está bem simples e detalhado: Responsive Design in 3 Steps

quanto a qestao 2, será q qeres isto? ;)

http://jsfiddle.net/YwF5g/

boas

obrigado pelas suas respostas,

já estive a ver foi importante a sua postagem mas não resolve a minha questão.

afinal o problema é outro, se utilizar o chrome funciona bem.

mas se utilizar o internet explorer 9 e que (fica tudo baralhado)

alguém sabe como resolver?

Share this post


Link to post
Share on other sites
Virneto

Verifica se estás a dizer ao IE para renderizar a página com o Engine mais atualizado. Se não estveres coloca no teu head a seguinte meta tag. ou pesquisa por IE=Edge.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

"Que inquieto desejo vos tortura, Seres elementares, força obscura? Em volta de que ideia gravitais?" >> Anthero de Quental

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Linuxando.com | ...

Share this post


Link to post
Share on other sites
I-NOZex

boas

obrigado pelas suas respostas,

já estive a ver foi importante a sua postagem mas não resolve a minha questão.

afinal o problema é outro, se utilizar o chrome funciona bem.

mas se utilizar o internet explorer 9 e que (fica tudo baralhado)

alguém sabe como resolver?

tens de ser mais explicito nas tuas duvidas moço!

e no firefox, ja testaste?

se queres ter tudo crossbrowser, e nao ter de instalar varios browsers, aconselho-te a usar o LUNABROWSER, trás as engines do IE, CHROME e FIREFOX (tridente, webkit e gecko, respectivamente)

existem ferramentes online, por exemplo: http://browsershots.org (apenas mostra printscreens nos mais diversos browsers)

existem varios que permitem a interação como outro browser, por exemplo Adobe Edge Inspect

Edited by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
acao

Verifica se estás a dizer ao IE para renderizar a página com o Engine mais atualizado. Se não estveres coloca no teu head a seguinte meta tag. ou pesquisa por IE=Edge.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

pois não tinha nada colocado, mas nem assim deu.

o meu head tem esta tags, será que ainda falta alguma coisa?

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
	<script type="text/javascript" src="ClassGlobls/FuncJs.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<link rel="stylesheet" type="text/css" href="StyleAv/StyleBaseAv.css"/>

tens de ser mais explicito nas tuas duvidas moço! e no firefox, ja testaste? se queres ter tudo crossbrowser, e nao ter de instalar varios browsers, aconselho-te a usar o LUNABROWSER, trás as engines do IE, CHROME e FIREFOX (tridente, webkit e gecko, respectivamente) existem ferramentes online, por exemplo: http://browsershots.org (apenas mostra printscreens nos mais diversos browsers) existem varios que permitem a interação como outro browser, por exemplo Adobe Edge Inspect

estou a usar localhost.

agora também estou virado para para a falta desta tag , e pelo que li deveria funcionar.

noutro pc tenho o ie 10 e funciona.

neste tenho o internet explorer 9 e dá nisto,

eu podia actualizar o ie para o 10 para testar mas depois fico sem resolver porque depois alguém pode utilizar o ie9 e não dá.

no firefox também funciona.

cumps

acao

Edited by acao

Share this post


Link to post
Share on other sites
I-NOZex

pois o IE9 é o problema sempre...

se fosse possivel, poderias fazer upload do site? (html/css/js/imagens/...) que assim eu tentava.te analisar isso melhor (: (faz upload no http://zippyshare.com se puder ser sfv)


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
acao

pois o IE9 é o problema sempre...

se fosse possivel, poderias fazer upload do site? (html/css/js/imagens/...) que assim eu tentava.te analisar isso melhor (: (faz upload no http://zippyshare.com se puder ser sfv)

boas

agradeço imenso o que puder fazer por mim, mas o site é pessoal não posso enviar-lho.

cumps

acao

Share this post


Link to post
Share on other sites
Virneto

olha, atualiza a tua página. Depois pressiona F12 no teclado e verifica que o "Modo do browser" está a renderizar a página com o IE9 e nada de ie7, 8 ou outra coisa qualquer. Se não tiveres o Modo do browser a indicar o engine mais avançado verifica o teu doctype

  • Vote 1

"Que inquieto desejo vos tortura, Seres elementares, força obscura? Em volta de que ideia gravitais?" >> Anthero de Quental

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Linuxando.com | ...

Share this post


Link to post
Share on other sites
I-NOZex

boas

agradeço imenso o que puder fazer por mim, mas o site é pessoal não posso enviar-lho.

cumps

acao

podes pelo menos publicar no pastebin o html e o css?

nao me ocorre mais nada que eu possa sugerir sem ver melhor o codigo...


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
acao

olha, atualiza a tua página. Depois pressiona F12 no teclado e verifica que o "Modo do browser" está a renderizar a página com o IE9 e nada de ie7, 8 ou outra coisa qualquer. Se não tiveres o Modo do browser a indicar o engine mais avançado verifica o teu doctype

boas

o modo do browser: IE9 modo documento : Quirks

não deveria ser IE10 ?

e o doctype fica comentado, penso que será aqui o erro.

To change this template, choose Tools | Templates and open the template in the editor.

<!-- DOCTYPE html -->

mas tenho colocado assim:

<!DOCTYPE html>

<html lang="pt-pt">

mas nas paginas que funciona já não fica comentado.

eu acho isto estranho porque apenas duas paginas não funcionam e todas elas estão programadas identicas/iguais, apenas estas têm muito mais php.

javascript uma tem outra não.

cumps

acao

edit:

@Virneto , obrigado pela tua dica

resolvido, era um comentário que estava no inicio da página.

(To change this template, choose Tools | Templates and open the template in the editor.)

cumps

acao

Edited by acao
  • Vote 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.