Problema con estilo de texto al pasar de Photoshop a Dreamweaver

  • Autor Autor Francesc
  • Fecha de inicio Fecha de inicio
F

Francesc

Gamma
Redactor
Hola a todos,

Pues para un trabajo para la uni tengo que pasar un diseño en Photoshop a Dreamwever ¿Qué por qué me enseñan esto si estudio publicidad? Ni puta idea.

Bueno, todo bien, mi diseño se ve bonito, lindo, hasta sensual, salvo por la letra. Definí los párrafos y los títulos en el css y aplique las etiquetas en el html pero en el preview se me sigue viendo con la letra original.

Alguien sabe cómo arreglarlo?

Saludos
 
Sin el codigo poquito te puedo ayudar....
 
Bueno, es justo lo que se podrían imaginar:
Insertar CODE, HTML o PHP: 
.h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-transform: capitalize;
}

.p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-right: 15px;
	padding-left: 15px;
}



Y un ejemplo del html:
HTML: 
<div id="derecha">
  <p><img src="imagen3.jpg" width="292" height="155" /></p>
  <h1>Lorem</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in metus massa. Nullam quam orci, pretium et pulvinar ac, pretium imperdiet quam. Sed nec fringilla metus. Nulla at iaculis lacus. Nam turpis ipsum, faucibus vel dignissim vel, pharetra ac nulla. Etiam tempus aliquet odio ut bibendum. Nunc convallis turpis id elit fringilla aliquet. Phasellus erat enim, faucibus quis ornare sit amet, elementum quis arcu.</p>
</div>
 
Sacale los puntos a h1 y p.

Insertar CODE, HTML o PHP: 
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-transform: capitalize;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-right: 15px;
	padding-left: 15px;
}
 
Quitale los puntos ya que no son clases.
Saludos 🙂
 
Para las etiquetas HTML no es necesario poner los puntos(<h1>,<p>,<ul>,<li>,...etc.)pero eso si cuidado con definir una etiqueta pues afecta también a todas del documento te recomiendo investigar sobre los selectores CSS para especificar a que etiqueta le quieres dar un estilo en concreto. un saludo
 
No le definas fonts-family a las etiquetas p o h1 a menos que sea necesario hacerlo, hazlo con la etiqueta body y así todos lo van a heredar.

Insertar CODE, HTML o PHP: 
body {
    font-family: Arial, Helvetica, sans-serif;
    /* todo el documento hereda estos fonts */
}


h1 {
	font-size: 18px;
	text-transform: capitalize;
}

p {
	font-size: 12px;
	padding-right: 15px;
	padding-left: 15px;
}

Como dice taylorur, al dar estilo a una etiqueta en este caso p, se le aplica a todos los párrafos del document. Para ello se usan clases que son las que comienzan con puntos e.j. .p, .h1, .mi-clase, etc.

En el tu HTML sería algo como esto:

Insertar CODE, HTML o PHP: 
<div class="col-derecha">
    
    <img src="imagen3.jpg" />
    <h1 class="titulos">Lorem</h1>
    
    <p class="parrafos">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in metus massa. Nullam quam orci, pretium et pulvinar ac, pretium imperdiet quam. Sed nec fringilla metus. Nulla at iaculis lacus. Nam turpis ipsum, faucibus vel dignissim vel, pharetra ac nulla. Etiam tempus aliquet odio ut bibendum. Nunc convallis turpis id elit fringilla aliquet. Phasellus erat enim, faucibus quis ornare sit amet, elementum quis arcu.</p>

</div>

Al usar clases te viene mejor, porque así puedes heredar propiedades de otras clases. Piensa en hacer todo en la hoja de estilos y no pasar ancho y alto a las imágenes de forma directa.

Espero haber aclarado algunas cosas.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba