Hola!

Registrándote como bakuno podrás publicar, compartir y comunicarte en privado con otros bakuos :D

Regístrame ya!

Ayuda con CSS (centrar)

darinel8

darinel8

Bovino adicto
Desde
14 May 2006
Mensajes
980
Hola amigos bakunos, estoy tratando de aprender CSS

asi que me puse a modificar el about:home de mi firefox con el Stylish, modificando el estilo Pond mi resultado es el siguiente.

f4f65xbtog2glpn5fcn0.gif


pero no pude modificar la "ubicación" de la barra de busqueda, le movi le puse, le quite XD varios comandos relacionados al tamaño de la barra y nada :(

asi que les pido su ayuda, para poder mover la barra de busqueda al centro (vertical) de la pagina

l9nfwxr5hhivtu701x2k.png

¿que comando modifico o ingreso? para "mover" objetos con CSS como este?


Este es mi codigo modificado:
Código: 
/*@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@namespace url(http://www.w3.org/1999/xhtml);*/
@-moz-document url("about:Home"), url("about:home") {

#sync, #brandLogo, #snippetContainer, #searchEngineLogo, #restorePreviousSessionSeparator
{ display: none !important; }

/* bottom icons */
.launchButton::before
{ display: none !important; }

html
{ background: #0F0D00 url("http://www.imageurlhost.com/images/p6meexf8ofba4cq8r7xg.png
") no-repeat center fixed !important; 
background-size: cover !important; }

body
{ background: transparent !important; }

#contentContainer
{ background: none !important;
margin: 0 auto !important; 

}

#searchContainer
{ -moz-appearance: none !important; 
margin: 0 auto !important;
height: 0px !important;
width: 800px !important;
padding: 400px 100px 100px 370px!important;
border-radius: 4px !important;
border: 1px solid !important;
border-top-color: rgba(162,146,116,.5) !important;
border-right-color: rgba(98,88,79,.7) !important;
border-bottom-color: rgba(40,34,26,.8) !important;
border-left-color: rgba(47,43,34, .6) !important;
background: radial-gradient(at top, rgba(111,111,111, .01), transparent), rgba(111,111,111, .3) !important;
box-shadow: -2px 4px 14px 2px rgba(0,0,0, .6) !important; }

#searchText, #searchSubmit
{ -moz-appearance: none !important; 
height: 24px !important;
font-size: 15px !important;
color: white !important;
text-shadow: 1px 2px 2px #97947F !important;
font-weight: bold !important;
font-family: Segoe UI, sans-serif !important;
padding: 0px !important;
outline: 0 none !important;
border-radius: 4px !important;
border: 1px solid !important;
border-left-color: #1C1916 !important;
border-top-color: #1C1916 !important; 
border-bottom-color: #6B6559 !important;
border-right-color: #594F46 !important;
box-shadow: 0px 4px 2px rgba(121,117,109, .4) !important; }

#searchText, #searchSubmit
{ background: radial-gradient(at top, #9C917E, rgba(73,83,87, .4), transparent) !important; }
   
#searchText:hover, #searchText:focus
{ background: radial-gradient(at top, #B7AA93, rgba(73,83,87, .2), rgba(110,125,102, .2)) !important; }
    
#searchSubmit
{ margin-left: 12px !important;
padding: 0px 2px !important;
font-weight: normal !important;
color: black !important;
text-shadow: 1px 0px 0px #000, 2px 2px 2px rgba(86,97,102, .5) !important;
font-family: Papyrus /*Enviro *//*Goudy Old Style*/ /*Viner Hand ITC*/ !important; 
height: 24px !important;
}

#searchSubmit:hover
{ text-shadow: 1px 0px 0px #000, 1px 2px 4px #B7AA93 !important;
background: radial-gradient(at top, #B7AA93, rgba(162,163,146, .3), transparent) !important; 

}

/* ========== links bar */

#launcher, #restorePreviousSession
{ background: transparent !important;
border: none !important;
box-shadow: none !important; 
height: 20px !important;
} 

#launcher
{ position: fixed !important;
bottom: 30% !important;
margin-left: 6px !important;
display: block !important; 
text-align: center !important; 
white-space: nowrap !important; }

.launchButton
{ background: transparent !important;
border: none !important;
box-shadow: none !important; 
height: 20px !important;
}

#launcher button
{ -moz-appearance: none !important;
padding: 0 6px !important;
font-family: Viner Hand ITC  /*Enviro, *//*Goudy Old Style*/ /*Papyrus*/, sans-serif !important;
font-size: 16px !important;
color: #887D68 !important;
text-shadow: 1px 2px 1px #000, 1px 1px 4px #000 !important;
/*border: 1px solid !important;
border-top-color: rgba(162,146,116,.4) !important;
border-right-color: rgba(98,88,79,.5) !important;
border-bottom-color: #0C0906 !important;
border-left-color: #0C0906 !important;*/
border: none !important;
box-shadow: none !important;
height: 20px !important;
}

#launcher button:hover, #launcher button:hover:active, 
#restorePreviousSession:hover
{ color: #AEA386 !important;
background: radial-gradient(at top, #6D6358, transparent) !important;
/*border-top-color: #0C0906 !important; 
border-right-color: #0C0906 !important;
border-bottom-color: #473D36 !important;
border-left-color: #3F3630 !important;
box-shadow: inset 0px 2px 4px 2px rgba(0,0,0, .3) !important; */
height: 20px !important;
}

#restorePreviousSession
{ background: none !important;
padding-top: 6px !important; } }


/* i really want this to be global */
/* ============ favicon ============== */
.bookmark-item[label="about:Home"], .bookmark-item[label="about:home"],
#main-window[stylish-url="about:Home"] #page-proxy-favicon,
#main-window[stylish-url="about:home"] #page-proxy-favicon,
.tabbrowser-tab[label="Mozilla Firefox Start Page"] .tab-icon-image,
#main-window[stylish-url="about:home"] #fav-image 
{ list-style-image: none !important;
width: 0px !important;
padding-left: 21px !important;
background: url("http://www.imageurlhost.com/images/hydhxv4fwo7949v1a.png") center no-repeat !important; }

html {
  font: message-box;
  font-size: 100%;
  background-color: hsl(0,0%,95%);
  color: #000;
  height: 100%
}

de antemano les agradesco :D
 
Hola, veo que eres nuevo.

¿A qué te refieres con centrar ?
¿Centrar un elemento de manera tanto vertical como horizontal ?
Para eso se requiere una técnica un poco más avanzada para poder centrar verticalmente.

Pero para centrar solo de manera horizontal es mucho más fácil.
Todos los elementos de tipo bloque y con un ancho definido se pueden centrar con relación a su contenedor padre simplemente definiendo sus márgenes laterales con el valor "auto".

Ejemplo:

Código: 
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar DIV</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: rgb(107, 116, 218);
            font: 16px/1.2 Arial, Helvetica;
        }
        .mi-contenedor-centrado {
            margin: 2em auto 0; /* El valor AUTO para izquierda y derecha permite centrar horizontalmente el contenido en relación a su padre (en este caso BODY)  */
            border: 5px solid white;
            padding: 1em;
            width: 400px;
            background: rgb(107, 218, 178);
            border-radius: 5px;
            text-align: center;
        }
        h1 {
            font-family: Georgia;
            font-size: 4em;
            text-shadow:2px 5px 8px rgba(0, 0, 0, 0.58);
        }
    </style>
</head>
<body>
    <div class="mi-contenedor-centrado">
        <h1>YOLO</h1>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, nam, aliquid, debitis, soluta numquam necessitatibus quam illum iste enim blanditiis nostrum incidunt voluptatibus quis assumenda nemo quasi voluptatum dolorem reprehenderit.</em></p>
    </div>
</body>
</html>

El ejemplo online lo puedes ver aquí.


Por último te recomiendo que leas esta página.

​

Contiene de una manera excelentemente resumida los conceptops clave para aprender CSS.
Es la mejor que he encontrado.

Saludos.
 
Debes iniciar sesión o registrarte para participar.
Volver
Arriba