HTML - Etiqueta DIV

 
Vista:
Imágen de perfil de Adrian

Etiqueta DIV

Publicado por Adrian (5 intervenciones) el 08/10/2021 11:16:18
Haber si alguin me puede hechar una mano, tengo problemas con el dereamweaver, vereis este es codigo que tengo puesto:

<style type="text/css">
div.prueba1{margin-left:0em; margin-top:0em; margin-right:66em; color:#FFFF00;}
.prueba2{margin-left:19em; margin-right:20em}
#texto{
position: absolute;
left:317px;
top:16px;
right:25em;
background: #FFFF00;
height: 449px;
}
#punk{position:absolute; left:60em; top:1em; right:20em ; background-color:#00CC66}
div.asthar{ position:absolute; right:61em; top:30em; background-color:#330099}
</style>

..... ...texo .......


<div class="prueba1"><img src="Rosa Negra.jpg" width="305" height="455" /></div>
<div class="prueba2"><img src="dragon2.jpg" width="646" height="266" /></div>

<div id="punk"><img src="okto.jpg" width="500" height="723" /></div>

<div class="asthar"><img src="Asthar.jpg" width="250em" height="257em"/></div>
</body>
</html>

en las capturas depantalla que he hecho son una del chrome y la otra en el dreamweaver
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 pablo
Val: 6
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Etiqueta DIV

Publicado por pablo (22 intervenciones) el 08/10/2021 18:47:01
Hola Adrian, pues mira antes que nada, yo a consejo personal no utilizar dreamweaver, recomiendo más VS Code, ya que de esa manera podrás lidiar directamente con el navegador, y también te ayudara con el autocompletado de algunas cosas incluso trae emmet que sirve mucho a la hora de iniciar en el mundo del maqueteado de tus páginas web, ojo no digo que dreamweaver sea malo, yo mismo lo he usado solo que si estas empezando no es lo recomendable pues te autogenera mucho código pero bueno ya queda de ti.

Ahora bien el tema que nos atañe, me gustaría recomendarte que como buena practica no utilices código de css inline por ejemplo el tamaño de las imágenes, sería mejor utilizarlo directamente dentro del css a modo de que si en algún momento deseas modificarlo y encontrarlo más fácil, pues a pesar de que tu página es pequeña, si llegas a trabajar con una página más grande pues se haría tedioso buscar esa imagen en concreto y ponerlo. También acotar que a la hora de asignarle un identificador decidir que vas a usar en unos utilizas clases en otros ides pues bien sea cual sea que uses utiliza uno. Añadir también que utilizar margin-left. margin right, aunque esto esta bien recomiendo usar margin y una manera fácil de determinar que valor va es verlo como si fueras en las agujas del reloj, es decir margin: top left bottom right y es una manera más rápida y fácil para no tener tanto código.Por último y disculpa por el fastidio pienso que a la hora de usar el absolute primero va el top y luego o left o right y en la clase ash utilizas right cuando debería de ser left por que alfin y al cabo solo quieres separación del margen izquierdo.
Sin más nada que agregar y esperando haberte ayudado con uno que otro consejo aquí te dejo el código corregido desde mi punto de vista espero te sirva y sea de utilidad.
Saludos.
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
29
30
31
32
33
34
*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body{
  position: relative;
}
 
.prueba1>img{
  width:305px;
  height:455px;
  margin: 0 0 0 66px;
}
 
.prueba2>img{
  width:646px;
  height:266px;
  margin: 0 19em 0 20em;
}
.punk>img{
  width: 500px;
  height:723px;
  position:absolute;
  top: 1em;
  left:62em;
}
.asthar>img{
  width:250px;
  height:257px;
  position:absolute;
  top:29em;
  left:4rem;
}
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