No puedo dimensionar y posicionar el logotipo correctamente dentro del eslogan div – HTML y CSS – SitePoint Forums
Hola gente,
Recientemente cambié mi nombre y en el proceso de actualizar mis redes sociales, listados de directorios, etc., descubrí que mi logotipo no funcionaba en ciertos casos en los que se requería una imagen de tamaño mínimo. Así que creé un nuevo logotipo, pero tengo problemas para que funcione correctamente en mi sitio web.
Capturas de pantalla del logo nuevo y antiguo.
No es posible hacer que el logo se deslice hacia la izquierda como el original. Intenté cambiar el tamaño de la imagen y recortarla, así como la propiedad de posición de fondo. No sé qué es lo que no entiendo sobre el modelo de efectivo aquí.
Marcado relevante y CSS:
</head><body>
<div id = "tagline">
<span>DrumDrTom<span>-</span></span>
<small>Hand drum repair, restoration and sales </small>
</div>
<div id="columnWrapper">
#tagline {
font-size:90%;
background:#DEF url(Images/h1Background.png) top left repeat-x;
color:#00F;
border-top:0.22222em solid #7AD; /* 2px */
}
#tagline span {
height:7.1428571%;
display:block;
/* font:bold 2.3vmax/2.39vmax 'Sonsie One', verdana,helvetica,sans-serif; */ /* 36px/38px */
/* text-transform:uppercase; */
padding:0.55555em 0 0.27777em 2.77777em; /* 20px 0 10px 100px */
background:url(Images/h1Logo.png) left no-repeat;
/* background-size:6.4vmax; */ /* 10.5042017% 6.25% */
}
#tagline small {
height:7.1428571%;
display:block;
padding:0.3829em 0.78215em; /* 12px */
/*font:bold italic 0.95vmax/0.95vmax verdana,helvetica,sans-serif;*/ /* 125%/125% */
color:navy;
background:#BED8F3 url(Images/taglineBackground.png) top right repeat-y;
border:solid #7AD;
border-width:0.15em 0; /* 2px */
}
Lo cambié de tamaño de 1500pxl a 100pxl y tamaños intermedios. Recorté todo lo que pude y agregué más y más espacio a su alrededor. Y luego recortada en la parte superior, izquierda, derecha e inferior. Noto que a medida que corto la imagen aumenta en la página, llenando el espacio, supongo.
Sugerencias por favor.
