css...

[SrMaster 0]

nunca mechi com css, meu amigo tava fazendo um site, e eu estou codando o php, html, e sql, o cara que tava fazendo o css saiu, e agora to com dificuldades...

 

preciso dê:

http://dangercheats.com.br/fszone/index.php?pagina=membros

a foto ficar do lado esquerdo, e os dados do lado direito e do tamanho dos dados, tipo

 

| | dados

| | dados

| | dados

 

tipo limitar o tamanho da imagem...

 

também, personalizar o formulario de login, tipo assim:

 

e o de pesquisa também, mas falando o de login ja vou saber com de pesquisa.

 

obrigado.

[angelorubin 142]

Boa tarde,

 

Você pode fazer algo assim:

 

XHTML

 

<div id="box_foto">
 <img src="http://forum.dangercheats.com.br/uploads/profile/photo-1.png" width="150" height="180" alt="cliente" />
</div>

<div id="box_dados">

 <div class="item">
   <img src="http://dangercheats.com.br/fszone/images/autor.png" alt="autor" />
   <label>Sr. Master</label>
 </div>

 <div class="item">
   <img src="http://dangercheats.com.br/fszone/images/data.png" alt="sexo" />
   <label>Sexo:</label>
   <p>M</p>
 </div>

 <div class="item">
   <img src="http://dangercheats.com.br/fszone/images/cat.png" width="20" height="17" alt="grupo" />
   <label class="titulos">Grupo:</label>
   <p>Membro</p>
 </div>

 <div class="item">
   <img src="http://dangercheats.com.br/fszone/images/cat.png" width="20" height="17" alt="totalPosts" />
   <label class="titulos">Total Posts:</label>
   <p>10</p>
 </div>

 <div class="item">
   <img src="http://dangercheats.com.br/fszone/images/cat.png" width="20" height="17" alt="dataCadastro" />
   <label class="titulos">Data de Cadastro:</label>
   <p>09/08/2011</p>
 </div>

</div>

 

CSS

 

<style type="text/css">

* {
margin:0;
padding:0;
}

#box_foto {
border:2px solid #CCC;
float:left;
margin:10px 0 0 10px;
padding:1px;
}

#box_dados {
width:25%;
float:left;
margin:10px 0 0 10px;
padding:1px;
overflow:hidden;
}

.item {
width:97%;
height:auto;
min-height:25px;
margin: 0 0 11px 0;
padding:1px;
}

.item img {
margin:2px;
float:left;
width:20px;
height:20px;
}

.item label {
margin:2px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
font-weight:bolder;
}

.item p {
margin:2px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}

</style>

 

Espero que ajude.