Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Ayuda con CSS

CSS - Ayuda con CSS

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 11
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Tomas (5 intervenciones) el 19/02/2019 20:08:33
Hola gente, necesito que me den una mano, se me esta haciedno dificil, y se que para muchos de ustedes es muy facil hacer esto, se los agradeceria porque ya me estoy perdiendo un poco y me mareo entre tantos codigos.
Necesito hacer esto

+ Cabecera esta sección debe contener la información del sitio, toma en cuenta lo siguiente:
+ Establece el fondo de color #5b7989.
+ Agrega el Nombre del sitio "Comenzando con la fotografía" ubicado al lado izquierdo, en blanco la letra debe tener una sombra de 2px de color #02010a.
+ Aplica bordes redondeados en las esquinas superiores a 10px.
+ Desarrolla un menú, para la versión desktop, a la derecha con enlaceas a tres páginas: Inicio, Paisajes, Retratos. La página actual debe tener estilo sin subrayado.

Y por ahora llegue a hacer esto pero ya me perdi, nisiquiera se si lo estoy haciendo bien:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
header{
  width: 60%;
  height: 70px;
  background-color:  #5b7989;

  margin-top: 20px;
  margin-left: 40px;
  border-radius: 10px 10px 0px 0px;
  position: fixed;
  font-size: 50px;
  color: white;
  text-align: left;
  text-shadow: 2px 2px 2px #02010a;

  padding: 3px;
}

Agregue algunas cosas para que quede un poco mejor pero tal ves las borre, yo lo que quiero es que me ayuden a hacerlo bien, 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 Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Xavi (33 intervenciones) el 20/02/2019 07:57:03
Hola Tomas, pero aquí solo nos muestras el código CSS... faltaria ver el código HTML
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: 11
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Tomas (5 intervenciones) el 20/02/2019 14:52:07
Hola, en el HTML no puse nada importante, solo el link al .css

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="estilos.css">
  <title>Comenzando con la Fotografia</title>
</head>
<body>
  <header>Comenzando la Fotografia</header>
</body>
</html>
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 Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Xavi (33 intervenciones) el 20/02/2019 20:12:50
Hola Tomas, hasta donde lo tienes, lo veo correcto...

Solo te falta añadir el menu en un <nav>
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: 11
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Tomas (5 intervenciones) el 20/02/2019 20:31:41
Hola! Ya cambie muchas cosas, busque entre mis repasos y cambiae algunas cosas, pero necesito saber como poner el <nav> al lado del titulo y como lograr que en la pagina en la que estoy no este subrayado el nav.. No se si me explique bien, les adjunto html, css y una foto

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="estilos.css">
  <title>Comenzando con la Fotografia</title>
</head>
<body>
  <header>Comenzando la Fotografia</header>
<header>
 
  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contacto</a>
  </div>
  </header>


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
@font-face {
  font-family: 'Dancing Script';
  src: url('Fuente/src/DancingScript-Bold.otf');
}
body{
  background-color: #02010a;

}
 
header {
  padding: 2vh 2vw;
	border-radius: 10px 10px 0px 0px;
	background-color: #5b7989;

  font-size: 40px;
  font-family: 'Dancing Script';
  color: white;
  text-align: left;
  text-shadow: 2px 2px 2px #02010a;

}
 
.topnav {
  overflow: hidden;
}
 
.topnav a {
  float: right;
  color: #f2f2f2;

  text-align: center;
  padding: 0px 15px;
  text-decoration: none;
  font-size: 17px;
}

En esta imagen se ve que esta abajo los menus, y yo lo quiero poner arriba, en el mismo lugar pero arriba, y que cuando este en cada uno, que ese no se marque subrayado, y los demas si.
Sin-titulo
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 Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Xavi (33 intervenciones) el 21/02/2019 07:42:10
Cuando dices arriba, te refieres por encima del titulo? o a la misma altura que el titulo?

En tu código has crado dos <header>... porque no pones el <nav> dentro del <header>? algo así:
1
2
3
4
5
6
7
8
<header>
  Comenzando la Fotografia
  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contacto</a>
  </div>
</header>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 11
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Tomas (5 intervenciones) el 21/02/2019 13:44:09
Ahi lo puse como dijiste, cuando me referi arriba quice decir a la misma altura del titulo, como tendria que hacer? Pd: Gracias por toda la ayuda
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 Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con CSS

Publicado por Xavi (33 intervenciones) el 21/02/2019 16:53:54
Una manera, seria utilizando una posición fija... algo así:

Te he modificado el <div clas="nav... por <nav>
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
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Comenzando con la Fotografia</title>
</head>
<body>
 
<header>
  Comenzando la Fotografia
  <nav>
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contacto</a>
  </nav>
</header>
 
</body>
</html>
 
<style>
@font-face {
  font-family: 'Dancing Script';
  src: url('Fuente/src/DancingScript-Bold.otf');
}
body{
  background-color: #02010a;

}
 
header {
  padding: 2vh 2vw;
	border-radius: 10px 10px 0px 0px;
	background-color: #5b7989;

  font-size: 40px;
  font-family: 'Dancing Script';
  color: white;
  text-align: left;
  text-shadow: 2px 2px 2px #02010a;

  position:relative;
}
 
nav {
  overflow: hidden;
  position:fixed;
  top:40px;
  right:12px;
}
 
nav a {
  float: right;
  color: #f2f2f2;

  text-align: center;
  padding: 0px 15px;
  text-decoration: none;
  font-size: 17px;
}
</style>

Otra manera, es hacerlo flotante a la derecha, pero si se hace la pantalla pequeña, te hara dos lineas... aunque de la manera que esta ahora, se sobrepone.

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

Ayuda con CSS

Publicado por Tomas (5 intervenciones) el 22/02/2019 09:39:54
Ahi quedo exactamente como yo lo queria, muchisimas gracias por toda la ayuda Xavi
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