Ver Mensaje Individual
  #7 (permalink)  
Antiguo 15/03/2014, 18:03
LordFers
 
Fecha de Ingreso: marzo-2014
Mensajes: 4
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Problema con Estructura de la Web (CSS)

Cita:
Iniciado por pzin Ver Mensaje
¿A qué llamas índice?

Piensa en las clases como si fuesen variables que contienen una l varias reglas y los identificadores son variables de un sólo uso. Algo así.
Osea como los arrays, por ejemplo en C++: int a[10]; eso tiene de índice 10; osea 10 arrays.

Y puedo hacer con la variable a[1] = 342; a[2] = 432; y así sucesivamente... ¿Cómo hago para que en las clases, pueda crear más objetos? Porque en sí, con el <div class="nombre"> </div> solamente utilizo el div principal de la clase, pero para manejar más que ese solo div, para crear 3 estructuras: Columna 1 Columna 2 Columna 3.

En la columna 1 el gráfico, en la columna 2 las noticias, en la columna 3 el otro gráfico para separar.

EDIT: Ya comprendí cómo funcionaba, y logré más o menos lo que quería.. Si termino de hacer todo el diseño y me quito las dudas, doy como solucionado el tema y te doy unos puntos por coparte en explicarme y ayudarme.

HTML:
Código HTML:
<html>
  <head>
	<title>Argentum Online - Noticias</title>
	<link rel="stylesheet" href="style.css">
  </head>

  <body>
      <div class="cabecera">
        <div class="fondo">
            <div id="columna1" class="fondo"></div>
            <div id="columna2" class="fondo"></div>
            <div id="columna3" class="fondo"></div>
       	</div>
      </div>
  </body>

</html> 
CSS:
Código:
*{margin:0;padding:0}

body{
  background: #f6f6f6;
  font-family: "lucida console";
  font-size: 12px;
  color: #6b6b6b
}

.cabecera
{
  width: 100%;
  height: 142px;
  margin-top: 0px;
  margin-left: 0px
}

.fondo
{
    width: 1280px;
    background: #003399;
}

#columna1
{
    width: 229px;
    height: 142px;
    float: left;
    margin-left: 0px;
    margin-top: 0px;
    background: #003399 url('muroa.png');
}

#columna2
{
    width: 229px;
    height: 142px;
    float: right;
    margin-left: 0px;
    margin-top: 0px;
    background: #003399 url('muroa.png') no-repeat;
}

#columna3
{
    width: 810px;
    height: 142px;
    margin-left: 235px;
    margin-top: 0px;
    background: url('LogoAO.png') no-repeat;
}
Adiós.

EDIT 2: Listo, ya terminé de comprender un par de cosas, con las clases se define mejor todo...

Código que se logró interpretar:
HTML:
Código HTML:
<html>
  <head>
	<title>Argentum Online - Noticias</title>
	<link rel="stylesheet" href="style.css">
  </head>

  <body>
      <div class="cabecera">
         <div id="columna1" class="cabecera"></div>
         <div id="columna2" class="cabecera"></div>
         <div id="columna3" class="cabecera"></div>
      </div>

      <div class="conjunto">
         <div id="bordea" class="conjunto"></div>
         <div id="bordeb" class="conjunto"></div>
         <div id="noticias" class="conjunto"> Un nuevo aviso: asdjlajskdlaskd</div>
      </div>
  </body>
</html> 
CSS:
Código:
*{margin:0;padding:0}

body{
  background: #f6f6f6;
  font-family: "lucida console";
  font-size: 12px;
  color: #6b6b6b
}

.cabecera
{
  width: 100%;
  height: 142px;
  background: #003399;
  margin-top: 0px;
  margin-left: 0px
}

#columna1
{
    width: 229px;
    height: 142px;
    float: left;
    margin-left: 0px;
    margin-top: 0px;
    background: #003399 url('muroa.png');
}

#columna2
{
    width: 229px;
    height: 142px;
    float: right;
    margin-left: 0px;
    margin-top: 0px;
    background: #003399 url('muroa.png') no-repeat;
}

#columna3
{
    width: 810px;
    height: 142px;
    margin-left: 235px;
    margin-top: 0px;
    background: url('LogoAO.png') no-repeat;
}

#bordea
{
   width: 228px;
   height: 100%;
   float: left;
   margin-left: 0px;
   margin-top: 0px;
   background: url('bordea.png');
}

#bordeb
{
   width: 228px;
   height: 100%;
   float: right;
   margin-left: 0px;
   margin-top: 0px;
   background: url('bordeb.png');
}

#noticias
{
   width: 740;
   height: 75%;
   color: black;
   float: left;
   background: #faffad;
   margin-left: 32px;
   margin-top: 64px;
}
Imagen final:


Muchas gracias!

Adiós.

Última edición por LordFers; 15/03/2014 a las 19:10 Razón: Evitar el doble post.