WTF?? Ajuda com CSS, HTML

Zed_Blade · 20 de Agosto de 2008

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)

E estou apenas a conseguir isto: (remake)

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

duffy · 20 de Agosto de 2008

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

Zed_Blade · 21 de Agosto de 2008

duffy disse:
Numa análise muito rápida, penso que te falta uma imagem.

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

Zed_Blade · 21 de Agosto de 2008

Ninguém dá uma ajuda??

WTF?? Ajuda com CSS, HTML

Zed_Blade

Power Member

duffy

Power Member

Zed_Blade

Power Member

Zed_Blade

Power Member