Foros del Web » Creando para Internet » HTML »

abrir webs en un main

Estas en el tema de abrir webs en un main en el foro de HTML en Foros del Web. Hola buenas !! Estoy realizando una web y en un div llamado main quiero cargar dos partes de la web diferentes por ejemplo en un ...
  #1 (permalink)  
Antiguo 14/03/2011, 08:58
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
abrir webs en un main

Hola buenas !!

Estoy realizando una web y en un div llamado main quiero cargar dos partes de la web diferentes por ejemplo en un div llamado izquierdo poner un menu y en otro div llamado derecha cargar una imagen... vale?


un ejemplo del div derecho
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>

</body>
</html>


lo tengo que definir otra vez con las etiquetas? o se las quito, porque no se como hacer para que este div tengo un background de color diferente.... me gustaria poder cambiarlo

gracias
  #2 (permalink)  
Antiguo 14/03/2011, 10:26
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

Dentro del body tendrias que poner

Código HTML:
Ver original
  1. <div id="main">
  2.  
  3.  
  4. <div id="izquierda">
  5.  
  6. </div>
  7.  
  8.  
  9. <div id="derecha">
  10.  
  11. </div>
  12.  
  13.  
  14. </div>

y bueno en el css podrias poner

Código CSS:
Ver original
  1. #main{
  2.  
  3.     margin: auto;
  4.  
  5. }
  6.  
  7. #izquierda{
  8.  
  9.         width: 340px;  (el que vos quieras para el menu);
  10.         float: left;
  11. }
  12.  
  13. #derecha{
  14.         width:  (el que vos quieras);
  15.         float: right;
  16.  
  17. }


Esto te definiria dentro de un div general llamado main, dos partes distintas en la pagina, osea 2 verticales..

Saludos
Gabriel.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #3 (permalink)  
Antiguo 14/03/2011, 12:24
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

si gracias eso lo tenia asi, pero ahora por ejemplo si quiero que el fondo de izquierda sea azul y el de derecha sea verde como lo hago??
porque yo probando lo que consigo es que todo sea un color y eso no es lo que busco.

gracias
  #4 (permalink)  
Antiguo 14/03/2011, 12:38
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

Y tendrias que poner en el CSS un background-color, seria de esta manera:


Código CSS:
Ver original
  1. #izquierda{
  2.  
  3.         width: 340px;  (el que vos quieras para el menu);
  4.         float: left;
  5.         background-color: #ff6600; (aqui tenes que agregar tu valor hexadecimal del color, que lo podes sacar de herramientas como photoshop, el valor agregado ahi es NARANJA, tambien dreamweaver te da una paleta de color al momento de seleccioanr el color)
  6.  
  7. }



agregas la misma propiedad para el otro div, #derecha y listo quedaria supongo :)
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #5 (permalink)  
Antiguo 14/03/2011, 12:55
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

gracias pero eso no hace nada, ademas aunque me cambiara el fondo no serviria.

Tenemos el main con el div izquierda y el div derecha. perfecto y en la web tenemos nuestro menu. y pinchando en una opcion queremos que ese main.. su parte derecha sea color rojo y la izquierda azul, pero tambien queremos que cuando pinchemos en otra opcion del menu... la parte izquierda sea verda y la derecha naranja....

Esta es la idea que tengo... pero no se hacerlo.

gracias
  #6 (permalink)  
Antiguo 14/03/2011, 13:00
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

No vez el cambio realizado, porque no le estas agregando ningun contenido al div, de momento agregale esta propiedad al div #izquierda:

height: 900px;

Con esto seguramente vas a notar el color naranja que te propuse en el codigo anterior.

O sino, entra al div en el modo diseño y empezar a apretar Enter.

Saludos,
Gabriel.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #7 (permalink)  
Antiguo 14/03/2011, 13:27
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

default.css
#main{width:auto; display:block;}
#column_left{width:800px; margin-right:20px; float:left;}
#column_right{width:200px; float:right; background-color:#443333;}

y nada de nada.... no tengo vista de diseño lo hago con el notepad++
  #8 (permalink)  
Antiguo 14/03/2011, 14:02
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

agregale al column_right

height: 500px; y vas a notar que se te forma un cuadro azul.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #9 (permalink)  
Antiguo 14/03/2011, 14:14
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

Cita:
Iniciado por pampa_ Ver Mensaje
gracias pero eso no hace nada, ademas aunque me cambiara el fondo no serviria.

Tenemos el main con el div izquierda y el div derecha. perfecto y en la web tenemos nuestro menu. y pinchando en una opcion queremos que ese main.. su parte derecha sea color rojo y la izquierda azul, pero tambien queremos que cuando pinchemos en otra opcion del menu... la parte izquierda sea verda y la derecha naranja....

Esta es la idea que tengo... pero no se hacerlo.

gracias
gracias funciono, pero en este supuesto cmo lo hariamos, porque no te vas a poner a anidar div uno dentro de otro...
  #10 (permalink)  
Antiguo 14/03/2011, 14:54
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

Podrias probar con este codigo.

Código HTML:
Ver original
  1. <a href="#" onclick="document.getElementById('test').style.backgroundImage='url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif)'; return false;" >Link</a>


Donde dice "getElementById('test'); se toma el ID de tu css, por lo tanto deberias definir un ID nueva en tu css con el nombre test, o cambiaro y poner "fondoCambia", ahi tambien esta definida una imagen como fondo, pero podrias poner un color ejemplo :

style.backgroundColor="red"


Proba a ver los resultados.

Saludos,
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #11 (permalink)  
Antiguo 14/03/2011, 15:36
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>LEVANTE AUTOMOCION</title>
</head>

