Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Ayuda html + css

HTML - Ayuda html + css

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 8
Ha disminuido su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda html + css

Publicado por Jose Luis (5 intervenciones) el 16/04/2017 17:16:21
Buenas,

Tengo una pequeña duda a la hora de realizar una practica. Tengo que recrear la imagen que adjunto en este correo tanto en html como en css.
inicio

La verdad es que no se por donde empezar ya que tengo que crear el menú y organizar el texto en tres bloques.

Alguien me puede echar un cable y ayudarme a realizar la practica?

Gracias
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 Enrique
Val: 105
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda html + css

Publicado por Enrique (36 intervenciones) el 16/04/2017 23:22:34
Mínimo intenta hacerlo amigo
No solo es darte La idea, sino hacerte La práctica, su que suena raro que sea una práctica sin que tangas nociones de HTML o Css
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: 8
Ha disminuido su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda html + css

Publicado por Jose Luis (5 intervenciones) el 16/04/2017 23:27:13
Algo he hecho amigo.

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
29
30
31
32
<!doctype html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title></title>
<meta name="content="" />
<link href="estils.css" rel="stylesheet" type="text/css" />
</head>



<body>

	<div class="container">
 

	<img id="img" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC3/logo.jpg" />


<br>

<nav class="menu">
  <ul>

    <li><a href="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC3/index.html">INICIO</a></li>
    <li><a href="">LIBROS</a></li>
    <li><a href="">PEDIDO</a>
  </ul>

    

</nav>



	

  





		</div>

	

</body>

</html>

CSS
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
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
	margin: 0;
	padding: 0;
	font: 16px/1.6 Georgia, "Times New Roman", Times, serif;
	color: #242424;

	text-align: justify;
}
 
 
 
.container {
	width: 100%;
	max-width: 900px;
	margin: 50px auto; /*centrem el contingut horitzontalment*/
}
 
#img {

  	display: block;
        margin: auto;
        width: 50%;
}
 
 
.menu ul, .menu li {
	margin: 0;
	padding: 0;
}
 
.menu ul {
	list-style: none;
}
 
.menu li {
	float: left;
	position: relative;
	width:auto;
 
}
 
.menu a {
	background: #30A6E6;

	color: #FFFFFF;

	display: block;
	padding: 10px 120px;
	text-align: center;
	text-decoration: none;
}

Pero no me sale igual la barra de navegacion...
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 Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda html + css

Publicado por Lopez (271 intervenciones) el 17/04/2017 03:15:53
Hola Jose Luis,

Si bien entiendo, tienes que hacer una plantilla html, esta irá en el cuerpo del correo.

Ten en cuenta un par de cosas:
Cuando se trata de trabajar con firmas y/o con plantillas html dentro del mail,
las tablas estan mucho mejor soportadas. Si, me has leido bien, tablas :)

Te recomiendo hagas uso de ellas sobre, divs.

https://www.w3schools.com/html/html_tables.asp

Si es solo crear el formato, y no tiene nada que ver con lo que antes supuse,
Te dejo la estructura para que vayas tu aplicando los estilos:

1
2
3
4
5
6
7
8
9
10
11
.x{ float:left; width:33%; }
<div class=""><!-- CONTENEDOR -->
<div ID="header"> logo etc </div><!-- TOP -->
<div ID="menu"> tu menu va aqui </div><!-- / menu -->
<div ID="cuerpo"> <!-- cuerpo -->
<div class="x"> 1 </div>
<div class="x"> 2 </div>
<div class="x"> 3 </div>
</div><!-- / cuerpo -->
<div id="pie"> <p> mis derechos etc </p> </div><!-- / pie de pagina -->
</div><!-- /CONTENEDOR -->

Cuentanos que tal te sale,
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: 8
Ha disminuido su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda html + css

Publicado por Jose Luis (5 intervenciones) el 17/04/2017 11:18:00
Gracis amigo.

Lo que comentas de las tabla, el texto que sale en 3 bloques tendre que ponerlo en tablas.

Tengo un par de dudas:

El .x a que hace referencia?

El menu se puede hacer con <nav>?


Grcias
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: 8
Ha disminuido su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda html + css

Publicado por Jose Luis (5 intervenciones) el 17/04/2017 12:12:22
No se trata de emails, sino de crear una web a partir de la imagen que he mostrado.
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 Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda html + css

Publicado por Lopez (271 intervenciones) el 17/04/2017 15:17:48
Jose Luis,

La .x es una clase CSS. esta la puedes añadir dentro de estils.css.
Sobre el uso de <nav>, claro que puedes, es parte de las etiquetas presentes en HTML5,
y sin dudas, hará mas entendible tu estructura.
Puedes incluso cambiar <div id header> por <header>.

LEctura recomendada: Etiquetas HTML5
https://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/

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