0

Necesito que estén a la misma altura la foto y el texto donde pone "ONE MORE SHOT". He probado poniendo el margin de la y imagen y del texto a 0 pero no me ha funcionado. Adjunto captura de como está actualmente y el código: introducir la descripción de la imagen aquí

			.headerEnd{
				padding: 0px;
				margin: 0px;
				width: 100%;
				background-color:#000000;
				height:110px;
			}
			#fotoEndi{
				margin-left: 100px;
			}
			
			@font-face{
				font-family: "TituloEndi";
				src: url("GameofBrush.ttf");
			}
			a:link{
				text-decoration:none;
				
			}
			a:visited{
				color: #000000;
			}
			
			#nombreEndi{
				text-align: center;
				margin:0 auto;
				position: relative;
				top: 50%;
				color: #8B0000;	
				font-family: "TituloEndi";
				font-size:40px;
			}
			
			.header{
				height:100px; width:100%;
				text-align:center;
			}
			
			.menu{
				height: 37px;
				width:100%;
				background-color: #B22222; 
				color:#333; 
				text-align:center;
				box-shadow:0px 4px 3px rgba(0,0,0,0)
			}
			.wrapper{ height:2000px; 
			   width:100%; 
			   padding-top:20px
			}
			.menu-fixed {
				position:fixed;
				z-index:1000;
				top:0;
				width:100%;
				box-shadow: 2px 2px 5px #999;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				display: inline-block; 
				font-size: 25px;
				width: 100%;
			}
			
			body{
				background-color: #DCDCDC;
				margin: 0;
			}

			#menu li{
				background: #DCDCDC;
				display: inline-block;
				list-style: none;
				background-color:#B22222;
			}
			
			.listaArriba{
				color: 	#000000;
				width: 150px;
			}
			
			#titulua{
				    background-color:#000;
					text-align:center;
					margin-left: 300px;
					margin-top: 7px;
			}
			
			.seccion1{
				background-color: white;
				height:749px;
				width: 1350px;
				margin-left: 0px;
				margin-top: 0px;
			}
			#footer{
				margin-top:0px;
				height: 40px;
				background-color:#B22222;
			}
			
			#soundcloud{
				margin-right:40px;
				margin-top: 3px;
			}
			.navigationFoot{
				text-align: right;
			}
			#creditos{
				font-size:12px;
				text-decoration:none;
			}
			a{
				color:black;
			}
			#o{
				margin-left: 250px;
				float: top;
			}
			
			.videos{
				height: 500px;
				width: 1000px;
				background-color: white;
				margin: 0 auto;
				text-align: left;
			}
			
			#oneMoreShot{
				margin-left: 100px;
				margin-top: 20px;
			}
			
			#oMSmin{
				margin-top: 50px;
				margin-left: 80px;
				border: 4px solid;
			}
		<header class="headerEnd">
			<div class = "cabecera">
				<ul id = "lista1">
					<a href="home.html" id="fotoEndi"><img src="endikasangroniz.png" id=titulua></a>
					<a href="../EndiIngles/endi.html" id = "o"><img src="../Bandera/uk.png"></a>
					<a href="../EndiCastellano/endi.html"><img src="../Bandera/banderaEspana.png"></a>
					<a href="../EndiEuskera/endi.html"><img src="../Bandera/ikurrina.png"></a>
					
				</ul>
			</div>
		</header>
		<header class = "header">
			<div class="menu" id="menu">
				<nav class="top-menu">
					<ul class = "navigation">
						<li class="listaArriba" id="news"><a href="news.html">NEWS</a></li>
						<li class="listaArriba" id="conciertos"><a href="gigs.html">GIGS</a></li>
						<li class="listaArriba" id="videos"><a href="videos.html">VIDEOS</a></li>
						<li class="listaArriba" id="songs"><a href="music.html">MUSIC</a></li>
						<li class="listaArriba" id="lyrics"><a href="lyrics.html">LYRICS</a></li>
						<li class="listaArriba" id="store"><a href="https://endikasangroniz.bandcamp.com/" target="_blank">STORE</a></li>
					</ul>
				</nav>
			</div>
				
				<div class="videos">
					<section>
						<img  id="oMSmin" src="../CaratulasAlbum/oneMoreShotmin.jpg"/> <h1>ONE MORE SHOT</h1>
					</section>
					
				</div>
				
				
				<div id="footer">
					<ul class = "navigationFoot">
						<a id="n" href="https://es-es.facebook.com/EndikaSangroniz/" target="_blank"><img src="../IconosRedes/iconoFacebook.png" ></a>
						<a id="n" href="https://www.instagram.com/endikasangroniz/?hl=es" target="_blank"><img src="../IconosRedes/iconoInsta.png"></a>
						<a id="n" href="https://endikasangroniz.bandcamp.com/" target="_blank"><img id="soundcloud" src="../IconosRedes/bandcamp.png"></a>
					</ul>

			</div>
		</header>

Adaptando el código a la solución de otro hilo parecido: introducir la descripción de la imagen aquí

8
  • Parecido, pero yo uso etiquetas h y no p. No sé si comparten propiedades. En ese caso si sería un duplicado. Commented el 1 nov. 2017 a las 19:10
  • @MikelMolinuevo no tiene nada que ver que etiqueta uses, las propiedades css las mismas puedes aplicar a ambas etiquetas Commented el 1 nov. 2017 a las 19:11
  • He probado lo de ese hilo y sale demasiado arriba el texto. No es válido. Commented el 1 nov. 2017 a las 19:13
  • actualiza la pregunta, añadiendo el nuevo problema y tambien es recomendable solo añadir solo el código relevante y tal vez una imagen de ejemplo para el fiddle
    – Rene Limon
    Commented el 1 nov. 2017 a las 19:14
  • Ya está actualizado. Commented el 1 nov. 2017 a las 19:16

1 respuesta 1

1

El texto te queda más arriba por que a la imagen le estás dando un margin-top: 50px; simplemente quita ese margin o agrégalo también al <h1> para que puedan quedar a la misma altura.

SOLUCIÓN 1: Quitar margin-top a la imagen

#oMSmin{
    margin-left: 80px;
    border: 4px solid;
}

SOLUCIÓN 2: agregar margin-top al título

.videos section h1{
    margin-top: 50px;
}

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.