CSS - Ayuda! Problemas de alineado horizontal de cajas

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 14 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda! Problemas de alineado horizontal de cajas

Publicado por Gerlando (3 intervenciones) el 16/07/2019 06:08:21
Buenas noches, estoy presentando problemas a la hora de alinear dos cajas div una al lado de la otra. El caso es que yo quiero colocar dos imágenes contiguas en la pagina web y, al momento de colocar una, la otra no aparece (al parecer no compila) y no se porque, pues las líneas de código no difieren mucho de la imagen que si me compiló. No se que hacer. Adjunto coloque dos imágenes en un archivo .rar, ¿Me pudieran asesorar por favor? Muchas gracias de antemano, ando usando Google Chrome.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda! Problemas de alineado horizontal de cajas

Publicado por juan jose (57 intervenciones) el 16/07/2019 19:17:55
envia mejor el codigo y las imagenes

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 14 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda! Problemas de alineado horizontal de cajas

Publicado por Gerlando (3 intervenciones) el 17/07/2019 16:55:17
Ya acomodé las imágenes, en el código, yo llamo a dos imágenes: La primera es la imagen que tu ves en el archivo consulta2 y la otra es la que no compila, que es la que quiero usar como fondo en la caja al lado de la primera y que, como se ve en la imagen, tengo referenciada mediante un selector (o eso creo).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda! Problemas de alineado horizontal de cajas

Publicado por juan jose (57 intervenciones) el 17/07/2019 17:07:49
no subas en imagen, sube el documento html, las imagenes que deseas y el documento css dependiente, subistes lo mismo que anteriormente, con lo cual sigo igual

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 14 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda! Problemas de alineado horizontal de cajas

Publicado por Gerlando (3 intervenciones) el 17/07/2019 17:33:27
Ya acomodé las imágenes, en el código, yo llamo a dos imágenes: La primera es la imagen que tu ves en el archivo consulta2 y la otra es la que no compila, que es la que quiero usar como fondo en la caja al lado de la primera y que, como se ve en la imagen, tengo referenciada mediante un selector (o eso creo). No veo nada malo en mi código, no se que pasa.
Además, en el archivo consulta2, el texto de al lado esta bien justificado al lado de la imagen por la propiedad margin-left, ubicada en la linea que está encima del comienzo del texto: "MI nombre es Carlos Navidez..." el pero aqui es que la caja que contiene el texto es amplia, ¿No habra otra manera de reajustar las dimensiones de una caja div?

He aquí los códigos:

codigo portafolio.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html> <!--PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd--! si vas a crear javascript-->
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--usa esta linea de codigo para resolver lo de los acentos (parece que tiene que ver con el valor utf-8 de charset)-->
        <title>Carlos Navidez</title>
		<link rel="stylesheet" href="style.css,portstyle.css,practica.js"></link>
    </head>
    <body>
		<h1 style="text-align:center">Carlos Navidez</h1>
		<div style="position:absolute"><img src="C:\Users\Clarette\Desktop\tramites de acto de graduacion\construccion de tesis a entregar en alonso gamero\cosas de ocio\paradoja.png" alt="apareció? NO" width="500px" height="900px"></div> <!--Busca otra foto-->
		<div style="position:relative;text-align:right">
		  <span>Contactos</span>
		  <span>Trabajos realizados</span>
		  <div class="image1" style="position:relative;margin-left:500px;padding:24px;text-align:justify">
				Mi Nombre es Carlos Navidez, tengo 28 años. Soy Programador y
				Diseñador de páginas Web Front-End independiente. Me encuentro residenciado
				en Venezuela. Además de HTML,CSS y Javascript, poseo dominio de C y C++.
		  </div>
 
		</div>
 
	</body>
</html>

codigo portstyle.css

1
2
3
4
5
6
div.image1 {
    background-image:url("https://lh3.googleusercontent.com/rfXQYTiyuiimvbJYsNS_ocBMw4LOInrez-CkQSbC96Pdik35US9t4O7N1RAM6ecAz0V8eA=s152");  /*Sin comillas en el argumento de la url*/
    right:20px;
    width:500px;
    height:900px;
}

y aquí, la imagen

https://lh3.googleusercontent.com/rfXQYTiyuiimvbJYsNS_ocBMw4LOInrez-CkQSbC96Pdik35US9t4O7N1RAM6ecAz0V8eA=s152

yo quiero colocar esta imagen como fondo de pantalla para el texto, ademas de reajustar la caja en la cual estoy llamando la imagen, para que quede justo al lado de la imagen que sí me compiló, nada mas. Esto ultimo lo he intentado jugando con la propiedad position, pero no parece que funcione, de ahí que tenia el plan de reajustar las dimensiones de la imagen, pero el width y el height no parecen funcionar, no se si me podrías ayudar también con esto, no se que hacer, yo no veo nada malo en el código.

Nota: te recomiendo que uses tu una imagen que te funcione para la primera imagen que sí me compiló. Esa es la línea que está debajo de esta línea: <h1 style="text-align:center">Carlos Navidez</h1>.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda! Problemas de alineado horizontal de cajas

Publicado por juan jose (57 intervenciones) el 17/07/2019 19:19:58
1
<link rel="stylesheet" href="style.css,portstyle.css,practica.js"></link>

eso es incorrecto no estas eso no es una ruta, intentastes ahi un frankestein de poner todo junto

1
<link rel="stylesheet" href="css/style.css" type="text/css" />

despues tienes codigo repetido por todos los lados, crea un mejor clases y un css

yo deje solo el css y el fondo aparece.... es muy caotico ese codigo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda! Problemas de alineado horizontal de cajas

Publicado por juan jose (57 intervenciones) el 17/07/2019 20:26:27

CAPTURA



pagina

HTML



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>consulta</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
 
</head>
<body>
    <header>
        <h1>Carlos Navidez</h1>
    </header>
    <main>
        <div class="izquierda"></div>
        <div class="derecha">
            <span>Contactos</span>
            <span>Trabajos realizados</span>
            <div class="img1" >
                  Mi Nombre es Carlos Navidez, tengo 28 años. Soy Programador y
                  Diseñador de páginas Web Front-End independiente. Me encuentro residenciado
                  en Venezuela. Además de HTML,CSS y Javascript, poseo dominio de C y C++.
            </div>
        </div>
    </main>
    <footer></footer>
</body>
</html>

CSS



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.izquierda{
    width: 500px;
    height: 900px;
    float: left;
    background: url("../img/consulta.png");
 
}
.derecha{
    width: 500px;
    height: 900px;
    float: left;
    margin-left: 20px;
}
h1{
    text-align: center;
}
.img1{
    background: url("../img/fondo.jpg");
}

CONSEJOS



Utiliza porcentaje para las medidas, cuando escriba código se mas limpio, tabula, no dejes tanto style en el html, utiliza float ect..

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar