Ayuda con pagina web y css

DoSser · Enero 23, 2017, 11:55:31 PM

Hola recién encontré un curso de web responsive en donde te enseña a manejar estilos con css y JS pero tiene días que no me desempolvo con HTML y dentro del curso viene un área dedicada al diseño de una pagina web de un restaurant en donde la pagina original tiene en su sección de principal un texto flotando a la derecha y una imagen flotando a la izquierda, pero yo solo quiero poner el texto de la izquierda al centro de la presentación. soy nuevo con css y repito, tiene rato que no uso html.. Les comparto el link de la imagen de la pagina web (o al menos el avance que llevo), el texto seleccionado en azul es el que quiero centrar.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

el codigo html:

Código: html5


<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Restaurant Sol y Luna</title>
        
        <meta name="description" content="AQUI VA UNA DESCRIPCION PARA FACEBOOK IDENTIFIQUE DE QUE SE TRATA EL NEGOCIO">
        
        <meta name="viewport" content="width=device-width, initial-scale=1,minimun-scale=0.5, maximun-scale=2.5">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/estilos.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">

        <script src="js/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body>

    <header role="banner" class="encabezado">

        <div class="contenedor">

            <a href="#" class="logo">
                <img src="images/logo.png" alt="Logo del sitio">
            </a>
         
         <!-- numero de telefono, buscar y resdes sociales -->
         <div class="barra-contacto">

                <a href="Tel: 441 116 5100" class="telefono"><span class="fa fa-phone"></span> 
                441 116 5100
                </a>
                
                <form action="">
                    <input type="text" name="buscar" placeholder="buscar..">
                </form> 

                <ul class="redes-sociales">
                    <li>
                        <a href="#" class="fa fa-facebook"></a>
                    </li>
                </ul>

         </div> <!--CIERRE BARRA CONTACTO-->

        </div> <!--CIERRE CONTENEDOR -->
       
        
    </header> <!--TERMINA EL HEADER-->

    <nav role="navigation" class="menu-principal">
       <div class="contenedor">
           <ul>
               <li><a href="#">Inicio</a></li>
               <li><a href="#">Nosotros</a></li>
               <li><a href="#">Menú</a></li>
               <li><a href="#">Galeria</a></li>
               <li><a href="#">Pedidos</a></li>
               <li><a href="#">Contactanos</a></li>
               <li><a href="#">Blog</a></li>
           </ul>
       </div>
    </nav> <!-- FIN DE NAV -->

    <section class="presentacion">
        <div class="contenedor">
            <div class="texto-presentacion">
                <h1>EL PLACER DE COMER</h1>
                <h2>PARA NOSOTROS ES UN PLACER ATENDERLOS Y DELEITARLOS CON NUESTROS PLATILLOS</h2>
                <a href="#" class="boton-principal">VER NUESTROS PLATOS</a>
           </div>
        </div>
    </section><!-- FIN DE SECTION PRESENTACION -->

    <section class="bienvenidos">
        <div class="contenedor">
            <h2>BIENVENIDO AL RESTAURANT SOL Y LUNA</h2>
            <p>
            ¡VEN Y CONOCENOS!
            </p>

            <div class="bloque-bienvenidos">
                <figure>
                    <a href="#">
                    <img src="images/reloj.png" alt="HORARIO DE ATENCIÓN">
                    <h3>HORARIO DE ATENCION</h3>
                    </a>

                    <figcaption>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At error veniam, reprehenderit eligendi odio neque, maxime laboriosam alias ipsam quae voluptatum, cum quis corrupti, laudantium facere? Voluptatibus, iure voluptates asperiores?
                    </figcaption>
                </figure>

                <figure>
                    <a href="#">
                    <img src="images/carta.png" alt="NUESTRA CARTA">
                    <h3>NUESTRA CARTA</h3>
                    </a>

                    <figcaption>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At error veniam, reprehenderit eligendi odio neque, maxime laboriosam alias ipsam quae voluptatum, cum quis corrupti, laudantium facere? Voluptatibus, iure voluptates asperiores?
                    </figcaption>
                </figure>

                <figure>
                    <a href="#">
                    <img src="images/localizacion.png" alt="NUESTRO LOCAL ">
                    <h3>NUESTRO LOCAL</h3>
                    </a>

                    <figcaption>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At error veniam, reprehenderit eligendi odio neque, maxime laboriosam alias ipsam quae voluptatum, cum quis corrupti, laudantium facere? Voluptatibus, iure voluptates asperiores?
                    </figcaption>
                </figure>


            </div> <!-- FIN BLOQUE BIENVENIDOS -->

        </div> <!--FIN CONTENEDOR --> 
    </section> <!-- FIN DE SECTION -->

    <main role="main">
        <div class="contenedor">
            <article class="quienes-somos">

                <h2>¿QUIENES SOMOS?</h2>
                <img src="images/wero.jpg" alt="quienes somos">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi aperiam facere tenetur nobis perferendis at corrupti dolorem, vel esse natus aut, illo accusamus exercitationem et deleniti repellat atque sapiente voluptatem?

                    <a href="#">VER MÁS</a>
                </p>
            </article>

            <article class="aqui-estamos">
                <h2>AQUÍ ESTAMOS</h2>
            <iframe src="" frameborder="0"></iframe>
            </article>
        </div>
    </main> <!-- FIN DE MAIN -->

    <footer role="contentinfo">
        <small>Copyright @ 2017 Restaurante Sol y Luna</small>
    </footer>

        <script src="js/jquery-1.11.2.min.js"></script>
        
    </body>
</html>

y la hoja de estilos css (solo la parte de los estilos de la presentacion):

Código: css


section.presentacion
{
	background: url("../images/fondo-presentacion.jpg") center top;
	
}


section.presentacion .texto-presentacion
{
	
	width: 53.217391%;
	color: white;
	text-align: center;
}

section.presentacion .texto-presentacion h1
{
	font-family: 'original';
	font-size: 3.3125em;
	text-shadow: 1px 1px 0 rgb(56, 55, 55);
	letter-spacing: 2px;
	margin: 1.4666666666666666666666em 0 0 0;
	line-height: 1.1;
	

}

section.presentacion .texto-presentacion h2
{
	font-family: 'original';
	font-size: 1.5em;
	text-shadow: 1px 1px 0 rgb(56, 55, 55);
	margin:0;
	line-height: 1.1;
}

section.presentacion .texto-presentacion .boton-principal
{
	display:inline-block;
	text-decoration: none;
	color: white;
	background: #ee5624;
	padding: 0.714185em;
	border: 0.25em solid rgba(255, 255, 255, 0.42);
	border-radius: 0.2857em;
	background-clip: padding-box;
	font-size: 1.75em;
	margin: 0.714185em 0 0 0;
}

section.presentacion .texto-presentacion .boton-principal:hover 
{
	background: #ca3200;
	border: 0.25em solid rgba(255, 255, 255, 0.87);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

ya intente:

Código: css


section.presentacion .texto-presentacion
{
	float: none;
	width: 53.217391%;
	color: white;
	text-align: center;
}

Código: css


section.presentacion .texto-presentacion
{
	float:center;
	width: 53.217391%;
	color: white;
	text-align: center;
}

Espero me ayuden gracias y saludos, les dejo el link del curso

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

janopineda · Enero 24, 2017, 01:26:45 PM

Hola el problema que tienes que si es resposivo es un framework en donde debes usar compilador si necesitas modificar, también es fácil de usar porque en tu HTML es solo insertar las Tag que neceditas

Ayuda con pagina web y css

DoSser

Enero 23, 2017, 11:55:31 PM Ultima modificación: Enero 24, 2017, 01:59:40 AM por Gabriela

janopineda

Enero 24, 2017, 01:26:45 PM #1