[SOLUCIONADO] Me podrian ayudar con una plantilla simple de css.

Marthita23 · #1 (**permalink**) 02/01/2014, 21:37

Hola amigos...

Tengo un problema con una plantilla muy simple de css de la cual requiero su ayuda por favor.

El código css es...

Código CSS:

Ver original/*    Generated by [url]http://www.cssportal.com[/url]    */
 
@import url("reset.css");
 
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333
}
 
p {
    padding: 10px;
}
 
#wrapper {
    margin: 0 auto;
    width: 1000px;
}
 
#content {
    float: left;
    background: #FFFFFF;
    width: 1000;
}

El cual lo cree con un sitio que hace de forma online las plantillas, anexo a la descarga también viene un código html

Con el siguiente código...

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>CSS Portal - Layout</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../css/688109.css" />
</head>
<body>
    <div id="wrapper">
        <div id="content">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p><p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p><p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
       </div>
    </div>
</body>
</html>

El problema que tengo es que quiero cambiar todo ese texto de ejemplo por un titulo, no hay problema en darle las propiedades al texto, el problema que tengo es que no lo puedo centrar a la pagina ni he podido agregar un enlace en el.

La siguiente imagen es de como esta la plantilla ya con el titulo...

Así, como esta en la imagen anterior es lo único que he podido lograr.

Lo que quiero hacer y es en donde solicito de su ayuda es colocar el titulo centrado en cuanto altura y anchura como se ve en la siguiente imagen...

Y bueno aparte de centrar el titulo me gustaria que fuera el enlace para ingresar al sitio ya que esta pagina solo seria una portada.

Por ahora no la tengo publicada ya que esta en mantenimiento el host pero me gustaria que me indicaran como solucionar el problema para en cuanto publique el sitio nuevamente ya cuente con ese cambio.

Les mando un saludo, gracias... FELIZ 2014

joseluisq · #2 (**permalink**) 02/01/2014, 22:42

Hola,
Imagino que esa imagen esta como fondo (background) entonces si te entendi bien deseas cambiar el parrafo por un titulo con enlace, si es asi bien aqui vamos:

Debes hacer esto en el cuerpo del html:

Código HTML:

Ver original<div id="content">
    <h1><a href="http://enlaceparaeltitulo.com">El título va aquí</a></h1>
</div>

Y como esta pagina será una portada, necesitamos que ocupe toda la pantalla, ¿cierto?
entonces agregas el siguiente estilo para tu elemento #content

Código CSS:

Ver original#content { 
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}

Luego centramos el título en vertical

Código CSS:

Ver original#content  h1 { 
   display: table-cell;
   width: 100%;
   height: 100%;
   text-align: center;
   vertical-align: middle
}

Bueno eso fue todo, es una de las muchas soluciones para centrar texto o elementos verticalmente.
Espero te sirva.

¡ Buena suerte !

Marthita23 · #3 (**permalink**) 04/01/2014, 12:23

Gracias joseluisq

me ayudo mucho la información que me compartiste ya pude solucionar mi problema.