[SOLUCIONADO] Problema con Estructura de la Web (CSS)

LordFers · #1 (**permalink**) 15/03/2014, 15:13

Buenas, quería preguntar cómo podría armar esta estructura web:

Hice esto más o menos así; el tema es que el background del muroa me borra todos los demás si lo creo. Estoy en notepad, para poder entender bien cómo funciona cada propiedad del CSS, así no tengo problemas en un futuro.

(Nunca le dí mucha importancia a CSS, siempre supe php pero para modificar toda la programación, y diseño siempre utilicé DreamWeaver, pero me interesa saber bien como funciona toda la estructura de diseño desde cero.)

Código CSS:

Código:

*{margin:0;padding:0}

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

#header {
  height: 142px;
  background: #003399 url('LogoAO.png') no-repeat;
  background-position: center 0px;
}

#muroa {
  width: 229px;
  height: 142px;
  background: url('muroa.png') no-repeat;
  float: left;
{

#murob {
  width: 229px;
  height: 142px;
  background: url('muroa.png') no-repeat;
  float: right;
{

#contenedor {
  position: absolute;
  width: 100%;
  height: 100%;
}

#separator1 {
  width: 228px;
  height: 100%;
  background: #faebd7 url('bordea.png');
}

#separator2 {
  width: 228px;
  height: 100%;
  background: #faebd7 url('bordeb.png');
}

Código HTML:

<html>
  <head>
	<title>Argentum Online - Noticias</title>
	<link rel="stylesheet" href="style.css">
  </head>

  <body>
	<div id="muroa"></div>
        <div id="murob"></div>
	<div id="header"></div>
        <div id="contenedor">
		<div id="separator1"></div>
		<div id="not1">Noticia de Argentum Online, beta.</div>
		<div id="separator2"></div>
	</div>
  </body>

</html>

Fíjense que si al CSS le quitan el #muroa{...} se estructura bien (pero solo hacia la izquierda). Probé con miles de propiedades del background-position, y nada.

Capaz alguien ya especializado en este área me va a poder ayudar muchísimo mejor.

Muchas gracias. Adiós.

TSG · #2 (**permalink**) 15/03/2014, 16:47

Hola muy buenas,

Podrías hacer algo más o menos asín para hacerte la idea...

Código HTML:

Ver original<div class="cabecera">
 
      <div class="fondo">
 
            <div class="logo"> </div>
            <div class="menu">
             
            <a href="#"> inicio </a>
            aqui todo tu menu y eso...
 
             </div>
 
       </div>
 
</div>

------------------------------------------------------------------------------------------------

Código CSS:

Ver original.cabecera
{
    width: 100%;
    height: 100px;
}
 
.fondo
{
    width: 200px;
    heihgt: 200px;
    margin: auto;
}
 
.logo
{
    float: left;
    margin-left: 50px;
    margin-top: 50px;
}
 
.menu
{
    float: right;
    margin-right: 20px;
    margin-top: 70px;
}

Más o menos con esto te podrías orientar, cambias las medidas y demás y puedes probar y nos comentas.

Un cordial saludo.

LordFers · #3 (**permalink**) 15/03/2014, 17:18

¿Por qué razón no se puede hacer de la manera que yo la hice?

Acá las clases cómo funcionan, como en POO? Quiero más o menos entender las razones por la cuál es así; mientras voy a probar a ver qué onda el código interpretado. Muchas gracias!

EDIT: Me olvidaba, eso es más o menos lo mismo, solo que se divide en clases; por eso quería entender la razón de eso. Además, por todavía no entiendo como haría para que no se me amontonen los Divs en caso de que tenga que agregar las columnas del costado.

pzin · #4 (**permalink**) 15/03/2014, 17:34

Las clases no funcionan como en POO. La diferencia entre identificador y clase en CSS, o en HTML realmente, es que estas últimas se pueden repetir. Así puedes aplicar un grupo de reglas bajo una clase a varios elementos, mientras que los identificadores deben de ser únicos en el documento HTML.

Lo que no deberías de hacer nunca es posicionar los elementos de forma absoluta, al menos los estructurales, porque los sacas del flujo natural del documento. Es una técnica que se usa en Dreamweaver (según he leído) que supongo que es dado a la dificultad que supone transformar lo visual en código robusto y lógico.

LordFers · #5 (**permalink**) 15/03/2014, 17:51

Ah perfecto, y para crear por ejemplo con uno que hice recién:

Cita:

.acolumna
{
width: 225px;
height: 29px;
margin-left: 0px;
margin-top: 0px;
background: url('bordea.png');
}

Cita:

Para crear otro más del mismo acolumna? Cómo hago para crear un índice de acolumna?

pzin · #6 (**permalink**) 15/03/2014, 17:56

¿A qué llamas índice?

Piensa en las clases como si fuesen variables que contienen una o varias reglas y los identificadores son variables de un sólo uso. Algo así.

LordFers · #7 (**permalink**) 15/03/2014, 18:03

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.