Cita:
Iniciado por pzin ¿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.