1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

WTF?? Ajuda com CSS, HTML

Discussão em 'Web Development' iniciada por Zed_Blade, 20 de Agosto de 2008. (Respostas: 3; Visualizações: 824)

  1. Zed_Blade

    Zed_Blade Power Member

    Boa tarde,

    Aqui há uns tempos fiz um trabalho para a escola com tecnologias web, sem problemas.. Andava agora aqui a tentar recrear tudo (sozinho) desde o zero, já que da outra vez o trabalho foi de grupo.

    Acontece que eu tenho dois ficheiros que julgo serem "iguais" mas que aparentemente não funcionam da mesma forma..
    Já percebi que o problema está nos files .css pelo que deixo aqui o código.

    Basicamente o que eu quero é isto: (original)
    [​IMG]

    E estou apenas a conseguir isto: (remake)
    [​IMG]

    O conteudo dos .css:

    Original:
    Código:
    body
    {
    	background-color: #777777;
    }
    
    /* Inicio da definição dos "cantos" */
    #top_left 
    {
    	background-image:url('./gifs/topleft.gif');	
    	background-repeat:no-repeat;
    	height:18px;
    	width:19px;
    }
    
    #beet_c 
    {
    	background-image:url('./gifs/beet_c.gif');
    	background-repeat:repeat-x;
    	height:18px;
    	width:712px;
    }
    
    #top_right 
    {
    	background-image:url('./gifs/topright.gif');
    	background-repeat:no-repeat;
    	height:18px;
    	width:19px;
    }
    
    #left_bg 
    {
    	background-image:url('./gifs/fundo_e.gif');	
    	background-repeat:no-repeat;
    	height:83px;
    	width:19px;
    }
    
    #bg 
    {
    	background-image:url('./gifs/fundo.gif');
    	background-repeat:repeat-x;
    	height:18px;
    	width:712px;	
    }
    
    #right_bg
    {
    	background-image:url('./gifs/fundo_d.gif');	
    	background-repeat:no-repeat;
    	height:83px;
    	width:19px;	
    }
    
    #left_middle 
    {
    	background-image:url('./gifs/leftm.gif');
    	background-repeat:no-repeat;
    	height:29px;
    	width:19px;	
    }
    
    #middle 
    {
    	background-image:url('./gifs/middle.gif');
    	background-repeat:repeat-x;
    	height:19px;
    	width:712px;	
    }
    
    #right_middle 
    {
    	background-image:url('./gifs/rightm.gif');
    	background-repeat:no-repeat;
    	height:29px;
    	width:19px;	
    }
    
    #din_left 
    {
    	background-image:url('./gifs/left_col.gif');	
    	background-repeat:repeat-y;;
    	width:19px;	
    }
    
    #din_right 
    {
    	background-image:url('./gifs/right_col.gif');	
    	background-repeat:repeat-y;
    	width:19px;		
    }
    
    #bottom_left 
    {
    	background-image:url('./gifs/bottoml.gif');
    	background-repeat:no-repeat;
    	height:20px;
    	width:19px;	
    }
    
    #bottom_middle
    {
    	background-image:url('./gifs/bottom_mid.gif');
    	background-repeat:repeat-x;
    	height:20px;
    	width:712px;
    }
    
    #bottom_right 
    {
    	background-image:url('./gifs/bottomr.gif');	
    	background-repeat:no-repeat;
    	height:20px;
    	width:19px;
    }
    /*Final da definição dos "cantos" */
    
    /* Usado para definir os "cantos" do form de login */
    /* Reirado do site [url]http://www.roundedcornr.com/rc1.php[/url] */
    .roundedcornr_box_682373
    {
       background: #000099;
    }
    
    .roundedcornr_top_682373 div
    {
       background: url(./gifs/roundedcornr_682373_tl.png) no-repeat top left;
    }
    
    .roundedcornr_top_682373
    {
       background: url(./gifs/roundedcornr_682373_tr.png) no-repeat top right;
    }
    
    .roundedcornr_bottom_682373 div
    {
       background: url(./gifs/roundedcornr_682373_bl.png) no-repeat bottom left;
    }
    
    .roundedcornr_bottom_682373
    {
       background: url(./gifs/roundedcornr_682373_br.png) no-repeat bottom right;
    }
    
    .roundedcornr_top_682373 div, .roundedcornr_top_682373, .roundedcornr_bottom_682373 div, .roundedcornr_bottom_682373
    {
       width: 100%;
       height: 19px;
       font-size: 1px;
    }
    
    .roundedcornr_content_682373 { margin: 0 19px; }
    
    /* Final de códig do site */
    
    #form
    {
    	font-family:"Arial";
    	font-size:16px;
    	color:#FFFFFF;
    }
    
    /* Final da definção do form login */
    
    #title
    {
    	font-family:"Verdana";
    	font-style:italic;
    	font-weight:bolder;
    	font-size:50px;
    	color:#FFFFFF;	
    	padding-top:23px;
    }
    
    .footer 
    {
    	position:static;
    	text-align:center;
    	font-style:italic;
    	font-family:"Times New Roman";
    }
    Remake
    Código:
    body
    {
    	background-color: #777777;
    }
    
    table
    {
    	border-collapse: collapse;
    }
    
    #tl_head
    {
    	background-image: url("./gifs/topleft.gif");
    	background-repeat: no-repeat;
    	height: 18px;
    	width: 19px;
    }
    
    #tr_head
    {
    	background-image: url("./gifs/topright.gif");
    	background-repeat: no-repeat;
    	height: 18px;
    	width: 19px;
    }
    
    #beetc
    {
    	background-image: url("./gifs/beet_c.gif");
    	background-repeat: repeat-x;
    	height: 18px;
    	width: 800px;
    }
    
    #left_side
    {
    	background-image: url("./gifs/fundo_e.gif");
    	background-repeat: no-repeat;
    	height: 83px;
    	width: 19px;
    }
    
    #right_side
    {
    	background-image: url("./gifs/fundo_d.gif");
    	background-repeat: no-repeat;
    	height: 83px:
    	width: 19px;
    }
    
    #fundo
    {
    	background-image: url("./gifs/fundo.gif");
    	background-repeat: repeat-x;
    	height: 83px;
    	width: 1px;
    }
    
    #left_mid
    {
    	background-image: url("./gifs/leftm.gif");
    	background-repeat: no-repeat;
    	height: 29px;
    	width: 19px;
    }
    
    #right_mid
    {
    	background-image: url("./gifs/rightm.gif");
    	background-repeat: no-repeat;
    	height: 29px;
    	width: 19px;
    }
    
    #beet_mids
    {
    	background-image: url("./gifs/middle.gif");
    	background-repeat: repeat-x;
    	height: 29px;
    	width: 1px;
    }
    
    #bottom_left
    {
    	background-image: url("./gifs/bottoml.gif");
    	background-repeat: no-repeat;
    	height: 18px;
    	width: 19px;
    }
    
    #bottom_right
    {
    	background-image: url("./gifs/bottomr.gif");
    	background-repeat: no-repeat;
    	height: 18px;
    	width: 19px;
    }
    
    #bottom_middle
    {
    	background-image: url("./gifs/bottom_mid");
    	background-repeat: repeat-x;
    	height: 18px;
    	width: 800px;
    }
    
    #left_col
    {
    	background-image: url("./gifs/left_col.gif");
    	background-repeat: repeat-y;
    	height: 1px;
    	width: 18px;
    }
    
    #right_col
    {
    	background-image: url("./gifs/right_col.gif");
    	background-repeat: repeat-y;
    	height: 1px;
    	width: 18px;
    }
    
    .title
    {
    	font-family: Verdana;
    	font-style: italic;
    	font-weight: bolder;
    	font-size: 50px;
    	color: white;
    	padding-top: 23px;
    	
    }
    
    .footer
    {
    	position: static;
    	text-align: center;
    	font-style: italic;
    	font-family: "Times New Roman";
    }
    
    //Definição do form login
    
    .login_box
    {
    	background: #000099;
    }
    
    .login_topl
    {
    	background: url(./gifs/log_topl.png) no-repeat top left;
    }
    
    .login_topl div
    {
    	background: url(./gifs/log_topr.png) no-repeat top right;
    }
    
    .login_bottoml
    {
    	background: url(./gifs/log_bottoml.png) no-repeat bottom left;
    }
    
    .login_bottoml div
    {
    	background: url(./gifs/log_bottomr.png) no-repeat bottom right;
    }
    
    .login_topl, .login_topl div, .login_bottoml, .login_bottoml div
    {
    	height: 19px;
    	width: 100%;
    	font-size: 1px;
    }
    
    .login_content
    {
    	margin: 0 19px;
    }
    
    .form
    {
    	font-family: "Arial";
    	font-size: 16px;
    	color: #FFFFFF;
    }
    //Final form
    E os html:
    original:
    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>audioShop 3.0 by ei17587</title>
    
    <link rel="stylesheet" type="text/css" href="login.css">
    </head>
    <body>
    		<!-- Definição do layout -->
    			<div align="center">
    				<table cellpadding="0" cellspacing="0">
    					<tr>
    						<td id="top_left"></td>
    						<td id="beet_c"></td>
    						<td id="top_right"></td>
    					</tr>
    					<tr>
    						<td id="left_bg"></td>
    						<td id="bg"><div id="title">audioShop 3.0</div></td>
    						<td id="right_bg"></td>
    					</tr>
    					<tr>
    						<td id="left_middle"></td>
    						<td id="middle"></td>
    						<td id="right_middle"></td>
    					</tr>
    					<tr>
    						<td id="din_left"></td>
    						<td bgcolor="#FFFFFF">
    						<!-- Definicao da "moldura" para login -->
    							<table align="center" cellspacing="80">
    								<tr>
    									<td>
    										<div align="center">
    											<div class="roundedcornr_box_682373">
    							   					<div class="roundedcornr_top_682373"><div></div></div>
    							      				<div class="roundedcornr_content_682373">
    													<div id="form">
    							         								<form action="welcome.php" method="post">
    																		<table>
    																			<tr>
    																				<td>
    																		Login:</td>
    																		<td><input type="text" name="login"></input></td>
    																		<td></td>
    																		</tr>
    																		<tr>
    																			<td>
    																		Chave:</td>
    																		<td><input type="password" name="pass"></td>
    																		<td><input type="submit" value="Entrar"></td>
    																		</tr>
    																		</table>
    										  							</form>
    													</div>
    							      				</div>
    							   					<div class="roundedcornr_bottom_682373"><div></div></div>
    											</div>
    										</div>
    									</td>
    								</tr>
    							</table>
    						<!-- Final da definicao da "moldura" de login -->
    						</td>
    						<td id="din_right"></td>
    					</tr>
    					<tr>
    						<td id="bottom_left"></td>
    						<td id="bottom_middle"></td>
    						<td id="bottom_right"></td>
    					</tr>
    				</table>
    			</div>
    			<!-- Final do layout -->
    			<div class="footer"><?php include("footer.php")?></div>
    </body>
    </html>
    remake:
    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
    <html>
    	<head>
    		<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    		<title>audioshop 3</title>
    		<link rel="stylesheet" type="text/css" href="sheet.css">
    	</head>
    	<body>
    	<div align="center">
    		<table cellpadding="0" cellspacing="0">
    			<tr>
    				<td id="tl_head"></td>
    				<td id="beetc"></td>
    				<td id="tr_head"></td>
    			</tr>
    			<tr>
    				<td id="left_side"></td>
    				<td id="fundo"><div class="title">audioShop 3.0</div></td>
    				<td id="right_side"></td>
    			</tr>
    			<tr>
    				<td id="left_mid"></td>
    				<td id="beet_mids"></td>
    				<td id="right_mid"></td>
    			</tr>
    			<tr>
    				<td id="left_col"></td>
    				<td bgcolor="#FFFFFF">
    					<table align="center" cellspacing="80">
    						<tr>
    							<td>
    							
    								<div align="center" class="login_box">
    									<div class="login_topl"><div></div></div>
    										<div class="login_content">
    											<div class="form">
    												<form action="welcome.php" method="post">
    													<table>
    														<tr>
    															<td>ID:</td>
    															<td><input type="text" name="id"></input></td>
    															<td></td>
    														</tr>
    														<tr>
    															<td>Password:</td>
    															<td><input type="password" name="pass"></input></td>
    															<td><input  type="submit" name="ok" value="Entrar"></input></td>
    														</tr>
    													</table>
    												</form>
    											</div>
    										</div>
    									<div class="login_bottoml"><div></div></div>
    								</div>
    							
    							</td>
    						</tr>
    					</table>
    				</td>
    				<td id="right_col"></td>
    			</tr>
    			<tr>
    				<td id="bottom_left"></td>
    				<td id="bottom_middle"></td>
    				<td id="bottom_right"></td>
    			</tr>
    		</table>
    	</div>
    	<div class="footer">TP Informatica</div>
    	</body>
    </html>
    A unica diferença que fiz foi em vez de ter um file .html como da primeira vez, agora comecei a escrever tudo num file .php.

    Será esse o problema? Não me parece mas já bati tanto com a cabeça que já nem sei o que diga..

    EDIT: Code Wraps :)
     
    Última edição: 20 de Agosto de 2008
  2. duffy

    duffy Power Member

    Numa análise muito rápida, penso que te falta uma imagem.
     
  3. Zed_Blade

    Zed_Blade Power Member

    As imagens estão todas lá e estão correctas.

    O problema está no css.

    No "original" tenho uma class .roundedecornr_6xxxx_box que coloca o fundo azul (como aparece na imagem.

    Na segunda imagem é isso que está a falhar e não consigo chegar ao problema.
    A unica alteração foi o nome.. Voltei a refazer de forma mais intuitiva..

    Podes ver isso no código que dei..

    tks
     
  4. Zed_Blade

    Zed_Blade Power Member

    Ninguém dá uma ajuda??
     

Partilhar esta Página