<body>
<div id="container">
<div id="topbar">
<IMG SRC='images/carbono.jpg' width=1004 height=100> </IMG>
<IMG SRC='images/banner.gif' width=1004 height=40> </IMG>
</div>
<div id="navbar">
<ul>
<li><a href="index.php?page=home">INICIO</a></li>
<li><a href="index.php?page=siniestrados">VEHICULOS SINIESTRADOS</a></li>
<li><a href="index.php?page=recambios">RECAMBIOS</a></li>
<li><a href="index.php?page=anuncios">ANUNCIOS</a></li>
<li><a href="index.php?page=servicios">SERVICIOS</a></li>
<li><a href="index.php?page=utilidades">UTILIDADES</a></li>
<li><a href="index.php?page=contacto">CONTACTAR</a></li>
</ul>
</div>

<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
<div id="main">
<div id="column_left">


<?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='home'){
// include registrarse
include('include/in-home.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='siniestrados'){
// include login
include('include/in-siniestrados.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='recambios'){
// include contacto
include('include/in-recambios.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='anuncios'){
// include contacto
include('include/in-anuncios.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='servicios'){
// include contacto
include('include/in-servicios.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='utilidades'){
// include utilidades
include('include/in-utilidades.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include utilidades
include('include/in-contactar.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>
</div>
<div id="column_right">

<?php
//Este código lo ponemos dentro del div column_right que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='contacto'){
// include registrarse
include('include/in-contacto-lado-derecho.php');
} elseif(isset($_GET['page']) && $_GET['page']=='siniestrados'){
// include utilidades
include('include/in-siniestrados-derecha.php');
// En cualquier otro caso , mostramos el home
}

?>
<!-- else {
include('include/in-home.php');
} -->



<!-- <p>Lorem sint obcaecat deserunt mollit anim id est laborum.</p> -->

</div>
<!-- Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
<div id="footer"> Página desarrollada por Rubén Ferrer Ortiz</div>
</div>
</body>
</html>


default.css
/* ------------------------------
Estructura de la página
------------------------------ */

body{margin:0}

/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elementos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{
width:1004px;
display:inline;
}


p{
font:11px Verdana;
text-align:justify;
}
/***************Header**********************/
#topbar{
width:auto;
display:block;
border:none;
font-size:0; /*for eliminate space between images*/
}

/****Barra de navegación*****/
#navbar{
width:auto;
display:block;
height:24px;
}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{color:red;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding-right:auto; padding:0px 19px;}

/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:800px; margin-right:20px; float:left;}
#column_right{width:100px; height:100px; float:right; background-color:#443333;}

/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}

/***************footer*********************/
#footer{width:auto; display:block; height:24px;
border-top:1px solid;
text-align:center;


}

p.contacto{font-family:Arial; font-size:18px; font-style:negrita}

#siniestrados-derecha{background:#445544; width:auto; height:auto;}



este es mi codigo... tu quieres que ponga eso en el index?
  #12 (permalink)  
Antiguo 14/03/2011, 18:31
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

Yo probaria poniendo esto, en el index claro:


Código HTML:
Ver original
  1. <a href="index.php?page=home"  onclick="document.getElementById('test').style.backgroundColor="red" return false;">INICIO</a>


Contame que tal te fue
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #13 (permalink)  
Antiguo 14/03/2011, 19:10
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

pero en que parte del codigo lo dejo?

gracias
  #14 (permalink)  
Antiguo 14/03/2011, 21:16
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

<div id="navbar">
<ul>
<li>
Código HTML:
Ver original
  1. <a href="index.php?page=home"  onclick="document.getElementById('test').style.backgroundColor="red" return false;">INICIO</a>
</li>
<li><a href="index.php?page=siniestrados">VEHICULOS SINIESTRADOS</a></li>
<li><a href="index.php?page=recambios">RECAMBIOS</a></li>
<li><a href="index.php?page=anuncios">ANUNCIOS</a></li>
<li><a href="index.php?page=servicios">SERVICIOS</a></li>
<li><a href="index.php?page=utilidades">UTILIDADES</a></li>
<li><a href="index.php?page=contacto">CONTACTAR</a></li>
</ul>
</div>

Iria entre esas 2 etiquiteas li, probamos primer con el boton inicio, si funciona todo, seguimos con lo demas botones,

saludos
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #15 (permalink)  
Antiguo 15/03/2011, 07:31
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

no funciona, esta parte
"red"; return false;"

no la reconoce....
  #16 (permalink)  
Antiguo 15/03/2011, 14:32
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

Mira, esto es algo que yo lo probe y funciona, vos lo deberias agregar asi.

En tu head pones esto:

Código Javascript:
Ver original
  1. <script language = "Javascript">
  2. function pageBackground(bkgColor) {
  3. document.bgColor=bkgColor
  4. }
  5. </script>

y en tu html agregas algo como esto:



Código HTML:
Ver original
  1. <a href="index.php?page=home"  onClick=pageBackground('yellow')>INICIO</a>
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #17 (permalink)  
Antiguo 15/03/2011, 14:33
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: abrir webs en un main

Contame como te fue, porque eso a mi me funciona.

Saludos.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #18 (permalink)  
Antiguo 15/03/2011, 21:07
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: abrir webs en un main

hola gracias por contestar, te cuento cambia el color a amarillo, pero solo mientras mantego pulsado el rato, al momento de soltar desaparece.

de todas maneras no es lo que busco asi que mejor dejar este tema por cerrado. Voy a investigar un poco mas en los libros e intentare aclararme
gracias!!!

Etiquetas: main
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:32.