Theme #Coup' inspirado en G-Dragon por Lamssie Monroe (T. Smile)
Últimos temas
» Control de registro del Skin
Miér Mayo 31, 2017 12:57 am por Lams monroe ~

» Estructura de las categorías
Mar Mayo 30, 2017 10:37 am por Lams monroe ~

» afilación la roca del clan cambiado el nombre de antes
Sáb Ene 21, 2012 5:55 pm por Lams monroe ~

» Hey Simba!
Miér Ene 11, 2012 9:52 pm por Lams monroe ~

» Quisiera afiliar mi foro ^^
Lun Ago 29, 2011 3:13 pm por Lams monroe ~

» Ficha de afiliación ERDS
Lun Ago 15, 2011 9:15 pm por Kairi

» queria afilar el ERRL AL reino de sweet memories
Lun Ago 15, 2011 4:07 pm por REINA NALA

» Ficha + Norma de afiliación
Vie Ago 12, 2011 11:43 pm por Lams monroe ~

» Las normas del foro ~ (NUEVAS REGLAS)
Vie Ago 12, 2011 1:01 am por Lams monroe ~


Estructura de las categorías

 :: Crooked :: Who You

Ver el tema anterior Ver el tema siguiente Ir abajo

Estructura de las categorías

Mensaje por Lams monroe ~ el Mar Mayo 30, 2017 9:41 am

Código:
<div id="subforo">
<div id="sublinks">
<a href="">Número 1</a>
<a href="">Número 2</a>
<a href="">Número 3</a>
<a href="">Número 4</a>
<a href="">Número 5</a>
</div>
<div id="ximgcontent">
<div id="subimg" style="background-image:url(https://68.media.tumblr.com/98525690e58c52061ecda715a6959ffb/tumblr_oqq8tc0g0L1tcnvswo1_1280.jpg);"></div>

</div>
<div id="subimg2" style="background-image:url(https://68.media.tumblr.com/90c78c1de78397699562398be25925d5/tumblr_oqq8tc0g0L1tcnvswo2_1280.jpg)"></div>
<div id="context"><p>
<a href="">WHITELESS</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ante sem, ultricies nec mi sit amet, dictum varius enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ante sem, ultricies nec mi sit amet, dictum varius enim.  </p></div>
</div>

<style>
#context {
width: 350px;
font-family: Time new Roman;
font-size: 9px;
position: absolute;
top: 17px;
left: 360px;
}
#subforo { width: 500px; height: 150px; }
#sublinks {
width: 150px;
padding: 25px;
position: relative;
top: 13px;
}

#context p {
background-color: black;
padding: 45px;
color: white;
}

#context a {
text-decoration: none;
font-size: 25px;
border-bottom: 1px solid #eee;
color: white;
display: block;
}
#sublinks a {
display: block;
font-family: Open Sans Condensed;
text-transform: uppercase;
font-size: 9px;
text-decoration: none;
padding: 5px;
text-align: center;
}

#subimg {
width: 150px;
height:150px;
background-size: cover;
background-position: -80px 0px;
}

#ximgcontent {
width: 150px;
font-family: calibri;
font-size: 9px;
padding: 25px;
position: absolute;
top: 0px;
left: 170px;
}

#ximgcontent p {
padding: 10px;
text-align: justify;
}

#subimg2 {
width: 337px;
height: 150px;
background-size: cover;
margin-top: 20px;
}</style>

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">



CORREGIDO:
Código:
<div id="subforo">
<table>
<td><div id="sublinks">
<a href="">Número 1</a>
<a href="">Número 2</a>
<a href="">Número 3</a>
<a href="">Número 4</a>
<a href="">Número 5</a></div>
</td>

<td><div id="subimg" style="background-image:url(https://68.media.tumblr.com/98525690e58c52061ecda715a6959ffb/tumblr_oqq8tc0g0L1tcnvswo1_1280.jpg);"></div></td>
<td><div id="context"><p><a href="">WHITELESS</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ante sem, ultricies nec mi sit amet, dictum varius enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ante sem, ultricies nec mi sit amet, dictum varius enim.</p></div></td>
<table><div id="subimg2" style="background-image:url(https://68.media.tumblr.com/90c78c1de78397699562398be25925d5/tumblr_oqq8tc0g0L1tcnvswo2_1280.jpg)"></div></table>
</table>
</div>



<style>
#subforo { width: 350px;}
#sublinks a {
display: block;
font-family: Open Sans Condensed;
text-transform: uppercase;
font-size: 9px;
text-decoration: none;
padding: 5px;
text-align: center;
}

#sublinks {
width: 140px;
padding: 30px;

}

#subimg {
width: 150px;
height:150px;
background-size: cover;
background-position: -80px 0px;
}

#subimg2 {
width: 356px;
height: 190px;
background-size: cover;
}

#context { 
width: 350px;
margin-left: 15px;
}
#context p {
background-color: black;
padding: 39px;
color: white;
font-size: 10px;
font-family: Time New Roman;
}

#context a {
text-decoration: none;
font-size: 25px;
border-bottom: 1px solid #eee;
color: white;
display: block;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
Terminé usando las tablas :'v


Última edición por Lams monroe ~ el Mar Mayo 30, 2017 4:26 pm, editado 2 veces

_________________

¡¡¡¡Gracias Cami_kiara!!!:
avatar
Lams monroe ~
+ Administradora
+ Administradora

Femenino Mensajes : 238

Hoja de personaje
Nombre: Lamash

http://sweetmemories.secretstories.org

Volver arriba Ir abajo

Re: Estructura de las categorías

Mensaje por Lams monroe ~ el Mar Mayo 30, 2017 9:48 am

Están muy mal estructuradas las etiquetas div, hay que corregir. No debería usar float ni siquiera position, orch. Debo hacer uso de las tablas.

_________________

¡¡¡¡Gracias Cami_kiara!!!:
avatar
Lams monroe ~
+ Administradora
+ Administradora

Femenino Mensajes : 238

Hoja de personaje
Nombre: Lamash

http://sweetmemories.secretstories.org

Volver arriba Ir abajo

Re: Estructura de las categorías

Mensaje por Lams monroe ~ el Mar Mayo 30, 2017 10:37 am

Quién está en línea, base.
Código:
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<div id="wholine">
<div id="xx">
<p>En total hay 1 usuario en línea: 1 Registrado, 0 Ocultos y 0 Invitado
La mayor cantidad de usuarios en línea fue 8 el Lun 29 Ago 2011 - 16:32.</p></div>
<div id="xx2">
<p>Usuarios registrados: Lams monroe ~<br>
Miembros conectados en las últimas 24 horas: Lams monroe ~</p>
</div>
<div id="wimg"></div>
</div>

<style>
#wholine {
 font-family: 'Open Sans Condensed'; font-size: 9px;  }
#xx {
background-color: black;
width: 450px;
color: white;

}

#xx p {
padding: 70px;
}

#xx2 {
width: 450px;
}

#xx2 p {
padding: 70px;
}

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

#wimg {
width: 250px;
height: 350px;
background-image:url(https://68.media.tumblr.com/7c0f3e421a53a8a159d227932232f169/tumblr_onozh3PhtQ1v1s1vko1_1280.jpg);
background-size: cover;
position: absolute;
top: 9px;
left: 465px;
background-position: 0px;
}
</style>

_________________

¡¡¡¡Gracias Cami_kiara!!!:
avatar
Lams monroe ~
+ Administradora
+ Administradora

Femenino Mensajes : 238

Hoja de personaje
Nombre: Lamash

http://sweetmemories.secretstories.org

Volver arriba Ir abajo

Re: Estructura de las categorías

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 :: Crooked :: Who You

 
Permisos de este foro:
No puedes responder a temas en este foro.